Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cf4f0c12 1 parent ab9e42f1

调整现有组件的只读和禁止显示属性

Inline Side-by-side
Showing 13 changed files with 105 additions and 32 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: 2022-12-22 11:35:38 4 + * @LastEditTime: 2022-12-29 11:34:14
5 * @FilePath: /data-table/src/components/CheckboxField/index.vue 5 * @FilePath: /data-table/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="checkbox-field-page"> 9 + <div v-if="HideShow" class="checkbox-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label }} 11 {{ item.component_props.label }}
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>
...@@ -55,6 +55,10 @@ onMounted(() => { ...@@ -55,6 +55,10 @@ onMounted(() => {
55 // 默认值为数组 55 // 默认值为数组
56 props.item.value = []; 56 props.item.value = [];
57 }); 57 });
58 +// 隐藏显示
59 +const HideShow = computed(() => {
60 + return !props.item.component_props.disabled
61 +})
58 </script> 62 </script>
59 63
60 <style lang="less" scoped> 64 <style lang="less" scoped>
......
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: 2022-12-22 18:52:22 4 + * @LastEditTime: 2022-12-29 11:45:54
5 * @FilePath: /data-table/src/components/DatePickerField/index.vue 5 * @FilePath: /data-table/src/components/DatePickerField/index.vue
6 * @Description: 日期选择组件 6 * @Description: 日期选择组件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="date-picker-field"> 9 + <div v-if="HideShow" class="date-picker-field">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label }} 11 {{ item.component_props.label }}
12 <span v-if="item.component_props.required">&nbsp;*</span> 12 <span v-if="item.component_props.required">&nbsp;*</span>
...@@ -17,9 +17,10 @@ ...@@ -17,9 +17,10 @@
17 readonly 17 readonly
18 :name="item.key" 18 :name="item.key"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 + disabled="item.component_props.readonly"
20 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期'" 21 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期'"
21 :rules="rules" 22 :rules="rules"
22 - @click="showPicker = true" 23 + @click="onTap"
23 :border="false" 24 :border="false"
24 /> 25 />
25 <van-popup v-model:show="showPicker" position="bottom"> 26 <van-popup v-model:show="showPicker" position="bottom">
...@@ -40,10 +41,18 @@ import dayjs from "dayjs"; ...@@ -40,10 +41,18 @@ import dayjs from "dayjs";
40 const props = defineProps({ 41 const props = defineProps({
41 item: Object, 42 item: Object,
42 }); 43 });
43 - 44 +// 隐藏显示
45 +const HideShow = computed(() => {
46 + return !props.item.component_props.disabled
47 +})
44 const showPicker = ref(false); 48 const showPicker = ref(false);
45 const currentDate = ref([]); 49 const currentDate = ref([]);
50 +const readonly = props.item.component_props.readonly;
46 51
52 +const onTap = () => {
53 + if (readonly) return false; // 如果为只读，不能设置
54 + showPicker.value = true
55 +}
47 const onConfirm = ({ selectedValues, selectedOptions }) => { 56 const onConfirm = ({ selectedValues, selectedOptions }) => {
48 props.item.value = selectedValues.join("-"); 57 props.item.value = selectedValues.join("-");
49 showPicker.value = false; 58 showPicker.value = false;
......
1 <!-- 1 <!--
2 * @Date: 2022-09-08 15:02:45 2 * @Date: 2022-09-08 15:02:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-22 18:52:28 4 + * @LastEditTime: 2022-12-29 11:44:54
5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue 5 * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
6 * @Description: 日期时间选择器 6 * @Description: 日期时间选择器
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="datetime-picker"> 9 + <div v-if="HideShow" class="datetime-picker">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label }} 11 {{ item.component_props.label }}
12 <span v-if="item.component_props.required">&nbsp;*</span> 12 <span v-if="item.component_props.required">&nbsp;*</span>
...@@ -17,9 +17,10 @@ ...@@ -17,9 +17,10 @@
17 readonly 17 readonly
18 :name="item.key" 18 :name="item.key"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 + disabled="item.component_props.readonly"
20 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'" 21 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'"
21 :rules="rules" 22 :rules="rules"
22 - @click="showPicker = true" 23 + @click="onTap"
23 :border="false" 24 :border="false"
24 /> 25 />
25 <van-popup v-model:show="showPicker" position="bottom"> 26 <van-popup v-model:show="showPicker" position="bottom">
...@@ -43,8 +44,17 @@ import dayjs from "dayjs"; ...@@ -43,8 +44,17 @@ import dayjs from "dayjs";
43 const props = defineProps({ 44 const props = defineProps({
44 item: Object, 45 item: Object,
45 }); 46 });
47 +// 隐藏显示
48 +const HideShow = computed(() => {
49 + return !props.item.component_props.disabled
50 +})
46 const showPicker = ref(false); 51 const showPicker = ref(false);
52 +const readonly = props.item.component_props.readonly;
47 53
54 +const onTap = () => {
55 + if (readonly) return false; // 如果为只读，不能设置
56 + showPicker.value = true
57 +}
48 const currentDate = ref([]); 58 const currentDate = ref([]);
49 const currentTime = ref([]); 59 const currentTime = ref([]);
50 60
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 * @Description: 邮箱输入框 6 * @Description: 邮箱输入框
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="text-field-page"> 9 + <div v-if="HideShow" class="text-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 :placeholder="item.component_props.placeholder" 18 :placeholder="item.component_props.placeholder"
19 :rules="rules" 19 :rules="rules"
20 :required="item.component_props.required" 20 :required="item.component_props.required"
21 + disabled="item.component_props.readonly"
21 clearable 22 clearable
22 /> 23 />
23 </div> 24 </div>
...@@ -27,7 +28,10 @@ ...@@ -27,7 +28,10 @@
27 const props = defineProps({ 28 const props = defineProps({
28 item: Object, 29 item: Object,
29 }); 30 });
30 - 31 +// 隐藏显示
32 +const HideShow = computed(() => {
33 + return !props.item.component_props.disabled
34 +})
31 const required = props.item.component_props.required; 35 const required = props.item.component_props.required;
32 const validator = (val) => { 36 const validator = (val) => {
33 if (required && !val) { 37 if (required && !val) {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-14 14:44:30 2 * @Date: 2022-09-14 14:44:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-29 10:39:31 4 + * @LastEditTime: 2022-12-29 11:32:10
5 * @FilePath: /data-table/src/components/IdentityField/index.vue 5 * @FilePath: /data-table/src/components/IdentityField/index.vue
6 * @Description: 身份证输入控件 6 * @Description: 身份证输入控件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="identity-page"> 9 + <div v-if="HideShow" class="identity-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 :placeholder="item.component_props.placeholder" 19 :placeholder="item.component_props.placeholder"
20 :rules="rules" 20 :rules="rules"
21 :required="item.component_props.required" 21 :required="item.component_props.required"
22 + :disabled="item.component_props.readonly"
22 readonly 23 readonly
23 @touchstart.stop="openKeyboard($event)" 24 @touchstart.stop="openKeyboard($event)"
24 :border="false" 25 :border="false"
...@@ -44,7 +45,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage"; ...@@ -44,7 +45,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage";
44 const props = defineProps({ 45 const props = defineProps({
45 item: Object, 46 item: Object,
46 }); 47 });
47 - 48 +// 隐藏显示
49 +const HideShow = computed(() => {
50 + return !props.item.component_props.disabled
51 +})
48 const show = ref(false); 52 const show = ref(false);
49 let content = ""; 53 let content = "";
50 54
......
1 <!-- 1 <!--
2 * @Date: 2022-09-14 14:44:30 2 * @Date: 2022-09-14 14:44:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-22 13:15:32 4 + * @LastEditTime: 2022-12-29 11:29:46
5 * @FilePath: /data-table/src/components/NumberField/index.vue 5 * @FilePath: /data-table/src/components/NumberField/index.vue
6 * @Description: 数字输入框 6 * @Description: 数字输入框
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="number-page"> 9 + <div v-if="HideShow" class="number-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label }} 11 {{ item.component_props.label }}
12 <span v-if="item.component_props.required">&nbsp;*</span> 12 <span v-if="item.component_props.required">&nbsp;*</span>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 :placeholder="item.component_props.placeholder" 18 :placeholder="item.component_props.placeholder"
19 :rules="rules" 19 :rules="rules"
20 :required="item.component_props.required" 20 :required="item.component_props.required"
21 + disabled="item.component_props.readonly"
21 readonly 22 readonly
22 @touchstart.stop="showKeyboard($event)" 23 @touchstart.stop="showKeyboard($event)"
23 :border="false" 24 :border="false"
...@@ -52,6 +53,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage"; ...@@ -52,6 +53,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage";
52 const props = defineProps({ 53 const props = defineProps({
53 item: Object, 54 item: Object,
54 }); 55 });
56 +// 隐藏显示
57 +const HideShow = computed(() => {
58 + return !props.item.component_props.disabled
59 +})
55 let content = ""; 60 let content = "";
56 61
57 const store = mainStore(); 62 const store = mainStore();
...@@ -76,8 +81,9 @@ watch( ...@@ -76,8 +81,9 @@ watch(
76 } 81 }
77 } 82 }
78 ); 83 );
79 - 84 +const readonly = props.item.component_props.readonly;
80 const showKeyboard = (e) => { 85 const showKeyboard = (e) => {
86 + if (readonly) return false; // 如果为只读，不能设置
81 // 键盘上移动 87 // 键盘上移动
82 const target_to_view_height = 88 const target_to_view_height =
83 window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度 89 window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度
......
1 <!-- 1 <!--
2 * @Date: 2022-09-02 10:46:03 2 * @Date: 2022-09-02 10:46:03
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-12-22 11:27:11 4 + * @LastEditTime: 2022-12-29 11:39:40
5 * @FilePath: /data-table/src/components/PhoneField/index.vue 5 * @FilePath: /data-table/src/components/PhoneField/index.vue
6 * @Description: 手机输入框 6 * @Description: 手机输入框
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="phone-field-page"> 9 + <div v-if="HideShow" class="phone-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label }} 11 {{ item.component_props.label }}
12 <span v-if="item.component_props.required">&nbsp;*</span> 12 <span v-if="item.component_props.required">&nbsp;*</span>
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
20 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入手机号码'" 20 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入手机号码'"
21 :rules="rules" 21 :rules="rules"
22 :required="item.component_props.required" 22 :required="item.component_props.required"
23 + disabled="item.component_props.readonly"
23 :readonly="readonly" 24 :readonly="readonly"
24 @touchstart.stop="openKeyboard($event)" 25 @touchstart.stop="openKeyboard($event)"
25 :border="false" 26 :border="false"
...@@ -57,7 +58,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage"; ...@@ -57,7 +58,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage";
57 const props = defineProps({ 58 const props = defineProps({
58 item: Object, 59 item: Object,
59 }); 60 });
60 - 61 +// 隐藏显示
62 +const HideShow = computed(() => {
63 + return !props.item.component_props.disabled
64 +})
61 // web端判断 65 // web端判断
62 const readonly = computed(() => wxInfo().isMobile); 66 const readonly = computed(() => wxInfo().isMobile);
63 // 打开短信验证模式 67 // 打开短信验证模式
...@@ -104,6 +108,7 @@ watch( ...@@ -104,6 +108,7 @@ watch(
104 ); 108 );
105 109
106 const openKeyboard = (e) => { 110 const openKeyboard = (e) => {
111 + if (props.item.component_props.readonly) return false; // 如果为只读，不能设置
107 // 键盘上移动 112 // 键盘上移动
108 const target_to_view_height = 113 const target_to_view_height =
109 window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度 114 window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 * @Description: 单列选择器组件 6 * @Description: 单列选择器组件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="picker-field-page"> 9 + <div v-if="HideShow" class="picker-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -53,6 +53,10 @@ const onConfirm = ({ selectedOptions }) => { ...@@ -53,6 +53,10 @@ const onConfirm = ({ selectedOptions }) => {
53 props.item.value = selectedOptions[0]?.value; 53 props.item.value = selectedOptions[0]?.value;
54 showPicker.value = false; 54 showPicker.value = false;
55 }; 55 };
56 +// 隐藏显示
57 +const HideShow = computed(() => {
58 + return !props.item.component_props.disabled
59 +})
56 </script> 60 </script>
57 61
58 <style lang="less" scoped> 62 <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: 2022-12-22 11:31:31 4 + * @LastEditTime: 2022-12-29 11:14:20
5 * @FilePath: /data-table/src/components/RadioField/index.vue 5 * @FilePath: /data-table/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="radio-field-page"> 9 + <div v-if="HideShow" class="radio-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -47,6 +47,10 @@ const props = defineProps({ ...@@ -47,6 +47,10 @@ const props = defineProps({
47 const themeVars = { 47 const themeVars = {
48 radioColor: styleColor.baseColor, 48 radioColor: styleColor.baseColor,
49 }; 49 };
50 +// 隐藏显示
51 +const HideShow = computed(() => {
52 + return !props.item.component_props.disabled
53 +})
50 </script> 54 </script>
51 55
52 <style lang="less" scoped> 56 <style lang="less" scoped>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 * @Description: 评分选择控件 6 * @Description: 评分选择控件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="rate-field"> 9 + <div v-if="HideShow" class="rate-field">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -36,6 +36,10 @@ import { styleColor } from "@/constant.js"; ...@@ -36,6 +36,10 @@ import { styleColor } from "@/constant.js";
36 const props = defineProps({ 36 const props = defineProps({
37 item: Object, 37 item: Object,
38 }); 38 });
39 +// 隐藏显示
40 +const HideShow = computed(() => {
41 + return !props.item.component_props.disabled
42 +})
39 const emit = defineEmits(["active"]); 43 const emit = defineEmits(["active"]);
40 const show_empty = ref(false); 44 const show_empty = ref(false);
41 const rate_value = ref(props.item.component_props.default); 45 const rate_value = ref(props.item.component_props.default);
......
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: 2022-12-09 15:33:56 4 + * @LastEditTime: 2022-12-29 11:13:58
5 * @FilePath: /data-table/src/components/TextField/index.vue 5 * @FilePath: /data-table/src/components/TextField/index.vue
6 * @Description: 单行文本输入框 6 * @Description: 单行文本输入框
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="text-field-page"> 9 + <div v-if="HideShow" class="text-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -29,6 +29,10 @@ ...@@ -29,6 +29,10 @@
29 const props = defineProps({ 29 const props = defineProps({
30 item: Object, 30 item: Object,
31 }); 31 });
32 +// 隐藏显示
33 +const HideShow = computed(() => {
34 + return !props.item.component_props.disabled
35 +})
32 </script> 36 </script>
33 37
34 <style lang="less" scoped> 38 <style lang="less" scoped>
......
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: 2022-12-21 12:15:58 4 + * @LastEditTime: 2022-12-29 11:25:54
5 * @FilePath: /data-table/src/components/TextareaField/index.vue 5 * @FilePath: /data-table/src/components/TextareaField/index.vue
6 * @Description: 多行文本输入框 6 * @Description: 多行文本输入框
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="textarea-field-page"> 9 + <div v-if="HideShow" class="textarea-field-page">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
18 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'" 18 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'"
19 :rules="item.rules" 19 :rules="item.rules"
20 :required="item.component_props.required" 20 :required="item.component_props.required"
21 + :readonly="item.component_props.readonly"
21 :rows="item.component_props.rows" 22 :rows="item.component_props.rows"
22 autosize 23 autosize
23 :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null" 24 :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null"
...@@ -30,6 +31,10 @@ ...@@ -30,6 +31,10 @@
30 const props = defineProps({ 31 const props = defineProps({
31 item: Object, 32 item: Object,
32 }); 33 });
34 +// 隐藏显示
35 +const HideShow = computed(() => {
36 + return !props.item.component_props.disabled
37 +})
33 </script> 38 </script>
34 39
35 <style lang="less" scoped> 40 <style lang="less" scoped>
......
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: 2022-12-22 18:43:52 4 + * @LastEditTime: 2022-12-29 11:46:19
5 * @FilePath: /data-table/src/components/TimePickerField/index.vue 5 * @FilePath: /data-table/src/components/TimePickerField/index.vue
6 * @Description: 时间选择组件 6 * @Description: 时间选择组件
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="time-picker-field"> 9 + <div v-if="HideShow" class="time-picker-field">
10 <div class="label"> 10 <div class="label">
11 {{ item.component_props.label 11 {{ item.component_props.label
12 }}<span v-if="item.component_props.required">&nbsp;*</span> 12 }}<span v-if="item.component_props.required">&nbsp;*</span>
...@@ -17,9 +17,10 @@ ...@@ -17,9 +17,10 @@
17 readonly 17 readonly
18 :name="item.key" 18 :name="item.key"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 + disabled="item.component_props.readonly"
20 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择时间'" 21 :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择时间'"
21 :rules="rules" 22 :rules="rules"
22 - @click="showPicker = true" 23 + @click="onTap"
23 :border="false" 24 :border="false"
24 /> 25 />
25 <van-popup v-model:show="showPicker" position="bottom"> 26 <van-popup v-model:show="showPicker" position="bottom">
...@@ -40,9 +41,18 @@ import dayjs from "dayjs"; ...@@ -40,9 +41,18 @@ import dayjs from "dayjs";
40 const props = defineProps({ 41 const props = defineProps({
41 item: Object, 42 item: Object,
42 }); 43 });
43 - 44 +// 隐藏显示
45 +const HideShow = computed(() => {
46 + return !props.item.component_props.disabled
47 +})
44 const showPicker = ref(false); 48 const showPicker = ref(false);
45 const currentTime = ref([]); 49 const currentTime = ref([]);
50 +const readonly = props.item.component_props.readonly;
51 +
52 +const onTap = () => {
53 + if (readonly) return false; // 如果为只读，不能设置
54 + showPicker.value = true
55 +}
46 56
47 const onConfirm = ({ selectedValues, selectedOptions }) => { 57 const onConfirm = ({ selectedValues, selectedOptions }) => {
48 props.item.value = selectedValues.join(":"); 58 props.item.value = selectedValues.join(":");
......