签名组件默认值和只读显示

 <!--
 <!--
  * @Date: 2023-03-29 17:44:24
  * @Date: 2023-03-29 17:44:24
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-29 19:06:27
+ * @LastEditTime: 2024-06-06 17:50:41
  * @FilePath: /data-table/src/components/SignField/MyComponent.vue
  * @FilePath: /data-table/src/components/SignField/MyComponent.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div style="width: 100%;">
   <div style="width: 100%;">
-    <div ref="wrapperRef" class="esign-wrapper">
+    <div v-if="!readonly" ref="wrapperRef" class="esign-wrapper">
       <vue-esign v-if="esignWidth" ref="esign" class="sign-wrapper" :width="esignWidth" :height="esignHeight" :isCrop="isCrop"
       <vue-esign v-if="esignWidth" ref="esign" class="sign-wrapper" :width="esignWidth" :height="esignHeight" :isCrop="isCrop"
         :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
         :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
       <div v-if="show_sign" class="whiteboard">
       <div v-if="show_sign" class="whiteboard">
@@ -16,6 +16,16 @@
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
+    <div v-else  class="esign-wrapper">
+      <div class="sign-wrapper">
+        <van-image
+          width="100%"
+          height="100%"
+          :src="default_value"
+          style="margin-right: 0.5rem; margin-block-end: 0.25rem;"
+        />
+      </div>
+    </div>
     <div v-if="!show_sign">
     <div v-if="!show_sign">
       <div v-if="show_control" class="control-sign">
       <div v-if="show_control" class="control-sign">
         <van-row gutter="20" style="padding: 0 1rem">
         <van-row gutter="20" style="padding: 0 1rem">
@@ -58,11 +68,19 @@ const esign = ref(null);
 
 
 let esignWidth = ref();
 let esignWidth = ref();
 let esignHeight = ref();
 let esignHeight = ref();
-const wrapperRef = ref(null)
+const wrapperRef = ref(null);
+const readonly = ref(false);
+const default_value = ref('');
 onMounted(() => {
 onMounted(() => {
+  if (props.component_props.readonly) {
+    readonly.value = props.component_props.readonly
+  }
+  if (props.component_props.default) {
+    default_value.value = props.component_props.default?.url
+  }
   // 动态计算画板canvas宽度/高度
   // 动态计算画板canvas宽度/高度
   setTimeout(() => {
   setTimeout(() => {
-    esignWidth.value = wrapperRef.value.offsetWidth - 32;
+    esignWidth.value = wrapperRef?.value?.offsetWidth - 32;
     esignHeight.value = (window.innerHeight) / 5;
     esignHeight.value = (window.innerHeight) / 5;
   }, 100);
   }, 100);
 })
 })