feat(switch): add width property to support custom switch width (#3879)

Author: IKEYCY

examples/sites/demos/apis/switch.js

@@ -111,6 +111,21 @@ export default {
           pcDemo: 'custom-true-false-value',
           mfDemo: ''
         },
+        {
+          name: 'width',
+          type: 'number | string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '定义开关的宽度',
+            'en-US': 'Define the width of the switch'
+          },
+          mode: ['pc'],
+          mfDemo: '',
+          pcDemo: 'width',
+          meta: {
+            stable: '3.28.0'
+          }
+        },
         {
           name: 'types',
           type: 'string',

examples/sites/demos/pc/app/switch/webdoc/switch.js

@@ -28,6 +28,18 @@ export default {
       },
       codeFiles: ['mini-mode.vue']
     },
+    {
+      demoId: 'width',
+      name: {
+        'zh-CN': '自定义宽度',
+        'en-US': 'Custom width'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>width</code> 设置开关的宽度。</p>',
+        'en-US': '<p>Set the width of the switch through <code>width</code> .</p>'
+      },
+      codeFiles: ['width.vue']
+    },
     {
       demoId: 'loading',
       name: {

examples/sites/demos/pc/app/switch/width-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="switch-demo">
+    <div class="demo-item">
+      <div class="demo-title">number类型</div>
+      <tiny-switch :width="150"></tiny-switch>
+    </div>
+
+    <div class="demo-item">
+      <div class="demo-title">string类型</div>
+      <tiny-switch width="150PX"></tiny-switch>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinySwitch } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.demo-item {
+  padding: 15px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/switch/width.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('width 属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('switch#width')
+
+  const demo = page.locator('#width')
+  const switchBtns = demo.locator('.tiny-switch')
+
+  // 测试 number 类型的 width
+  const numberSwitch = switchBtns.nth(0)
+  await expect(numberSwitch).toHaveCSS('width', '150px')
+
+  // 测试 string 类型的 width
+  const stringSwitch = switchBtns.nth(1)
+  await expect(stringSwitch).toHaveCSS('width', '150px')
+})

examples/sites/demos/pc/app/switch/width.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="switch-demo">
+    <div class="demo-item">
+      <div class="demo-title">number类型</div>
+      <tiny-switch :width="150"></tiny-switch>
+    </div>
+
+    <div class="demo-item">
+      <div class="demo-title">string类型</div>
+      <tiny-switch width="150PX"></tiny-switch>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinySwitch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch
+  }
+}
+</script>
+
+<style scoped>
+.demo-item {
+  padding: 15px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+</style>

packages/renderless/src/switch/vue.ts

@@ -45,6 +45,25 @@ export const renderless = (
       } else {
         return props.showText
       }
+    }),
+    // 添加 switchStyle 计算属性
+    switchStyle: computed(() => {
+      if (props.width) {
+        return {
+          width: typeof props.width === 'number' ? `${props.width}px` : props.width
+        }
+      }
+      return {}
+    }),
+    // 添加 displayOnlyStyle 计算属性
+    displayOnlyStyle: computed(() => {
+      if (props.width) {
+        return {
+          width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+          display: 'inline-block'
+        }
+      }
+      return {}
     })
   })
 

packages/vue/src/switch/src/index.ts

@@ -69,7 +69,8 @@ export const switchProps = {
   loading: {
     type: Boolean,
     default: false
-  }
+  },
+  width: [Number, String]
 }
 
 export default defineComponent({

packages/vue/src/switch/src/pc.vue

@@ -14,6 +14,7 @@
     v-if="!state.isDisplayOnly"
     :class="[state.wrapClasses, state.showText ? 'tiny-switch__text' : '']"
     :tabindex="tabindex"
+    :style="state.switchStyle"
     @click="toggle"
     @keydown.space="toggle"
     @keydown.enter="toggle"
@@ -36,7 +37,7 @@
       <slot v-if="state.currentValue === falseValue && !loading" name="inactive-icon"></slot>
     </span>
   </span>
-  <span v-else>
+  <span v-else :style="state.displayOnlyStyle">
     <slot v-if="state.currentValue === trueValue" name="open">{{ t('yes') }}</slot>
     <slot v-if="state.currentValue === falseValue" name="close">{{ t('no') }}</slot></span
   >
@@ -62,7 +63,8 @@ export default defineComponent({
     'showText',
     'beforeChange',
     'displayOnly',
-    'loading'
+    'loading',
+    'width'
   ],
   components: { IconLoading: IconLoadingShadow() },
   setup(props, context) {