Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6a7ac573 1 parent 02c793b3

fix 签名组件有默认值时不同情况处理优化

Inline Side-by-side
Showing 1 changed file with 19 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2023-03-29 17:44:24 2 * @Date: 2023-03-29 17:44:24
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-06-06 17:50:41 4 + * @LastEditTime: 2024-06-17 10:34:10
5 * @FilePath: /data-table/src/components/SignField/MyComponent.vue 5 * @FilePath: /data-table/src/components/SignField/MyComponent.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div style="width: 100%;"> 9 <div style="width: 100%;">
10 - <div v-if="!readonly" ref="wrapperRef" class="esign-wrapper"> 10 + <div v-show="!default_value" ref="wrapperRef" class="esign-wrapper">
11 <vue-esign v-if="esignWidth" ref="esign" class="sign-wrapper" :width="esignWidth" :height="esignHeight" :isCrop="isCrop" 11 <vue-esign v-if="esignWidth" ref="esign" class="sign-wrapper" :width="esignWidth" :height="esignHeight" :isCrop="isCrop"
12 :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /> 12 :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
13 <div v-if="show_sign" class="whiteboard"> 13 <div v-if="show_sign" class="whiteboard">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 </div> 16 </div>
17 </div> 17 </div>
18 </div> 18 </div>
19 - <div v-else class="esign-wrapper"> 19 + <div v-show="default_value" class="esign-wrapper">
20 <div class="sign-wrapper"> 20 <div class="sign-wrapper">
21 <van-image 21 <van-image
22 width="100%" 22 width="100%"
...@@ -72,17 +72,24 @@ const wrapperRef = ref(null); ...@@ -72,17 +72,24 @@ const wrapperRef = ref(null);
72 const readonly = ref(false); 72 const readonly = ref(false);
73 const default_value = ref(''); 73 const default_value = ref('');
74 onMounted(() => { 74 onMounted(() => {
75 + // 只读状态
75 if (props.component_props.readonly) { 76 if (props.component_props.readonly) {
76 readonly.value = props.component_props.readonly 77 readonly.value = props.component_props.readonly
77 } 78 }
79 + // 非只读，有默认值
78 if (props.component_props.default) { 80 if (props.component_props.default) {
79 - default_value.value = props.component_props.default?.url 81 + default_value.value = props.component_props.default?.url;
80 } 82 }
83 + if (!props.component_props.readonly) {
84 + show_sign.value = false;
85 + show_control.value = false;
86 + } else { // 有默认值的话不要先计算宽高，删除默认值，影响后期生成
81 // 动态计算画板canvas宽度/高度 87 // 动态计算画板canvas宽度/高度
82 setTimeout(() => { 88 setTimeout(() => {
83 esignWidth.value = wrapperRef?.value?.offsetWidth - 32; 89 esignWidth.value = wrapperRef?.value?.offsetWidth - 32;
84 esignHeight.value = (window.innerHeight) / 5; 90 esignHeight.value = (window.innerHeight) / 5;
85 }, 100); 91 }, 100);
92 + }
86 }) 93 })
87 const lineWidth = ref(6); 94 const lineWidth = ref(6);
88 const lineColor = ref("#000000"); 95 const lineColor = ref("#000000");
...@@ -97,10 +104,17 @@ const sign_value = computed(() => { ...@@ -97,10 +104,17 @@ const sign_value = computed(() => {
97 104
98 const handleReset = () => { 105 const handleReset = () => {
99 // 清空画板 106 // 清空画板
100 - esign.value.reset(); 107 + esign.value?.reset();
101 show_control.value = true; 108 show_control.value = true;
102 // 删除可能存在的签名 109 // 删除可能存在的签名
103 image_url.value = ""; 110 image_url.value = "";
111 + // 删除默认值
112 + default_value.value = "";
113 + // 动态计算画板canvas宽度/高度
114 + setTimeout(() => {
115 + esignWidth.value = wrapperRef?.value?.offsetWidth - 32;
116 + esignHeight.value = (window.innerHeight) / 5;
117 + }, 100);
104 }; 118 };
105 119
106 /********** 上传七牛云获取图片地址 ***********/ 120 /********** 上传七牛云获取图片地址 ***********/
......