优化iOS签字问题
This commit is contained in:
@@ -21,8 +21,10 @@
|
|||||||
<button v-if="signatureContent" @click="openSignature" class="signature-reset-button"
|
<button v-if="signatureContent" @click="openSignature" class="signature-reset-button"
|
||||||
type="button">重新签名</button>
|
type="button">重新签名</button>
|
||||||
</div>
|
</div>
|
||||||
<van-popup v-model="showSignaturePanel" :close-on-click-overlay="false"
|
<!-- 签字板挂载到 body,避免 iOS 将 fixed 子元素裁切在外层带 transform 的滚动 Popup 内。 -->
|
||||||
:style="{ height: '100vh', width: '100vw' }" @close="handleSignaturePopupClose">
|
<van-popup v-model="showSignaturePanel" class="signature-full-popup" get-container="body"
|
||||||
|
:close-on-click-overlay="false" :style="{ height: '100%', width: '100%' }"
|
||||||
|
@close="handleSignaturePopupClose">
|
||||||
<signature @save="save"></signature>
|
<signature @save="save"></signature>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="signature-wrap">
|
<div class="signature-wrap">
|
||||||
<canvas id="canvas"></canvas>
|
<canvas ref="signatureCanvas"></canvas>
|
||||||
<div :class="isLikelyMobile() ? 'action-buttons' : 'action-buttons pc-action-buttons'">
|
<div :class="isLikelyMobile() ? 'action-buttons' : 'action-buttons pc-action-buttons'">
|
||||||
<button @click="clear" class="action-button-danger" type="button">清空</button>
|
<button @click="clear" class="action-button-danger" type="button">清空</button>
|
||||||
<button @click="undo" class="action-button-warning" type="button">撤销</button>
|
<button @click="undo" class="action-button-warning" type="button">撤销</button>
|
||||||
@@ -80,15 +80,13 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const innerWidth = window.innerWidth
|
// 使用签字弹层的实际可视尺寸,避免 iOS WebView 中 100vh/innerHeight 包含不可见浏览器区域。
|
||||||
const innerHeight = window.innerHeight
|
const containerWidth = this.$el.clientWidth || window.innerWidth
|
||||||
|
const containerHeight = this.$el.clientHeight || window.innerHeight
|
||||||
const canvas = document.getElementById("canvas")
|
const canvas = this.$refs.signatureCanvas
|
||||||
canvas.width = window.innerWidth
|
|
||||||
canvas.height = window.innerHeight
|
|
||||||
signature = new SmoothSignature(canvas, {
|
signature = new SmoothSignature(canvas, {
|
||||||
width: innerWidth - 30,
|
width: Math.max(containerWidth - 30, 1),
|
||||||
height: innerHeight - 30,
|
height: Math.max(containerHeight - 30, 1),
|
||||||
scale: 2,
|
scale: 2,
|
||||||
minWidth: 4,
|
minWidth: 4,
|
||||||
maxWidth: 10,
|
maxWidth: 10,
|
||||||
@@ -101,11 +99,14 @@ module.exports = {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.signature-wrap {
|
.signature-wrap {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
left: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -121,8 +122,9 @@ module.exports = {
|
|||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
display: flex;
|
display: flex;
|
||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
bottom: 0px;
|
z-index: 2;
|
||||||
|
bottom: calc(15px + env(safe-area-inset-bottom));
|
||||||
left: 60px;
|
left: 60px;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -621,7 +621,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script nonce="${cspNonce!}">
|
<script nonce="${cspNonce!}">
|
||||||
const h5ComponentVersion = "20260821_2"
|
const h5ComponentVersion = "20260907_1"
|
||||||
Vue.component("rich-text", httpVueLoader("/components/plugins/sysRichTextView/index.vue?v=" + h5ComponentVersion))
|
Vue.component("rich-text", httpVueLoader("/components/plugins/sysRichTextView/index.vue?v=" + h5ComponentVersion))
|
||||||
Vue.component("h5-file-upload", httpVueLoader("/components/plugins/sysUpload/h5Index.vue?v=" + h5ComponentVersion))
|
Vue.component("h5-file-upload", httpVueLoader("/components/plugins/sysUpload/h5Index.vue?v=" + h5ComponentVersion))
|
||||||
Vue.component("h5-signature", httpVueLoader("/components/plugins/sysSignature/h5Index.vue?v=" + h5ComponentVersion))
|
Vue.component("h5-signature", httpVueLoader("/components/plugins/sysSignature/h5Index.vue?v=" + h5ComponentVersion))
|
||||||
|
|||||||
Reference in New Issue
Block a user