✨ feat(电子签名): 动态计算电子签名画板宽高

 <!--
 <!--
  * @Date: 2022-09-06 16:29:31
  * @Date: 2022-09-06 16:29:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-07 16:50:16
+ * @LastEditTime: 2023-02-09 13:01:54
  * @FilePath: /data-table/src/components/SignField/index.vue
  * @FilePath: /data-table/src/components/SignField/index.vue
  * @Description: 电子签名控件
  * @Description: 电子签名控件
 -->
 -->
 <template>
 <template>
   <div v-if="HideShow" class="sign-page">
   <div v-if="HideShow" class="sign-page">
     <div class="label">
     <div class="label">
-      {{ item.component_props.label }}{{ valid
+      {{ item.component_props.label }}{{
+        valid
       }}<span v-if="item.component_props.required">&nbsp;*</span>
       }}<span v-if="item.component_props.required">&nbsp;*</span>
     </div>
     </div>
-    <div style="padding: 1rem; position: relative">
+    <div ref="wrapperRef" class="esign-wrapper">
       <!-- <div style="padding: 1rem; position: relative; height: 150px; background-color: #FCFCFC;border: 1px solid #EAEAEA; border-radius: 5px;"> -->
       <!-- <div style="padding: 1rem; position: relative; height: 150px; background-color: #FCFCFC;border: 1px solid #EAEAEA; border-radius: 5px;"> -->
-      <vue-esign
-        ref="esign"
-        class="sign-wrapper"
-        style=""
-        :isCrop="isCrop"
-        :lineWidth="lineWidth"
-        :lineColor="lineColor"
-        :bgColor.sync="bgColor"
-      />
+      <vue-esign v-if="esignWidth" ref="esign" class="sign-wrapper" :width="esignWidth" :height="esignHeight" :isCrop="isCrop"
+        :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
       <div v-if="show_sign" class="whiteboard">
       <div v-if="show_sign" class="whiteboard">
         <div class="text" @click="startSign">
         <div class="text" @click="startSign">
           <van-icon name="edit" />&nbsp;点击开始签署电子签名
           <van-icon name="edit" />&nbsp;点击开始签署电子签名
@@ -43,11 +37,7 @@
         <van-button type="danger" block @click="handleReset">删除签名</van-button>
         <van-button type="danger" block @click="handleReset">删除签名</van-button>
       </div>
       </div>
     </div>
     </div>
-    <div
-      v-if="show_empty"
-      class="van-field__error-message"
-      style="padding: 0 1rem 1rem 1rem"
-    >
+    <div v-if="show_empty" class="van-field__error-message" style="padding: 0 1rem 1rem 1rem">
       电子签名不能为空
       电子签名不能为空
     </div>
     </div>
     <van-divider />
     <van-divider />
@@ -80,6 +70,16 @@ const emit = defineEmits(["active"]);
 
 
 const esign = ref(null);
 const esign = ref(null);
 
 
+let esignWidth = ref();
+let esignHeight = ref();
+const wrapperRef = ref(null)
+onMounted(() => {
+  // 动态计算画板canvas宽度/高度
+  setTimeout(() => {
+    esignWidth.value = wrapperRef.value.offsetWidth - 32;
+    esignHeight.value = (document.body.offsetHeight) / 5;
+  }, 100);
+})
 const lineWidth = ref(6);
 const lineWidth = ref(6);
 const lineColor = ref("#000000");
 const lineColor = ref("#000000");
 const bgColor = ref("#FCFCFC");
 const bgColor = ref("#FCFCFC");
@@ -240,6 +240,7 @@ export default {
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .sign-page {
 .sign-page {
+
   // padding-bottom: 1rem;
   // padding-bottom: 1rem;
   .label {
   .label {
     padding: 1rem 1rem 0 1rem;
     padding: 1rem 1rem 0 1rem;
@@ -250,10 +251,17 @@ export default {
       color: red;
       color: red;
     }
     }
   }
   }
+
+  .esign-wrapper {
+    padding: 1rem;
+    position: relative;
+    box-sizing: border-box;
+
     .sign-wrapper {
     .sign-wrapper {
       border: 1px solid #eaeaea;
       border: 1px solid #eaeaea;
       border-radius: 5px;
       border-radius: 5px;
     }
     }
+
     .whiteboard {
     .whiteboard {
       position: absolute;
       position: absolute;
       height: 100%;
       height: 100%;
@@ -262,6 +270,7 @@ export default {
       top: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
       text-align: center;
+
       .text {
       .text {
         position: absolute;
         position: absolute;
         width: 100%;
         width: 100%;
@@ -271,6 +280,8 @@ export default {
       }
       }
     }
     }
 
 
+  }
+
   .control-sign {
   .control-sign {
     padding-bottom: 1rem;
     padding-bottom: 1rem;
   }
   }