perf(switch): 新增 active-text inactive-text disabled 属性

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

@@ -0,0 +1,106 @@
+::: demo
+
+<template>
+  <lay-switch v-model="active1"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active1 = ref(true);
+
+    return {
+        active1
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active2" @change="change"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active2 = ref(true);
+
+    const change = function( val ) {
+        console.log("当前值:" + val)
+    }
+
+    return {
+        active2,
+        change
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active3" :disabled="disabled"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active3 = ref(true);
+    const disabled = ref(true)
+
+    return {
+        active3
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active4" active-text="白天"  inactive-text="夜间"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active4 = ref(true)
+
+    return {
+        active4
+    }
+  }
+}
+</script>
+
+:::
+
+| Name   | Description | Accepted Values  |
+| -------- | ---- | ----------------------- | 
+| name       | 原生 name 属性 | --  | 
+| v-model     | 是否启用 | `true` `false`  | 
+| disabled      | 禁用 | `true` `false`   |
+| change   | 切换事件 | current : 当前值  | inactiveText
+| active-text     | 启用描述 | `启动`  | 
+| inactive-text   | 禁用描述 | `禁用`  |

docs/src/layouts/Layout.vue

@@ -293,6 +293,11 @@ export default {
         title: '文本域',
         subTitle: 'textarea',
         path: '/zh-CN/components/textarea',
+      },{
+        id: 36,
+        title: '开关',
+        subTitle: 'switch',
+        path: '/zh-CN/components/switch',
       }
     ]
 

docs/src/plugin/common-plugins.ts

@@ -25,6 +25,6 @@ const plugins = [
         .use(...createContainer('field', '描述信息'))
     },
   }),
-]
+] as any
 
 export default plugins

docs/src/router/zh-CN.ts

@@ -190,6 +190,10 @@ const zhCN = [
         path: '/zh-CN/components/textarea',
         component: () => import('../../docs/zh-CN/components/textarea.md'),
         meta: { title: '文本域' },
+      },{
+        path: '/zh-CN/components/switch',
+        component: () => import('../../docs/zh-CN/components/switch.md'),
+        meta: { title: '开关' },
       },
     ],
   },

src/module/switch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span @click="handleClick">
+  <span @click.stop="handleClick">
     <div
       class="layui-unselect layui-form-switch"
       :class="{
@@ -7,7 +7,7 @@
         'layui-checkbox-disbaled layui-disabled': disabled,
       }"
     >
-      <em>{{ modelValue == true ? '启用' : '禁用' }}</em>
+      <em>{{ modelValue == true ? activeText : inactiveText }}</em>
       <i />
     </div>
   </span>
@@ -16,17 +16,26 @@
 <script setup name="LaySwitch" lang="ts">
 import { defineProps, defineEmits } from 'vue'
 
-const props = defineProps<{
-  modelValue: boolean
-  disabled?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    disabled?: boolean
+    activeText: string
+    inactiveText: string
+  }>(),
+  {
+    activeText: '启用',
+    inactiveText: '禁用',
+  }
+)
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const handleClick = function () {
   if (props.disabled) {
     return false
   }
   emit('update:modelValue', !props.modelValue)
+  emit('change', !props.modelValue)
 }
 </script>