fix(slider): fix format problems

fix(slider): fix outwrap

devui/slider/__tests__/slider.spec.ts

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { nextTick,ref } from 'vue'
-import DSlider from '../src/slider'
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
+import DSlider from '../src/slider';
 
 describe('d-slider', () => {
  it('slider maxValue && minValue work', () => {
@@ -9,48 +9,48 @@ describe('d-slider', () => {
  max: 50,
  min: 2,
  },
- })
- const max = wrapper.find('.devui-max_count')
- const min = wrapper.find('.devui-min_count')
- expect(min.text()).toBe('2')
- expect(max.text()).toBe('50')
- })
+ });
+ const max = wrapper.find('.devui-max_count');
+ const min = wrapper.find('.devui-min_count');
+ expect(min.text()).toBe('2');
+ expect(max.text()).toBe('50');
+ });
  it('slider v-model work', async () => {
- const value=ref(5);
+ const value = ref(5);
  const wrapper = mount({
  components: { DSlider },
  template: `
  <d-slider v-model:modelValue="modelValue" showInput />
  `,
  setup() {
  return {
- modelValue:value,
- }
+ modelValue: value,
+ };
  },
- })
- const input = wrapper.find('input')
- expect(input.element.value).toBe('5')
- input.setValue(10)
- await nextTick()
- expect(value.value).toBe(10)
- })
+ });
+ const input = wrapper.find('input');
+ expect(input.element.value).toBe('5');
+ input.setValue(10);
+ await nextTick();
+ expect(value.value).toBe(10);
+ });
  it('slider showInput work', () => {
  const wrapper = mount(DSlider, {
  props: {
  showInput: true,
  },
- })
- const dInput = wrapper.find('.devui-input__outWrap')
- expect(dInput.exists()).toBeTruthy()
- })
+ });
+ const dInput = wrapper.find('.devui-input__out-wrap');
+ expect(dInput.exists()).toBeTruthy();
+ });
 
  it('slider disabled work', () => {
  const wrapper = mount(DSlider, {
  props: {
  disabled: true,
  },
- })
- const slider = wrapper.find('.devui-slider__runway')
- expect(slider.classes()).toContain('disabled')
- })
-})
+ });
+ const slider = wrapper.find('.devui-slider__runway');
+ expect(slider.classes()).toContain('disabled');
+ });
+});

devui/slider/src/slider.scss

@@ -89,7 +89,8 @@
  color: $devui-text;
  }
 
- .devui-input__outWrap {
+ .devui-input__out-wrap {
+ font-size: $devui-font-size;
  position: absolute;
  right: -60px;
  top: -12px;

devui/slider/src/slider.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, onMounted } from 'vue';
 import { sliderProps } from './slider-types';
-import  { Input }  from '../../input';
+import { Input } from '../../input';
 import './slider.scss';
 
 export default defineComponent({
@@ -22,7 +22,13 @@ export default defineComponent({
  //当前的位置以百分比显示
  const percentDispaly = ref<string>('');
  const renderShowInput = () => {
- return props.showInput ? <div class='devui-input__outWrap'><input onInput={handleOnInput} value={inputValue.value + ''}></input></div> : '';
+ return props.showInput ? (
+ <div class='devui-input__out-wrap'>
+ <input onInput={handleOnInput} value={inputValue.value + ''}></input>
+ </div>
+ ) : (
+ ''
+ );
  };
 
  //当传入modelValue时用以定位button的位置
@@ -128,7 +134,7 @@ export default defineComponent({
  }
  //输入框内的值
  function handleOnInput(event) {
- inputValue.value=parseInt(event.target.value);
+ inputValue.value = parseInt(event.target.value);
  if (!inputValue.value) {
  inputValue.value = props.min;
  percentDispaly.value = '0%';