element-plus
element-plus copied to clipboard
fix(components): [slider] model-value @change Keyboard Events not work
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
devbranch. - [x] Add some descriptions and refer to relative issues for your PR.
Description
🤖[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
oldValueproperty fromSliderButtonInitDatainterface andbutton.vuecomponent, as it is no longer needed to store the initial value of the slider button (link, link, link) - Modify
emitChangefunction inuseSlidecomposable to emitchangeevent withinitData.firstValueinstead ofprops.modelValuewhen slider is not in range mode, and syncinitDatavalues withprops.modelValueafter emitting the event, to ensure slider value consistency between parent and child components (link) - Remove
setTimeoutwrapper fromonDragEndmethod inuseSliderButtoncomposable, as it is no longer needed to avoid race condition withupdate:modelValueevent, and simplifysetPositionmethod by removingasynckeyword andawait nextTickstatement (link, link) - Change
currentPositioncomputed property inuseSliderButtoncomposable to return a number instead of a string with a percentage sign, and append the percentage sign to thebottomorleftstyle property inwrapperStylecomputed property, to simplify calculations and avoid parsing (link) - Use
currentPositionproperty instead of parsing it as a number inonIncrease,onDecrease, andonButtonDownmethods inuseSliderButtoncomposable, to leverage the previous change and reduce code duplication (link, link) - Remove unused import of
nextTickfromvuepackage inuse-slider-button.tsfile (link)
👋 @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
for staying tuned.
Hello @FrontEndDog, thank you for contributing to element-plus, please see our guideline to see how to make contribution
🧪 Playground Preview: https://element-plus.run/?pr=15090 Please comment the example via this playground if needed.
