feat: 优化 switch 组件

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

@@ -11,8 +11,19 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.4.0">
-      <ul> 
+    <ul> 
-      <a name="0-4-0"> </a> 
+      <a name="0-4-2"> </a> 
+      <li> 
+        <h3>0.4.2 <span class="layui-badge-rim">2022-03-25</span></h3> 
+        <ul>
+          <li>[优化] switch 组件 in-active-text 为 unswitch-text 属性, 默认不显示。</li>
+          <li>[优化] switch 组件 active-text 为 onswitch-text 属性, 默认不显示。
+          <li>[优化] switch 组件样式。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="0-4-1"> </a> 
       <li> 
         <h3>0.4.1 <span class="layui-badge-rim">2022-03-25</span></h3> 
         <ul>

example/src/assets/dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg>

example/src/assets/light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg>

example/src/layouts/Layout.vue

@@ -148,6 +148,18 @@
               <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
             </a>
           </li>
+          <li class="layui-nav-item">
+            <a href="javascript:void(0)">
+              <lay-switch v-model="isDark" class="switch">
+                <template #onswitch-icon>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="rgba(60, 60, 60, .7)" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg>
+                </template>
+                <template #unswitch-icon>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="rgba(60, 60, 60, .7)" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg>
+                </template>
+              </lay-switch>
+            </a>
+          </li>
           <li class="layui-nav-item">
             <a href="javascript:void(0)"> 0.4.1 </a>
           </li>
@@ -172,6 +184,7 @@ export default {
     const router = useRouter();
     const locale = ref("zh_CN");
     const currentPath = ref("/zh-CN/guide");
+    const isDark = ref(false);
     const locales = [
       { name: "zh_CN", locale: zh_CN, merge: true },
       { name: "en_US", locale: en_US, merge: true },
@@ -223,6 +236,7 @@ export default {
       menus,
       theme,
       locale,
+      isDark,
       locales,
       currentPath,
       handleClick,
@@ -293,6 +307,14 @@ export default {
   margin: 8px;
 }
 
+.switch svg {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    top: 3px;
+    left: 3px;
+}
+
 @media screen and (max-width: 768px) {
   .layui-side {
     width: 0px !important;

src/component/switch/index.less

@@ -5,11 +5,10 @@
   height: 22px;
   line-height: 22px;
   min-width: 35px;
-  padding: 0 5px;
+  padding: 0 4px;
-  border: 1px solid @global-neutral-color-6;
   border-radius: 20px;
   cursor: pointer;
-  background-color: #fff;
+  background-color: @global-neutral-color-6;
   -webkit-transition: 0.1s linear;
   transition: 0.1s linear;
 }
@@ -19,13 +18,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  left: 5px;
+  left: 3px;
-  top: 3px;
+  top: 2px;
-  width: 16px;
+  width: 18px;
-  height: 16px;
+  height: 18px;
-  line-height: 16px;
+  line-height: 18px;
   border-radius: 20px;
-  background-color: @global-neutral-color-6;
+  background-color: #fff;
+  box-shadow: 0 2px 4px #00230b33;
   -webkit-transition: 0.1s linear;
   transition: 0.1s linear;
 }

src/component/switch/index.vue

@@ -10,15 +10,13 @@ import "./index.less";
 
 export interface LaySwitchProps {
   disabled?: boolean;
-  activeText?: string;
   modelValue?: boolean;
-  inactiveText?: string;
+  onswitchText?: string;
+  unswitchText?: string;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
-  disabled: false,
+  disabled: false
-  activeText: "启用",
-  inactiveText: "禁用",
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
@@ -50,7 +48,7 @@ const handleClick = function () {
         'layui-switch-disabled': disabled,
       }"
     >
-      <em>{{ isActive == true ? activeText : inactiveText }}</em>
+      <em>{{ isActive == true ? onswitchText : unswitchText }}</em>
       <span>
         <div>
           <slot v-if="isActive" name="onswitch-icon"></slot>