mobile.jsx 1.0 KB

1234567891011121314151617181920212223242526272829
  1. import { Slider as VanSlider, Toast } from 'vant'
  2. import { useFormInput } from '../../../hooks/form-input'
  3. import { formInputProps, fromInputEmits } from '../../form-input-props'
  4. import './index.less'
  5. import { useSliderConfig } from './use-slider-config'
  6. export default {
  7. props: formInputProps,
  8. emits: [...fromInputEmits],
  9. setup (props, context) {
  10. const { proxyValue, securityConfig, width } = useFormInput(props, context)
  11. const { max, min, step } = useSliderConfig({ securityConfig })
  12. const handleChange = (value) => {
  13. Toast('当前值:' + value)
  14. }
  15. return () => <div class={'basic-slider--m__wrapper'}>
  16. <div class={'basic-slider--m'} style={{ width: width.value }}>
  17. <VanSlider
  18. style={{ width: '100%', top: '50%', transform: 'translateY(-50%)' }}
  19. v-model={proxyValue.value}
  20. max={max.value}
  21. min={min.value}
  22. step={step.value}
  23. disabled={props.disabled}
  24. onChange={handleChange}
  25. />
  26. </div>
  27. </div>
  28. }
  29. }