perf(radio): 新增 radio 组件 change 事件

docs/docs/zh-CN/components/radio.md

@@ -0,0 +1,86 @@
+::: demo
+
+<template>
+  <lay-form>
+    <lay-radio v-model="selected1" name="action" label="1">写作</lay-radio>
+    <lay-radio v-model="selected1" name="action" label="2">画画</lay-radio>
+    <lay-radio v-model="selected1" name="action" label="3">运动</lay-radio>
+  </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const selected1 = ref("1");
+
+    return {
+        selected
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-radio v-model="selected2" name="action" label="1">写作</lay-radio>
+    <lay-radio v-model="selected2" name="action" label="2">画画</lay-radio>
+    <lay-radio v-model="selected2" name="action" label="3">运动</lay-radio>
+    <lay-radio v-model="selected2" name="action" label="4" :disabled="disabled">禁用</lay-radio>
+  </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const disabled = ref(true);
+    const selected2 = ref("1");
+
+    return {
+        disabled,
+        selected2
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-form>
+    <lay-radio v-model="selected3" name="action" label="1" @change="change">写作</lay-radio>
+    <lay-radio v-model="selected3" name="action" label="2" @change="change">画画</lay-radio>
+    <lay-radio v-model="selected3" name="action" label="3" @change="change">运动</lay-radio>
+  </lay-form>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const selected3 = ref("1");
+    const change = function( current ) {
+        console.log("当前值:" + current)
+    }
+    return {
+        selected3,
+        change
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -278,6 +278,11 @@ export default {
         title: '复选框',
         subTitle: 'checkbox',
         path: '/zh-CN/components/checkbox',
+      },{
+        id: 33,
+        title: '单选框',
+        subTitle: 'radio',
+        path: '/zh-CN/components/radio',
       },
     ]
 

docs/src/router/zh-CN.ts

@@ -178,6 +178,10 @@ const zhCN = [
         path: '/zh-CN/components/checkbox',
         component: () => import('../../docs/zh-CN/components/checkbox.md'),
         meta: { title: '复选框' },
+      },{
+        path: '/zh-CN/components/radio',
+        component: () => import('../../docs/zh-CN/components/radio.md'),
+        meta: { title: '单选框' },
       },
     ],
   },

src/module/radio/index.vue

@@ -7,20 +7,18 @@
         'layui-form-radioed': modelValue == label,
         'layui-radio-disbaled layui-disabled': disabled,
       }"
-      @click="handleClick"
+      @click.stop="handleClick"
     >
-      <i
-        v-if="modelValue != label"
-        class="layui-anim layui-icon layui-anim-scaleSpring"
-        :class="{ 'layui-form-radioed': modelValue != label }"
-        >&#xe63f;</i
-      >
       <i
         v-if="modelValue == label"
         class="layui-anim layui-icon layui-anim-scaleSpring"
-        :class="{ 'layui-form-radioed': modelValue == label }"
         >&#xe643;</i
       >
+      <i
+        v-else
+        class="layui-anim layui-icon layui-anim-scaleSpring layui-form-radioed"
+        >&#xe63f;</i
+      >
       <span><slot /></span>
     </div>
   </span>
@@ -29,19 +27,21 @@
 <script setup name="LayRadio" lang="ts">
 import { defineProps, defineEmits } from 'vue'
 
-const props = defineProps<{
+const props =
-  modelValue: string
+  defineProps<{
-  disabled?: boolean
+    modelValue: string
-  label?: string
+    disabled?: boolean
-  name: string
+    label?: string
-}>()
+    name: string
+  }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','change'])
 
 const handleClick = function () {
   if (props.disabled) {
-    return false
+    return
   }
+  emit('change', props.label)
   emit('update:modelValue', props.label)
 }
 </script>