From 5fc3cf973137cb16f93942ec2fec1f3891ed0877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 26 Mar 2022 05:20:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20switch=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20onswitch-color=20=E4=B8=8E=20unswitch-color=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md | 5 ++++-
 example/index.html                    | 2 +-
 example/src/layouts/Layout.vue        | 2 +-
 src/component/switch/index.vue        | 9 +++++++++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index bffe5470..d924713a 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/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>
diff --git a/example/index.html b/example/index.html
index adc611fc..d6592a19 100644
--- a/example/index.html
+++ b/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>
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 478cea6d..c18b2961 100644
--- a/example/src/layouts/Layout.vue
+++ b/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>
diff --git a/src/component/switch/index.vue b/src/component/switch/index.vue
index 2aa8198b..78592aa0 100644
--- a/src/component/switch/index.vue
+++ b/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,