Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
727c83d9 1 parent 07bfed81

只读样式显示优化

Inline Side-by-side
Showing 5 changed files with 16 additions and 8 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: 2024-08-12 17:04:47 4 + * @LastEditTime: 2024-08-12 18:00:11
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 <template #input> 20 <template #input>
21 <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction" 21 <van-checkbox-group v-model="checkbox_value" :direction="item.component_props.direction"
22 :max="item.component_props.max" style="width: 100%"> 22 :max="item.component_props.max" style="width: 100%">
23 - <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper"> 23 + <div v-for="x in item.component_props.options" :key="x.title" class="checkbox-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
24 <div v-if="item.component_props.readonly"> 24 <div v-if="item.component_props.readonly">
25 <div v-if="checkbox_value.includes(x.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">{{ x.title }}</span></div> 25 <div v-if="checkbox_value.includes(x.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">{{ x.title }}</span></div>
26 <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">{{ x.title }}</span></div> 26 <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">{{ x.title }}</span></div>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 11:45:30 2 * @Date: 2022-08-31 11:45:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-08 18:39:36 4 + * @LastEditTime: 2024-08-12 17:54:17
5 * @FilePath: /data-table/src/components/DatePickerField/index.vue 5 * @FilePath: /data-table/src/components/DatePickerField/index.vue
6 * @Description: 日期选择组件 6 * @Description: 日期选择组件
7 --> 7 -->
...@@ -12,7 +12,11 @@ ...@@ -12,7 +12,11 @@
12 <span v-if="item.component_props.required" style="color: red">&nbsp;*</span> 12 <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
13 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> 13 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
14 </div> 14 </div>
15 + <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem 1rem 0.3rem; font-size: 0.9rem;">
16 + {{ item.value }}
17 + </div>
15 <van-field 18 <van-field
19 + v-else
16 v-model="item.value" 20 v-model="item.value"
17 is-link 21 is-link
18 readonly 22 readonly
......
1 <!-- 1 <!--
2 * @Date: 2023-03-29 14:55:46 2 * @Date: 2023-03-29 14:55:46
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-27 19:46:08 4 + * @LastEditTime: 2024-08-12 17:52:26
5 * @FilePath: /data-table/src/components/PickerField/MyComponent.vue 5 * @FilePath: /data-table/src/components/PickerField/MyComponent.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div style="width: 100%;"> 9 <div style="width: 100%;">
10 + <div v-if="props.component_props.readonly" style="padding: 0.5rem 1rem 1rem 0.3rem; font-size: 0.9rem;">
11 + {{ picker_value }}
12 + </div>
10 <van-field 13 <van-field
14 + v-else
11 v-model="picker_value" 15 v-model="picker_value"
12 is-link 16 is-link
13 readonly 17 readonly
......
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-08-12 17:02:13 4 + * @LastEditTime: 2024-08-12 17:57:23
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 <template #input> 17 <template #input>
18 <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction" 18 <van-radio-group @change="onChange(item)" v-model="radio_value" :direction="item.component_props.direction"
19 style="width: 100%"> 19 style="width: 100%">
20 - <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper"> 20 + <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper" :style="{ border: item.component_props.readonly ? 0 : ''}">
21 <div v-if="item.component_props.readonly"> 21 <div v-if="item.component_props.readonly">
22 <div v-if="default_value === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__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-radio__label">{{ x.title }}</span></div> 22 <div v-if="default_value === x.value" role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="true" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round van-radio__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-radio__label">{{ x.title }}</span></div>
23 <div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"><!----><!----><!----></i></div><span class="van-radio__label">{{ x.title }}</span></div> 23 <div v-else role="radio" class="van-radio van-radio--vertical" tabindex="0" aria-checked="false" data-v-04873bb2="" style="margin-bottom: 0.25rem;"><div class="van-radio__icon van-radio__icon--round" style="font-size: 1rem;"><i class="van-badge__wrapper van-icon van-icon-success"><!----><!----><!----></i></div><span class="van-radio__label">{{ x.title }}</span></div>
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-12 17:23:34 4 + * @LastEditTime: 2024-08-12 17:53:35
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 * @Description: 单行文本输入框(微信扫描功能) 6 * @Description: 单行文本输入框(微信扫描功能)
7 --> 7 -->
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> 13 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
14 </div> 14 </div>
15 <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" /> 15 <div class="note-wrapper" v-if="item.component_props.note" v-html="item.component_props.note" />
16 - <div v-if="item.component_props.readonly || (item.component_props.is_camera_scan && !item.component_props.is_edit_camera_scan_result)" style="padding: 0.5rem 1rem; font-size: 0.9rem;"> 16 + <div v-if="item.component_props.readonly || (item.component_props.is_camera_scan && !item.component_props.is_edit_camera_scan_result)" style="padding: 0.5rem 1.3rem; font-size: 0.9rem;">
17 {{ item.value }} 17 {{ item.value }}
18 </div> 18 </div>
19 <van-field v-else v-model="item.value" :name="item.name" :type="item.type" 19 <van-field v-else v-model="item.value" :name="item.name" :type="item.type"
......