hookehuyr

fix 修复多选规则组件只读状态显示问题

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: 2024-06-13 15:31:34 4 + * @LastEditTime: 2024-06-17 13:29:52
5 * @FilePath: /data-table/src/components/MultiRuleField/index.vue 5 * @FilePath: /data-table/src/components/MultiRuleField/index.vue
6 * @Description: 多选规则确认控件 6 * @Description: 多选规则确认控件
7 --> 7 -->
...@@ -17,7 +17,12 @@ ...@@ -17,7 +17,12 @@
17 <van-checkbox-group v-model="item.value" style="width: 100%"> 17 <van-checkbox-group v-model="item.value" style="width: 100%">
18 <template v-for="(rule, idx) in item.component_props.options" :key="idx"> 18 <template v-for="(rule, idx) in item.component_props.options" :key="idx">
19 <div class="multi-rule-field-box"> 19 <div class="multi-rule-field-box">
20 + <div v-if="item.component_props.readonly">
21 + <div v-if="checkbox_value.includes(rule.value)" role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="true" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style="border-color: rgb(194, 145, 95); background-color: rgb(194, 145, 95);"></i></div><span class="van-checkbox__label">{{ rule.title }}</span></div>
22 + <div v-else role="checkbox" class="van-checkbox van-checkbox--vertical" tabindex="0" aria-checked="false" data-v-3722f8ba="" style="margin-bottom: 0.25rem;"><div class="van-checkbox__icon van-checkbox__icon--square" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success" style=""></i></div><span class="van-checkbox__label">{{ rule.title }}</span></div>
23 + </div>
20 <van-checkbox 24 <van-checkbox
25 + v-else
21 :name="rule.value" 26 :name="rule.value"
22 shape="square" 27 shape="square"
23 :checked-color="themeVars.radioColor" 28 :checked-color="themeVars.radioColor"
...@@ -67,6 +72,7 @@ const HideShow = computed(() => { ...@@ -67,6 +72,7 @@ const HideShow = computed(() => {
67 const themeVars = { 72 const themeVars = {
68 radioColor: styleColor.baseColor, 73 radioColor: styleColor.baseColor,
69 }; 74 };
75 +const checkbox_value = ref(props.item.component_props.default);
70 onMounted(() => { 76 onMounted(() => {
71 $(".rule-box").css("color", themeVars.radioColor); 77 $(".rule-box").css("color", themeVars.radioColor);
72 // 默认值 78 // 默认值
......