fix: 🐛 修复textarea在微信小程序平台下部分安卓手机maxlength不生效的问题

This commit is contained in:
xuqingkai 2024-03-11 10:53:45 +08:00
parent 24ae6cac05
commit 512e63b0ad

View File

@ -10,6 +10,7 @@
<slot v-else name="label"></slot> <slot v-else name="label"></slot>
</view> </view>
</view> </view>
<!-- 文本域 --> <!-- 文本域 -->
<view :class="`wd-textarea__value ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`"> <view :class="`wd-textarea__value ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`">
<textarea <textarea
@ -48,13 +49,8 @@
<view class="wd-textarea__suffix"> <view class="wd-textarea__suffix">
<wd-icon v-if="showClear" custom-class="wd-textarea__clear" name="error-fill" @click="clear" /> <wd-icon v-if="showClear" custom-class="wd-textarea__clear" name="error-fill" @click="clear" />
<view v-if="showWordCount" class="wd-textarea__count"> <view v-if="showWordCount" class="wd-textarea__count">
<text <text :class="countClass">
:class="[ {{ currentLength }}
inputValue && String(inputValue).length > 0 ? 'wd-textarea__count-current' : '',
String(inputValue).length > parseInt(String(maxlength)) ? 'is-error' : ''
]"
>
{{ String(inputValue).length }}
</text> </text>
/{{ maxlength }} /{{ maxlength }}
</view> </view>
@ -223,12 +219,17 @@ const isRequired = computed(() => {
return props.required || props.rules.some((rule) => rule.required) || formRequired return props.required || props.rules.some((rule) => rule.required) || formRequired
}) })
//
const currentLength = computed(() => {
return String(props.modelValue || '').length
})
const rootClass = computed(() => { const rootClass = computed(() => {
return `wd-textarea ${props.label || props.useLabelSlot ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${ return `wd-textarea ${props.label || props.useLabelSlot ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${
cell.border.value ? 'is-border' : '' cell.border.value ? 'is-border' : ''
} ${props.size ? 'is-' + props.size : ''} ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${ } ${props.size ? 'is-' + props.size : ''} ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${
props.autoHeight ? 'is-auto-height' : '' props.autoHeight ? 'is-auto-height' : ''
} ${inputValue.value && String(inputValue.value).length > 0 ? 'is-not-empty' : ''} ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}` } ${currentLength.value > 0 ? 'is-not-empty' : ''} ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
}) })
const labelClass = computed(() => { const labelClass = computed(() => {
@ -239,6 +240,10 @@ const inputPlaceholderClass = computed(() => {
return `wd-textarea__placeholder ${props.placeholderClass}` return `wd-textarea__placeholder ${props.placeholderClass}`
}) })
const countClass = computed(() => {
return `${currentLength.value > 0 ? 'wd-textarea__count-current' : ''} ${currentLength.value > props.maxlength ? 'is-error' : ''}`
})
const labelStyle = computed(() => { const labelStyle = computed(() => {
return props.labelWidth return props.labelWidth
? objToStyle({ ? objToStyle({
@ -269,16 +274,20 @@ onBeforeMount(() => {
// //
function initState() { function initState() {
const { disabled, readonly, clearable, maxlength, showWordLimit } = props const { disabled, readonly, clearable, maxlength, showWordLimit } = props
let newVal = ''
if (showWordLimit && maxlength && inputValue.value.toString().length > maxlength) {
newVal = inputValue.value.toString().substring(0, maxlength)
}
showClear.value = Boolean(!disabled && !readonly && clearable && inputValue.value) showClear.value = Boolean(!disabled && !readonly && clearable && inputValue.value)
showWordCount.value = Boolean(!disabled && !readonly && maxlength && showWordLimit) showWordCount.value = Boolean(!disabled && !readonly && maxlength && showWordLimit)
inputValue.value = newVal || inputValue.value inputValue.value = formatValue(inputValue.value as string)
emit('update:modelValue', inputValue.value) emit('update:modelValue', inputValue.value)
} }
function formatValue(value: string) {
const { maxlength, showWordLimit } = props
if (showWordLimit && maxlength !== -1 && value.length > maxlength) {
return value.toString().substring(0, maxlength)
}
return value
}
function clear() { function clear() {
inputValue.value = '' inputValue.value = ''
requestAnimationFrame() requestAnimationFrame()
@ -316,6 +325,7 @@ function handleFocus({ detail }) {
} }
// input // input
function handleInput() { function handleInput() {
inputValue.value = formatValue(inputValue.value as string)
emit('update:modelValue', inputValue.value) emit('update:modelValue', inputValue.value)
emit('input', inputValue.value) emit('input', inputValue.value)
} }