fix(slider): [slider] In input box mode, set the min attribute to a negative value and value to a negative value, and the % symbol should not be used. (#1202)

examples/sites/demos/pc/app/slider/dynamic-disable-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <tiny-slider v-model="value2" disabled></tiny-slider>
+  <tiny-slider v-model="value" disabled></tiny-slider>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Slider as TinySlider } from '@opentiny/vue'
 
-const value2 = ref(40)
+const value = ref(40)
 </script>

examples/sites/demos/pc/app/slider/dynamic-disable.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value2" disabled></tiny-slider>
+  <tiny-slider v-model="value" disabled></tiny-slider>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value2: 40
+      value: 40
     }
   }
 }

examples/sites/demos/pc/app/slider/range-select-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <tiny-slider v-model="value3"></tiny-slider>
+  <tiny-slider v-model="value"></tiny-slider>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Slider as TinySlider } from '@opentiny/vue'
 
-const value3 = ref([20, 40])
+const value = ref([20, 40])
 </script>

examples/sites/demos/pc/app/slider/range-select.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value3"></tiny-slider>
+  <tiny-slider v-model="value"></tiny-slider>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value3: [20, 40]
+      value: [20, 40]
     }
   }
 }

examples/sites/demos/pc/app/slider/shortcut-operation-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <tiny-slider v-model="value2" :num-pages="3"></tiny-slider>
+  <tiny-slider v-model="value" :num-pages="3"></tiny-slider>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Slider as TinySlider } from '@opentiny/vue'
 
-const value2 = ref(40)
+const value = ref(40)
 </script>

examples/sites/demos/pc/app/slider/shortcut-operation.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value2" :num-pages="3"></tiny-slider>
+  <tiny-slider v-model="value" :num-pages="3"></tiny-slider>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value2: 40
+      value: 40
     }
   }
 }

examples/sites/demos/pc/app/slider/show-input-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <tiny-slider v-model="value2" :show-input="true"></tiny-slider>
+  <tiny-slider v-model="value" :show-input="true" unit="%"></tiny-slider>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Slider as TinySlider } from '@opentiny/vue'
 
-const value2 = ref(40)
+const value = ref(40)
 </script>

examples/sites/demos/pc/app/slider/show-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value2" :show-input="true"></tiny-slider>
+  <tiny-slider v-model="value" :show-input="true" unit="%"></tiny-slider>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value2: 40
+      value: 40
     }
   }
 }

examples/sites/demos/pc/app/slider/show-iput.spec.ts

@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('输入框模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#show-iput')
+  await page.goto('slider#show-input')
 
-  const sliderInput= page.locator('.tiny-slider-container .tiny-slider__input input')
+  const sliderInput = page.locator('.tiny-slider-container .tiny-slider__input input')
   const sliderBlock = page.locator('.tiny-slider-container .tiny-slider .tiny-slider__handle')
 
   await sliderInput.click()
@@ -13,5 +13,4 @@ test('输入框模式', async ({ page }) => {
   await sliderBlock.hover()
 
   await expect(page.locator('.tiny-slider-container .tiny-slider .tiny-slider__tips')).toHaveText('60')
-
 })

examples/sites/demos/pc/app/slider/slider-event-composition-api.vue

@@ -1,12 +1,12 @@
 <template>
-  <tiny-slider v-model="value2" @change="change" @start="start" @stop="stop"></tiny-slider>
+  <tiny-slider v-model="value" @change="change" @start="start" @stop="stop"></tiny-slider>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Slider as TinySlider, Notify } from '@opentiny/vue'
 
-const value2 = ref(40)
+const value = ref(40)
 
 function start(val) {
   Notify({

examples/sites/demos/pc/app/slider/slider-event.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value2" @change="change" @start="start" @stop="stop"></tiny-slider>
+  <tiny-slider v-model="value" @change="change" @start="start" @stop="stop"></tiny-slider>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value2: 40
+      value: 40
     }
   },
   methods: {

examples/sites/demos/pc/app/slider/slider-slot-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value5" :show-input="true">
+  <tiny-slider v-model="value" :show-input="true">
     <template #default="slotScope">
       <b>{{ slotScope.slotScope }}%</b>
     </template>
@@ -10,5 +10,5 @@
 import { ref } from 'vue'
 import { Slider as TinySlider } from '@opentiny/vue'
 
-const value5 = ref(40)
+const value = ref(40)
 </script>

examples/sites/demos/pc/app/slider/slider-slot.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-slider v-model="value5" :show-input="true">
+  <tiny-slider v-model="value" :show-input="true">
     <template #default="slotScope">
       <b>{{ slotScope.slotScope }}%</b>
     </template>
@@ -15,7 +15,7 @@ export default {
   },
   data() {
     return {
-      value5: 40
+      value: 40
     }
   }
 }

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

@@ -47,13 +47,15 @@ export default {
       'codeFiles': ['range-select.vue']
     },
     {
-      'demoId': 'show-iput',
+      'demoId': 'show-input',
       'name': { 'zh-CN': '输入框模式', 'en-US': 'Text box mode' },
       'desc': {
-        'zh-CN': '<p>通过配置<code>show-input</code>，开启滑块输入框模式。</p>',
-        'en-US': '<p>Enable the slider text box mode by configuring <code>show-input</code>。</p>'
+        'zh-CN':
+          '<p>通过配置<code>show-input</code>，开启滑块输入框模式。可以通过配置<code>unit</code>来决定输入框后面显示的单位。</p>',
+        'en-US':
+          '<p>Enable the slider text box mode by configuring <code>show-input</code>。You can determine the units displayed after the input box by configuring<code>unit</code>.</p>'
       },
-      'codeFiles': ['show-iput.vue']
+      'codeFiles': ['show-input.vue']
     },
     {
       'demoId': 'shortcut-operation',
@@ -165,7 +167,17 @@ export default {
             'zh-CN': '是否显示输入框，仅在非范围选择时有效',
             'en-US': 'Indicates whether to display the text box. This parameter is valid only for non-range selection'
           },
-          'demoId': 'show-iput'
+          'demoId': 'show-input'
+        },
+        {
+          'name': 'unit',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '输入框后面显示的单位，仅在输入框模式下有效',
+            'en-US': 'The units displayed after the input box, only valid in input box mode'
+          },
+          'demoId': 'show-input'
         },
         {
           'name': 'format-tooltip',

packages/vue/src/slider/__tests__/slider.test.tsx

@@ -52,7 +52,22 @@ describe('PC Mode', () => {
 
   test.todo('step 设置滑块移动时，每步位移距离，必需是大于0的正整数。')
 
-  test.todo('show-input 是否显示输入框，仅在非范围选择时有效')
+  test('show-input 是否显示输入框，仅在非范围选择时有效', async () => {
+    const value = ref(60)
+    const wrapper = mount(() => <Slider v-model={value.value} showInput={true} min={0} max={100} />)
+
+    const input = wrapper.find('.tiny-slider__input input')
+    expect(input.exists()).toBe(true)
+    await input.setValue(110)
+    expect(value.value).toBe(100)
+  })
+
+  test('show-percent 是否显示百分比，仅在show-input为true时有效', async () => {
+    const value = ref(60)
+    const wrapper = mount(() => <Slider v-model={value.value} showInput={true} showPercent={true} min={0} max={100} />)
+
+    expect(wrapper.find('.tiny-slider__input span').text()).toBe('%')
+  })
 
   test.todo('format-tooltip 格式化 tooltip message')
 

packages/vue/src/slider/src/pc.vue

@@ -81,7 +81,7 @@
             @blur="handleSlotInputBlur"
             @input="handleSlotInput"
             :disabled="state.disabled"
-          /><span>%</span>
+          /><span>{{ unit }}</span>
         </slot>
       </div>
     </template>
@@ -107,6 +107,7 @@ export default defineComponent({
     'numPages',
     'showTip',
     'showInput',
+    'unit',
     'height',
     'range',
     'formatTooltip'