element-plus icon indicating copy to clipboard operation
element-plus copied to clipboard

fix(components): [slider] model-value @change Keyboard Events not work

Open FrontEndDog opened this issue 1 year ago • 4 comments

Please make sure these boxes are checked before submitting your PR, thank you!

  • [x] Make sure you follow contributing guide English | (中文 | Español | Français).
  • [x] Make sure you are merging your commits to dev branch.
  • [x] Add some descriptions and refer to relative issues for your PR.

Description

test example

🤖[deprecated] Generated by Copilot at 7df68ab

This pull request improves the slider component by simplifying and optimizing the slider button logic, removing unnecessary properties, and fixing the slider value synchronization. It mainly affects the use-slider-button.ts, button.ts, button.vue, and use-slide.ts files.

Related Issue

Fixes #14998 .

Explanation of Changes

🤖[deprecated] Generated by Copilot at 7df68ab

  • Remove oldValue property from SliderButtonInitData interface and button.vue component, as it is no longer needed to store the initial value of the slider button (link, link, link)
  • Modify emitChange function in useSlide composable to emit change event with initData.firstValue instead of props.modelValue when slider is not in range mode, and sync initData values with props.modelValue after emitting the event, to ensure slider value consistency between parent and child components (link)
  • Remove setTimeout wrapper from onDragEnd method in useSliderButton composable, as it is no longer needed to avoid race condition with update:modelValue event, and simplify setPosition method by removing async keyword and await nextTick statement (link, link)
  • Change currentPosition computed property in useSliderButton composable to return a number instead of a string with a percentage sign, and append the percentage sign to the bottom or left style property in wrapperStyle computed property, to simplify calculations and avoid parsing (link)
  • Use currentPosition property instead of parsing it as a number in onIncrease, onDecrease, and onButtonDown methods in useSliderButton composable, to leverage the previous change and reduce code duplication (link, link)
  • Remove unused import of nextTick from vue package in use-slider-button.ts file (link)

FrontEndDog avatar Dec 10 '23 06:12 FrontEndDog

👋 @FrontEndDog, thank you for contributing element-plus.

  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

github-actions[bot] avatar Dec 10 '23 06:12 github-actions[bot]

Hello @FrontEndDog, thank you for contributing to element-plus, please see our guideline to see how to make contribution

github-actions[bot] avatar Dec 10 '23 06:12 github-actions[bot]

🧪 Playground Preview: https://element-plus.run/?pr=15090 Please comment the example via this playground if needed.

github-actions[bot] avatar Dec 10 '23 10:12 github-actions[bot]