[新增] switch 组件, 解决 timeline 警告

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

@@ -66,3 +66,49 @@ export default {
 </script>
 
 :::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active"></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active = ref(true);
+
+    return {
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: demo
+
+<template>
+  <lay-switch v-model="active" disabled></lay-switch>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const active = ref(true);
+
+    return {
+        active
+    }
+  }
+}
+</script>
+
+:::

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

@@ -45,9 +45,9 @@ export default {
 
 <template>
     <lay-timeline>
-        <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" sample></lay-timeline-item>
+        <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
-        <lay-timeline-item title="2016年，layui 首个版本发布" sample></lay-timeline-item>
+        <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
-        <lay-timeline-item title="2015年，layui 孵化" sample></lay-timeline-item>
+        <lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
     </lay-timeline>
 </template>
 

docs/src/layouts/Layout.vue

@@ -17,7 +17,7 @@
           <li><router-link to="/zh-CN/components/block">区块</router-link></li>
           <li><router-link to="/zh-CN/components/line">分割</router-link></li>
           <li><router-link to="/zh-CN/components/progress">进度</router-link></li>
-          <li><router-link to="/zh-CN/components/timeline">时间线</router-link></li>
+          <li><router-link to="/zh-CN/components/timeline">时间</router-link></li>
         </ul>
       </lay-side>
       <lay-body>

src/index.ts

@@ -26,6 +26,7 @@ import LayLine from "./module/line/index"
 import LayTimeline from "./module/timeline/index"
 import LayTimelineItem from "./module/timelineItem/index"
 import LayTextarea from "./module/textarea/index"
+import LaySwitch from "./module/switch/index"
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -50,7 +51,8 @@ const components: Record<string, IDefineComponent> = {
   LayLine,
   LayTimeline,
   LayTimelineItem,
-  LayTextarea
+  LayTextarea,
+  LaySwitch
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -87,6 +89,7 @@ export {
   LayTimeline,
   LayTimelineItem,
   LayTextarea,
+  LaySwitch,
   install,
 }
 

src/module/switch/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySwitch', Component)
+}
+
+export default Component as IDefineComponent

src/module/switch/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <span @click="handleClick">
+        <div class="layui-unselect layui-form-switch"
+            :class="{
+                'layui-form-onswitch': modelValue == true,
+                'layui-checkbox-disbaled layui-disabled': disabled
+            }">
+            <em>{{modelValue == true ? "启用" : "禁用"}}</em>
+            <i></i>
+        </div>
+    </span>
+
+
+</template>
+
+<script setup name="LaySwitch" lang="ts">
+import { defineProps, defineEmits } from '@vue/runtime-core'
+
+const props =
+  defineProps<{
+    modelValue: boolean
+    disabled?: boolean
+  }>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = function() {
+    if(props.disabled) {
+        return false
+    }
+    emit('update:modelValue',!props.modelValue)
+}
+</script>

src/module/timelineItem/index.vue

@@ -19,6 +19,6 @@ import { defineProps } from '@vue/runtime-core'
 const props =
   defineProps<{
     title: string
-    simple: boolean
+    simple?: boolean
   }>()
 </script>