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

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 11:35:38
+ * @LastEditTime: 2022-12-29 11:34:14
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 多项选择控件
 -->
 <template>
-  <div class="checkbox-field-page">
+  <div v-if="HideShow" class="checkbox-field-page">
     <div class="label">
       {{ item.component_props.label }}
       <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
@@ -55,6 +55,10 @@ onMounted(() => {
   // 默认值为数组
   props.item.value = [];
 });
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-08-31 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 18:52:22
+ * @LastEditTime: 2022-12-29 11:45:54
  * @FilePath: /data-table/src/components/DatePickerField/index.vue
  * @Description: 日期选择组件
 -->
 <template>
-  <div class="date-picker-field">
+  <div v-if="HideShow" class="date-picker-field">
     <div class="label">
       {{ item.component_props.label }}
       <span v-if="item.component_props.required">&nbsp;*</span>
@@ -17,9 +17,10 @@
       readonly
       :name="item.key"
       :required="item.component_props.required"
+      disabled="item.component_props.readonly"
       :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期'"
       :rules="rules"
-      @click="showPicker = true"
+      @click="onTap"
       :border="false"
     />
     <van-popup v-model:show="showPicker" position="bottom">
@@ -40,10 +41,18 @@ import dayjs from "dayjs";
 const props = defineProps({
   item: Object,
 });
-
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 const showPicker = ref(false);
 const currentDate = ref([]);
+const readonly = props.item.component_props.readonly;
 
+const onTap = () => {
+  if (readonly) return false; // 如果为只读，不能设置
+  showPicker.value = true
+}
 const onConfirm = ({ selectedValues, selectedOptions }) => {
   props.item.value = selectedValues.join("-");
   showPicker.value = false;

 <!--
  * @Date: 2022-09-08 15:02:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 18:52:28
+ * @LastEditTime: 2022-12-29 11:44:54
  * @FilePath: /data-table/src/components/DateTimePickerField/index.vue
  * @Description: 日期时间选择器
 -->
 <template>
-  <div class="datetime-picker">
+  <div v-if="HideShow" class="datetime-picker">
     <div class="label">
       {{ item.component_props.label }}
       <span v-if="item.component_props.required">&nbsp;*</span>
@@ -17,9 +17,10 @@
       readonly
       :name="item.key"
       :required="item.component_props.required"
+      disabled="item.component_props.readonly"
       :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择日期时间'"
       :rules="rules"
-      @click="showPicker = true"
+      @click="onTap"
       :border="false"
     />
     <van-popup v-model:show="showPicker" position="bottom">
@@ -43,8 +44,17 @@ import dayjs from "dayjs";
 const props = defineProps({
   item: Object,
 });
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 const showPicker = ref(false);
+const readonly = props.item.component_props.readonly;
 
+const onTap = () => {
+  if (readonly) return false; // 如果为只读，不能设置
+  showPicker.value = true
+}
 const currentDate = ref([]);
 const currentTime = ref([]);
 

@@ -6,7 +6,7 @@
  * @Description: 邮箱输入框
 -->
 <template>
-  <div class="text-field-page">
+  <div v-if="HideShow" class="text-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -18,6 +18,7 @@
       :placeholder="item.component_props.placeholder"
       :rules="rules"
       :required="item.component_props.required"
+      disabled="item.component_props.readonly"
       clearable
     />
   </div>
@@ -27,7 +28,10 @@
 const props = defineProps({
   item: Object,
 });
-
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 const required = props.item.component_props.required;
 const validator = (val) => {
   if (required && !val) {

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-29 10:39:31
+ * @LastEditTime: 2022-12-29 11:32:10
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
 -->
 <template>
-  <div class="identity-page">
+  <div v-if="HideShow" class="identity-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -19,6 +19,7 @@
       :placeholder="item.component_props.placeholder"
       :rules="rules"
       :required="item.component_props.required"
+      :disabled="item.component_props.readonly"
       readonly
       @touchstart.stop="openKeyboard($event)"
       :border="false"
@@ -44,7 +45,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage";
 const props = defineProps({
   item: Object,
 });
-
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 const show = ref(false);
 let content = "";
 

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 13:15:32
+ * @LastEditTime: 2022-12-29 11:29:46
  * @FilePath: /data-table/src/components/NumberField/index.vue
  * @Description: 数字输入框
 -->
 <template>
-  <div class="number-page">
+  <div v-if="HideShow" class="number-page">
     <div class="label">
       {{ item.component_props.label }}
       <span v-if="item.component_props.required">&nbsp;*</span>
@@ -18,6 +18,7 @@
       :placeholder="item.component_props.placeholder"
       :rules="rules"
       :required="item.component_props.required"
+      disabled="item.component_props.readonly"
       readonly
       @touchstart.stop="showKeyboard($event)"
       :border="false"
@@ -52,6 +53,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage";
 const props = defineProps({
   item: Object,
 });
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 let content = "";
 
 const store = mainStore();
@@ -76,8 +81,9 @@ watch(
     }
   }
 );
-
+const readonly = props.item.component_props.readonly;
 const showKeyboard = (e) => {
+  if (readonly) return false; // 如果为只读，不能设置
   // 键盘上移动
   const target_to_view_height =
     window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度

 <!--
  * @Date: 2022-09-02 10:46:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 11:27:11
+ * @LastEditTime: 2022-12-29 11:39:40
  * @FilePath: /data-table/src/components/PhoneField/index.vue
  * @Description: 手机输入框
 -->
 <template>
-  <div class="phone-field-page">
+  <div v-if="HideShow" class="phone-field-page">
     <div class="label">
       {{ item.component_props.label }}
       <span v-if="item.component_props.required">&nbsp;*</span>
@@ -20,6 +20,7 @@
       :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入手机号码'"
       :rules="rules"
       :required="item.component_props.required"
+      disabled="item.component_props.readonly"
       :readonly="readonly"
       @touchstart.stop="openKeyboard($event)"
       :border="false"
@@ -57,7 +58,10 @@ import { storeToRefs, mainStore } from "@/utils/generatePackage";
 const props = defineProps({
   item: Object,
 });
-
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 // web端判断
 const readonly = computed(() => wxInfo().isMobile);
 // 打开短信验证模式
@@ -104,6 +108,7 @@ watch(
 );
 
 const openKeyboard = (e) => {
+  if (props.item.component_props.readonly) return false; // 如果为只读，不能设置
   // 键盘上移动
   const target_to_view_height =
     window.innerHeight - e.target.getBoundingClientRect().bottom; // 元素到适口高度

@@ -6,7 +6,7 @@
  * @Description: 单列选择器组件
 -->
 <template>
-  <div class="picker-field-page">
+  <div v-if="HideShow" class="picker-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -53,6 +53,10 @@ const onConfirm = ({ selectedOptions }) => {
   props.item.value = selectedOptions[0]?.value;
   showPicker.value = false;
 };
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 11:31:31
+ * @LastEditTime: 2022-12-29 11:14:20
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
 <template>
-  <div class="radio-field-page">
+  <div v-if="HideShow" class="radio-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -47,6 +47,10 @@ const props = defineProps({
 const themeVars = {
   radioColor: styleColor.baseColor,
 };
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 </script>
 
 <style lang="less" scoped>

@@ -6,7 +6,7 @@
  * @Description: 评分选择控件
 -->
 <template>
-  <div class="rate-field">
+  <div v-if="HideShow" class="rate-field">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -36,6 +36,10 @@ import { styleColor } from "@/constant.js";
 const props = defineProps({
   item: Object,
 });
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 const emit = defineEmits(["active"]);
 const show_empty = ref(false);
 const rate_value = ref(props.item.component_props.default);

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-09 15:33:56
+ * @LastEditTime: 2022-12-29 11:13:58
  * @FilePath: /data-table/src/components/TextField/index.vue
  * @Description: 单行文本输入框
 -->
 <template>
-  <div class="text-field-page">
+  <div v-if="HideShow" class="text-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -29,6 +29,10 @@
 const props = defineProps({
   item: Object,
 });
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-21 12:15:58
+ * @LastEditTime: 2022-12-29 11:25:54
  * @FilePath: /data-table/src/components/TextareaField/index.vue
  * @Description: 多行文本输入框
 -->
 <template>
-  <div class="textarea-field-page">
+  <div v-if="HideShow" class="textarea-field-page">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -18,6 +18,7 @@
       :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请输入'"
       :rules="item.rules"
       :required="item.component_props.required"
+      :readonly="item.component_props.readonly"
       :rows="item.component_props.rows"
       autosize
       :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null"
@@ -30,6 +31,10 @@
 const props = defineProps({
   item: Object,
 });
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-08-31 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-22 18:43:52
+ * @LastEditTime: 2022-12-29 11:46:19
  * @FilePath: /data-table/src/components/TimePickerField/index.vue
  * @Description: 时间选择组件
 -->
 <template>
-  <div class="time-picker-field">
+  <div v-if="HideShow" class="time-picker-field">
     <div class="label">
       {{ item.component_props.label
       }}<span v-if="item.component_props.required">&nbsp;*</span>
@@ -17,9 +17,10 @@
       readonly
       :name="item.key"
       :required="item.component_props.required"
+      disabled="item.component_props.readonly"
       :placeholder="item.component_props.placeholder ? item.component_props.placeholder : '请选择时间'"
       :rules="rules"
-      @click="showPicker = true"
+      @click="onTap"
       :border="false"
     />
     <van-popup v-model:show="showPicker" position="bottom">
@@ -40,9 +41,18 @@ import dayjs from "dayjs";
 const props = defineProps({
   item: Object,
 });
-
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled
+})
 const showPicker = ref(false);
 const currentTime = ref([]);
+const readonly = props.item.component_props.readonly;
+
+const onTap = () => {
+  if (readonly) return false; // 如果为只读，不能设置
+  showPicker.value = true
+}
 
 const onConfirm = ({ selectedValues, selectedOptions }) => {
   props.item.value = selectedValues.join(":");