mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-08 01:58:52 +08:00
fix: 🐛 修复textarea在微信小程序平台下部分安卓手机maxlength不生效的问题
This commit is contained in:
parent
24ae6cac05
commit
512e63b0ad
@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user