优化只读项目的样式显示

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:14:16
+ * @LastEditTime: 2024-08-12 17:40:00
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
 -->
@@ -28,7 +28,11 @@
       :border="false"
     >
     </van-field> -->
+    <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem; font-size: 0.9rem;">
+      {{ item.value }}
+    </div>
     <van-field
+      v-else
       ref="fieldRef"
       v-model="item.value"
       :id="item.name"

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:13:13
+ * @LastEditTime: 2024-08-12 17:39:43
  * @FilePath: /data-table/src/components/NameField/index.vue
  * @Description: 姓名输入框
 -->
@@ -12,7 +12,11 @@
       <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
       <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
     </div>
+    <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem; font-size: 0.9rem;">
+      {{ item.value }}
+    </div>
     <van-field
+      v-else
       v-model="item.value"
       :name="item.name"
       :type="item.type"

 <!--
  * @Date: 2022-09-02 10:46:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:14:46
+ * @LastEditTime: 2024-08-12 17:39:00
  * @FilePath: /data-table/src/components/PhoneField/index.vue
  * @Description: 手机输入框
 -->
@@ -26,7 +26,11 @@
       @touchstart.stop="openKeyboard($event)"
       :border="false"
     > -->
+    <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem; font-size: 0.9rem;">
+      {{ item.value }}
+    </div>
     <van-field
+      v-else
       :id="item.name"
       v-model="item.value"
       :name="item.name"

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:15:23
+ * @LastEditTime: 2024-08-12 17:37:58
  * @FilePath: /data-table/src/components/TextareaField/index.vue
  * @Description: 多行文本输入框
 -->
@@ -17,7 +17,11 @@
       v-html="item.component_props.note"
       style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
     />
+    <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem; font-size: 0.9rem;">
+      {{ item.value }}
+    </div>
     <van-field
+      v-else
       v-model="item.value"
       :name="item.name"
       :type="item.type"