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

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

@@ -14,8 +14,11 @@
     <ul> 
       <a name="0-4-2"> </a> 
       <li> 
-        <h3>0.4.2 <span class="layui-badge-rim">2022-03-25</span></h3> 
+        <h3>0.4.2 <span class="layui-badge-rim">2022-03-26</span></h3> 
         <ul>
+          <li>[新增] switch 组件 onswitch-color 属性。</li>
+          <li>[新增] switch 组件 unswitch-color 属性。</li>
+          <li>[修复] docsearch 检索插件引起的 peer dependencies 警告。</li>
           <li>[优化] switch 组件 in-active-text 为 unswitch-text 属性, 默认不显示。</li>
           <li>[优化] switch 组件 active-text 为 onswitch-text 属性, 默认不显示。</li>
           <li>[优化] switch 组件样式。</li>

example/index.html

@@ -23,6 +23,6 @@
       <!--app-html-->
     </div>
     <script type="module" src="/src/entry-client.ts"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
   </body>
 </html>

example/src/layouts/Layout.vue

@@ -150,7 +150,7 @@
           </li>
           <li class="layui-nav-item">
             <a href="javascript:void(0)">
-              <lay-switch v-model="isDark" class="switch">
+              <lay-switch v-model="isDark" class="switch" onswitch-color="rgba(255, 255, 255, 0.05)" unswitch-color="rgba(255, 255, 255, 0.05)">
                 <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>

src/component/switch/index.vue

@@ -13,6 +13,8 @@ export interface LaySwitchProps {
   modelValue?: boolean;
   onswitchText?: string;
   unswitchText?: string;
+  onswitchColor?: string;
+  unswitchColor?: string;
 }
 
 const props = withDefaults(defineProps<LaySwitchProps>(), {
@@ -36,12 +38,19 @@ const handleClick = function () {
     isActive.value = !isActive.value;
   }
 };
+
+
+const styles = computed(() => {
+  return { 'background-color': isActive.value ? props.onswitchColor : props.unswitchColor}
+})
 </script>
 
 <template>
   <span @click.stop="handleClick">
     <div
+
       class="layui-unselect layui-form-switch"
+      :style="styles"
       :class="{
         'layui-disabled': disabled,
         'layui-form-onswitch': isActive,