diff --git a/src/views/badge/preview.vue b/src/views/badge/preview.vue index 417b9e6..3d90e4b 100644 --- a/src/views/badge/preview.vue +++ b/src/views/badge/preview.vue @@ -774,15 +774,19 @@ const validateInput = (input: string) => { const handleInput = (value: string) => { let byteLength = calculateByteLength(value); - // 如果超过最大字节数,禁止继续输入 console.log('byteLength', byteLength, limitCount.value) if (byteLength > limitCount.value) { - // 超出字节数,直接截断到允许的最大字节数 let validValue = ''; let currentBytes = 0; for (let i = 0; i < value.length; i++) { const char = value.charAt(i); - const charBytes = char.charCodeAt(0) > 255 ? 2 : 1; + const code = char.charCodeAt(0); + let charBytes = 0; + if (code === 32) { + charBytes = 1; + } else { + charBytes = code > 255 ? 2 : 1; + } if (currentBytes + charBytes <= limitCount.value) { validValue += char; currentBytes += charBytes; @@ -793,7 +797,6 @@ const handleInput = (value: string) => { shapeText.value = validValue; return; } - // 未超过最大字节数,正常更新 shapeText.value = value; } @@ -801,21 +804,15 @@ const calculateByteLength = (str: string) => { let len = 0; for (let i = 0; i < str.length; i++) { const code = str.charCodeAt(i); - // 中文字符和特殊符号占2字节,英文占1字节 - len += code > 255 ? 2 : 1; + if (code === 32) { + len += 1; + } else { + len += code > 255 ? 2 : 1; + } } return len; } -// const typeChange = (id: number) => { -// console.log('typeChange', id) -// typeId.value = id; -// shapeList.value = []; -// shapeImage.value = ''; -// getStyle.value = ''; -// getShapeList() -// } - const shapeChange = (item: any) => { console.log('shapeChange', item) sizeList.value.map((item: any) => { @@ -1448,6 +1445,7 @@ onUnmounted(() => { font-family: chinese; overflow: hidden; text-shadow: 1px 0px 1px #000000a1; + white-space: pre-wrap; } .shape-item-image-round { border-radius: 50%;