优化iOS签字问题

This commit is contained in:
2026-09-07 09:56:05 +08:00
parent 50937b936d
commit b4c8ee6a84
3 changed files with 20 additions and 16 deletions
@@ -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))