feat: ✨ 修复 Switch 组件增加可展示状态文字 (#798)

docs/component/switch.md

@@ -1,3 +1,11 @@
+<!--
+ * @Author: 810505339
+ * @Date: 2024-12-20 14:11:10
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-01-07 15:30:02
+ * @FilePath: \wot-design-uni\docs\component\switch.md
+ * 记得注释
+-->
 #  Switch 开关
 
 
@@ -49,21 +57,11 @@ const checked = ref<boolean>(true)
 <wd-switch v-model="checked" :before-change="beforeChange" @change="handleChange" />
 ```
 
-```typescript
-import { useMessage } from '@/uni_modules/wot-design-uni'
-
-const message = useMessage()
-
-const beforeChange = ({ value, resolve }) => {
-  message
-    .confirm('是否切换开关')
-    .then(() => {
-      resolve(true)
-    })
-    .catch(() => {
-      resolve(false)
-    })
-}
+## 文字描述
+通过 `active-text` 属性修改开关打开时的文字，`inactive-text` 属性修改开关关闭时的文字。
+
+```html
+ <wd-switch  active-text="喜欢摸鱼" inactive-text="讨厌摸鱼"  />
 ```
 
 ## Attributes
@@ -77,6 +75,8 @@ const beforeChange = ({ value, resolve }) => {
 | active-color | 打开时的背景色 | string | - | #4D80F0 | - |
 | inactive-color | 关闭时的背景色，默认为白色，所以有灰色边框，如果设置了该值，则会自动去除灰色边框 | string | - | #fff | - |
 | size | 开关大小，可以为任何单位的字符串尺寸 | string/number | - | 28px | - |
+| active-text   | 打开时的内部文字 | string | - | - | - |
+| inactive-text | 关闭时的内部文字 | string | - | - | - |
 | before-change | 修改前钩子 | function | - | - | - |
 
 ## Events

src/pages/switch/Index.vue

@@ -24,6 +24,9 @@
       <demo-block title="before-change 修改前钩子函数">
         <wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" />
       </demo-block>
+      <demo-block title="文字描述">
+        <wd-switch v-model="checked8" active-text="喜欢摸鱼" inactive-text="讨厌摸鱼" @change="handleChange6" />
+      </demo-block>
     </view>
   </page-wraper>
 </template>
@@ -39,6 +42,7 @@ const checked4 = ref<boolean>(true)
 const checked5 = ref<boolean>(true)
 const checked6 = ref<boolean>(false)
 const checked7 = ref<boolean>(false)
+const checked8 = ref<boolean>(true)
 
 const message = useMessage()
 
@@ -67,6 +71,9 @@ function handleChange4({ value }: any) {
 function handleChange5({ value }: any) {
   console.log(value)
 }
+function handleChange6({ value }: any) {
+  console.log(value)
+}
 </script>
 <style lang="scss" scoped>
 page {

src/uni_modules/wot-design-uni/components/wd-switch/index.scss

@@ -2,9 +2,10 @@
 @import '../common/abstracts/mixin';
 
 @include b(switch) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   position: relative;
-  width: $-switch-width;
+  min-width: $-switch-width;
   height: $-switch-height;
   border-radius: $-switch-circle-size;
   background: $-switch-inactive-color;
@@ -22,7 +23,7 @@
     box-sizing: border-box;
     position: absolute;
     display: inline-block;
-    width: $-switch-circle-size;
+    min-width: $-switch-circle-size;
     height: $-switch-circle-size;
     top: 2px;
     left: 2px;
@@ -34,7 +35,7 @@
     &::after {
       position: absolute;
       content: '';
-      width: calc(200% - 2px);
+      min-width: calc(200% - 2px);
       height: calc(200% - 2px);
       top: 50%;
       left: 50%;
@@ -43,16 +44,33 @@
       border-radius: 50%;
     }
   }
+  @include e(inner) {
+    color:#fff;
+    font-size: calc($-switch-circle-size/2.5);
+    width:100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px 0 calc($-switch-circle-size * 2 + 8px);
+    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all 0.3s;
+  }
   @include when(checked) {
     background: $-switch-active-color;
     border-color: $-switch-active-color;
 
     .wd-switch__circle {
-      left: calc($-switch-width - $-switch-circle-size - 2px);
+      left: calc(100% - $-switch-circle-size - 2px);
       box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
     }
+    .wd-switch__inner{
+      padding: 0 calc($-switch-circle-size * 2 + 8px) 0 4px;
+    }
   }
   @include when(disabled) {
     opacity: 0.5;
   }
-}
+}

src/uni_modules/wot-design-uni/components/wd-switch/types.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: 810505339
+ * @Date: 2025-01-03 14:09:33
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-01-07 13:44:45
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-switch\types.ts
+ * 记得注释
+ */
 import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, numericProp } from '../common/props'
 
@@ -44,6 +52,14 @@ export const switchProps = {
    * 非激活颜色
    */
   inactiveColor: String,
+  /**
+   * 激活的文字
+   */
+  activeText: String,
+  /**
+   * 非激活的文字
+   */
+  inactiveText: String,
   /**
    * 大小
    */

src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue

@@ -1,5 +1,8 @@
 <template>
   <view :class="rootClass" :style="rootStyle" @click="switchValue">
+    <view class="wd-switch__inner" v-if="innerText">
+      {{ innerText }}
+    </view>
     <view class="wd-switch__circle" :style="circleStyle"></view>
   </view>
 </template>
@@ -45,6 +48,10 @@ const circleStyle = computed(() => {
   return circleStyle
 })
 
+const innerText = computed(() => {
+  return props.modelValue === props.activeValue ? props.activeText : props.inactiveText
+})
+
 function switchValue() {
   if (props.disabled) return
   const newVal = props.modelValue === props.activeValue ? props.inactiveValue : props.activeValue