Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

解决DateTimePicker 的 clear 属性设置为 false 时,不能隐藏弹出层中的 clear 按钮问题https://github.com/ElemeFE/element/pull/22990 #22991

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from

Conversation

mole422
Copy link

@mole422 mole422 commented Nov 12, 2024

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

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

fix: DateTimePicker
fix: DateTimePicker
@mole422 mole422 changed the title 解决DateTimePicker 的 clear 属性设置为 false 时,不能隐藏弹出层中的 clear 按钮问题 解决DateTimePicker 的 clear 属性设置为 false 时,不能隐藏弹出层中的 clear 按钮问题https://github.com/ElemeFE/element/pull/22990 Nov 12, 2024
@cocogg28
Copy link

What is the principle behind your solution?

@mole422
Copy link
Author

mole422 commented Nov 12, 2024

  1. Introducing the v-if="clearable" directive in the component's template to ensure that the rendering of the clear button is contingent upon the truthiness of the clearable attribute.
  2. Binding the picker.clearable property of the component instance to the passed clearable attribute to synchronize the internal state with the external property.
  3. Utilizing Vue.js's $watch function to monitor changes to the clearable attribute, updating the picker object's clearable property in response to changes, thus ensuring the component remains responsive to external attribute modifications.

@cocogg28
Copy link

How this design ensures the responsiveness and state consistency of components

@mole422
Copy link
Author

mole422 commented Nov 12, 2024

This design ensures component responsiveness and state consistency by using Vue.js's reactive features such as conditional rendering with v-if="clearable", property binding to synchronize internal state with external attributes, and $watch to monitor and react to changes in the clearable attribute, thereby keeping the UI and component state in sync.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants