[暂存] 重构 switch 逻辑

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

@@ -3,6 +3,29 @@
 
 ::: demo
 
+<template>
+  <lay-switch></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
 <template>
   <lay-switch v-model="active1"></lay-switch>
 </template>

docs/src/view/guide.vue

@@ -86,6 +86,12 @@ export default {
             subTitle: 'change log',
             path: '/zh-CN/guide/changelog',
           },
+          {
+            id: 4,
+            title: '规范',
+            subTitle: 'norms',
+            path: '/zh-CN/guide/norms'
+          }
         ],
       },
     ]

src/module/button/index.vue

@@ -11,19 +11,19 @@ import { computed } from "vue";
 export interface LayButtonProps {
   type?: "primary" | "normal" | "warm" | "danger";
   size?: "lg" | "sm" | "xs";
-  fluid?: boolean;
-  radius?: boolean;
+  fluid?: boolean | string;
+  radius?: boolean | string;
   border?: "green" | "blue" | "orange" | "red" | "black";
-  disabled?: boolean;
-  loading?: boolean;
+  disabled?: boolean | string;
+  loading?: boolean | string;
   nativeType?: "button" | "submit" | "reset";
 }
 
 const props = withDefaults(defineProps<LayButtonProps>(), {
   fluid: false,
   radius: false,
-  disabled: false,
   loading: false,
+  disabled: false,
   nativeType: "button",
 });
 
@@ -43,7 +43,7 @@ const classes = computed(() => {
       {
         'layui-btn-fluid': fluid,
         'layui-btn-radius': radius,
-        'layui-btn-disabled': disabled
+        'layui-btn-disabled': disabled,
       },
       classes,
     ]"

src/module/layer/index.vue

@@ -83,52 +83,52 @@
 
 <script lang="ts">
 export default {
-  name: 'LayLayer',
-}
+  name: "LayLayer",
+};
 </script>
 
 <script lang="ts" setup>
-import { onMounted, onUpdated, ref, useSlots, watch } from 'vue'
-import useMove from '../../hooks/useMove'
-import { guid } from '../../tools/guidUtil'
+import { onMounted, onUpdated, ref, useSlots, watch } from "vue";
+import useMove from "../../hooks/useMove";
+import { guid } from "../../tools/guidUtil";
 
-const slot = useSlots()
+const slot = useSlots();
 
 onMounted(() => {
-  moveHandle()
-})
+  moveHandle();
+});
 
 onUpdated(() => {
-  moveHandle()
-})
+  moveHandle();
+});
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    zIndex?: number
-    title?: string
-    offset?: string[]
-    width?: string
-    height?: string
-    visible?: boolean | string
-    maxmin?: boolean | string
-    btn?: Record<string, unknown>[]
-    move?: boolean | string
-    type?: number
-    content?: string
-    shade?: boolean | string
-    shadeClose?: boolean | string
-    closeBtn?: boolean | string
-    btnAlign?: string
-    anim?: number
-  }>(),
-  {
-    id: 'layer-' + guid(),
+export interface LayLayerProps {
+  id?: string;
+  zIndex?: number;
+  title?: string;
+  offset?: string[];
+  width?: string;
+  height?: string;
+  visible?: boolean | string;
+  maxmin?: boolean | string;
+  btn?: Record<string, unknown>[];
+  move?: boolean | string;
+  type?: number;
+  content?: string;
+  shade?: boolean | string;
+  shadeClose?: boolean | string;
+  closeBtn?: boolean | string;
+  btnAlign?: string;
+  anim?: number;
+}
+
+const props = withDefaults(defineProps<LayLayerProps>(), {
+  id: "layer-" + guid(),
   zIndex: 99999999,
-    title: '标题',
-    offset: () => ['50%', '50%'],
-    width: '390px',
-    height: '330px',
+  title: "标题",
+  offset: () => ["50%", "50%"],
+  width: "390px",
+  height: "330px",
   visible: true,
   maxmin: false,
   move: false,
@@ -137,75 +137,74 @@ const props = withDefaults(
   shade: false,
   shadeClose: true,
   closeBtn: true,
-    btnAlign: 'l',
+  btnAlign: "l",
   anim: 0,
-    content: '',
-  }
-)
+  content: "",
+});
 
-const top = ref(props.offset[0])
-const left = ref(props.offset[1])
-const width = ref(props.width)
-const height = ref(props.height)
-const max = ref(false)
+const top = ref(props.offset[0]);
+const left = ref(props.offset[1]);
+const width = ref(props.width);
+const height = ref(props.height);
+const max = ref(false);
 const contentHeight = ref(
   props.btn.length > 0
-    ? 'calc(' + height.value + ' - 100px)'
-    : 'calc(' + height.value + ' - 50px)'
-)
+    ? "calc(" + height.value + " - 100px)"
+    : "calc(" + height.value + " - 50px)"
+);
 
 watch(max, function () {
   if (max.value) {
     contentHeight.value =
-      props.btn.length > 0 ? 'calc(100% - 100px)' : 'calc(100% - 50px)'
+      props.btn.length > 0 ? "calc(100% - 100px)" : "calc(100% - 50px)";
   } else {
     contentHeight.value =
       props.btn.length > 0
-        ? 'calc(' + height.value + ' - 100px)'
-        : 'calc(' + height.value + ' - 50px)'
+        ? "calc(" + height.value + " - 100px)"
+        : "calc(" + height.value + " - 50px)";
   }
-})
+});
 
-const emit = defineEmits(['close', 'update:visible'])
+const emit = defineEmits(["close", "update:visible"]);
 
 const moveHandle = function () {
   if (props.move) {
-    const el = document.getElementById(props.id)
+    const el = document.getElementById(props.id);
     if (el != null) {
-      useMove(el)
+      useMove(el);
     }
   }
-}
+};
 
 const shadeHandle = function () {
   if (props.shadeClose) {
-    emit('close')
-    emit('update:visible', false)
+    emit("close");
+    emit("update:visible", false);
   }
-}
+};
 
 const closeHandle = function () {
-  emit('close')
-  emit('update:visible', false)
-}
+  emit("close");
+  emit("update:visible", false);
+};
 
 const minHandle = function () {
-  emit('close')
-  emit('update:visible', false)
-}
+  emit("close");
+  emit("update:visible", false);
+};
 
 const maxHandle = function () {
   if (max.value) {
-    width.value = props.width
-    height.value = props.height
-    top.value = props.offset[0]
-    left.value = props.offset[1]
+    width.value = props.width;
+    height.value = props.height;
+    top.value = props.offset[0];
+    left.value = props.offset[1];
   } else {
-    width.value = '100%'
-    height.value = '100%'
-    top.value = '0px'
-    left.value = '0px'
+    width.value = "100%";
+    height.value = "100%";
+    top.value = "0px";
+    left.value = "0px";
   }
-  max.value = !max.value
-}
+  max.value = !max.value;
+};
 </script>

src/module/switch/index.vue

@@ -5,27 +5,37 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { defineProps, defineEmits } from "vue";
-import "./index.less"
+import { defineProps, defineEmits, computed, ref } from "vue";
+import "./index.less";
 
 export interface LaySwitchProps {
-  modelValue: boolean;
   disabled?: boolean;
   activeText?: string;
+  modelValue?: boolean;
   inactiveText?: string;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
+  disabled: false,
   activeText: "启用",
   inactiveText: "禁用",
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
+const isActive = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("change", val);
+    emit("update:modelValue", val);
+  },
+});
+
 const handleClick = function () {
   if (!props.disabled) {
-    emit("update:modelValue", !props.modelValue);
-    emit("change", !props.modelValue);
+    isActive.value = !isActive.value;
   }
 };
 </script>
@@ -35,11 +45,12 @@ const handleClick = function () {
     <div
       class="layui-unselect layui-form-switch"
       :class="{
-        'layui-form-onswitch': modelValue,
-        'layui-checkbox-disbaled layui-disabled': disabled,
+        'layui-disabled': disabled,
+        'layui-form-onswitch': isActive,
+        'layui-checkbox-disbaled': disabled,
       }"
     >
-      <em>{{ modelValue == true ? activeText : inactiveText }}</em>
+      <em>{{ isActive == true ? activeText : inactiveText }}</em>
       <i />
     </div>
   </span>