feat: 新增 switch 组件 onswitch-value 与 unswitch-value 属性

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

@@ -146,6 +146,32 @@ export default {
 
 :::
 
+::: title 自定义值
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active6" onswitch-value="dark"  unswitch-value="light"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active6 = ref('dark')
+
+    return {
+        active6
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title Switch 属性
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -14,8 +14,10 @@
     <ul> 
       <a name="0-4-5"> </a> 
       <li> 
-        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <h3>0.4.5 <span class="layui-badge-rim">2022-03-29</span></h3> 
         <ul>
+          <li>[新增] switch 组件 onswitch-value 属性。</li>
+          <li>[新增] switch 组件 unswitch-value 属性。</li>
           <li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
           <li>[修复] transfer 组件 showSearch 属性类型警告。</li>
           <li>[修复] upload 组件 number 属性必填警告。</li>
@@ -29,7 +31,7 @@
     <ul> 
       <a name="0-4-4"> </a> 
       <li> 
-        <h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3> 
+        <h3>0.4.5 <span class="layui-badge-rim">2022-04-01</span></h3> 
         <ul>
           <li>[新增] button 组件 prefix-icon 属性。</li>
           <li>[新增] button 组件 suffix-icon 属性。</li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.4.5-alpha.5",
+  "version": "0.4.5-alpha.7",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/component/menu/index.vue

@@ -32,7 +32,6 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   collapseTransition: true,
 });
 
-
 const isTree = computed(() => props.tree);
 const isCollapse = computed(() => props.collapse);
 const isCollapseTransition = computed(() => props.collapseTransition);
@@ -67,7 +66,8 @@ watch(
       // 赋值所有打开
       emit("update:openKeys", oldOpenKeys.value);
     }
-  }, { immediate: true }
+  },
+  { immediate: true }
 );
 
 provide("isTree", isTree);

src/component/subMenu/index.vue

@@ -29,7 +29,9 @@ const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
 const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
 const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
-const isCollapseTransition: Ref<boolean> = inject("isCollapseTransition") as Ref<boolean>;
+const isCollapseTransition: Ref<boolean> = inject(
+  "isCollapseTransition"
+) as Ref<boolean>;
 
 const isOpen = computed(() => {
   return openKeys.value.includes(props.id);

src/component/switch/index.vue

@@ -10,26 +10,35 @@ import "./index.less";
 
 export interface LaySwitchProps {
   disabled?: boolean;
-  modelValue?: boolean;
+  modelValue?: string | number | boolean;
   onswitchText?: string;
   unswitchText?: string;
   onswitchColor?: string;
   unswitchColor?: string;
+  onswitchValue?: string | number | boolean;
+  unswitchValue?: string | number | boolean;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
   disabled: false,
+  onswitchValue: true,
+  unswitchValue: false,
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
 const isActive = computed({
   get() {
-    return props.modelValue;
+    return props.modelValue === props.onswitchValue;
   },
   set(val) {
-    emit("change", val);
+    if(val) {
-    emit("update:modelValue", val);
+      emit("change", props.onswitchValue);
+      emit("update:modelValue", props.onswitchValue);
+    } else {
+      emit("change", props.unswitchValue);
+      emit("update:modelValue", props.unswitchValue);
+    }
   },
 });