Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8f98129c 1 parent dfe0643b

feat(单选框): 添加点击事件以清空当前选中项 

在RadioField和GenderField组件中，添加了handleClick方法，当点击已选中的单选框时，清空当前选中项并触发onChange事件。这提升了用户体验，允许用户取消选择已选中的选项。
Inline Side-by-side
Showing 2 changed files with 25 additions and 3 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-03 15:27:53 4 + * @LastEditTime: 2025-03-27 14:11:08
5 * @FilePath: /data-table/src/components/GenderField/index.vue 5 * @FilePath: /data-table/src/components/GenderField/index.vue
6 * @Description: 性别选择控件 6 * @Description: 性别选择控件
7 --> 7 -->
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" 30 <van-radio v-else :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
31 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> --> 31 style="margin-bottom: 0.25rem">{{ x.title }}</van-radio> -->
32 <van-config-provider :theme-vars="{ radioLabelColor: x.color }"> 32 <van-config-provider :theme-vars="{ radioLabelColor: x.color }">
33 - <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" style="margin-bottom: 0rem"> 33 + <van-radio @click="handleClick(item)" :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor" style="margin-bottom: 0rem">
34 <template #default> 34 <template #default>
35 <div :style="{ backgroundColor: x.background_color || '', padding: '0.15rem 0.5rem', borderRadius: '0.25rem' }">{{ x.title }}</div> 35 <div :style="{ backgroundColor: x.background_color || '', padding: '0.15rem 0.5rem', borderRadius: '0.25rem' }">{{ x.title }}</div>
36 </template> 36 </template>
...@@ -108,6 +108,16 @@ const onChange = (item) => { ...@@ -108,6 +108,16 @@ const onChange = (item) => {
108 Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }), { expires: 1 }); 108 Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }), { expires: 1 });
109 } 109 }
110 } 110 }
111 +
112 +// 单选框点击事件, 清空当前选中项
113 +const handleClick = (item) => {
114 + // 如果当前选中项和点击的项相同，清空选中项
115 + if (item.value.value === gender_value.value) {
116 + gender_value.value = '';
117 + // 发送自定义数据结构
118 + onChange(item);
119 + }
120 +}
111 </script> 121 </script>
112 122
113 <style lang="less" scoped> 123 <style lang="less" scoped>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-03 15:27:58 4 + * @LastEditTime: 2025-03-27 14:17:04
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
29 :name="x.value" 29 :name="x.value"
30 icon-size="1rem" 30 icon-size="1rem"
31 :checked-color="themeVars.radioColor" 31 :checked-color="themeVars.radioColor"
32 + @click="handleClick(item)"
32 > 33 >
33 <template #default> 34 <template #default>
34 <div :style="{ backgroundColor: x.background_color || '', padding: '0.15rem 0.5rem', borderRadius: '0.25rem' }">{{ x.title }}</div> 35 <div :style="{ backgroundColor: x.background_color || '', padding: '0.15rem 0.5rem', borderRadius: '0.25rem' }">{{ x.title }}</div>
...@@ -202,6 +203,17 @@ const showUrl = (rule) => { ...@@ -202,6 +203,17 @@ const showUrl = (rule) => {
202 location.href = rule.desc_url 203 location.href = rule.desc_url
203 } 204 }
204 const rule_content = ref(""); 205 const rule_content = ref("");
206 +
207 +// 单选框点击事件, 清空当前选中项
208 +const handleClick = (item) => {
209 + // 如果当前选中项和点击的项相同，清空选中项
210 + if (item.value.value === radio_value.value) {
211 + radio_value.value = ''; // 清空选中项
212 + affix_value.value = ''; // 清空补充信息
213 + // 发送自定义数据结构
214 + onChange(item);
215 + }
216 +}
205 </script> 217 </script>
206 218
207 <style lang="less" scoped> 219 <style lang="less" scoped>
......