diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue index 234596261c..2f198e59e5 100644 --- a/packages/components/input/src/input.vue +++ b/packages/components/input/src/input.vue @@ -136,7 +136,11 @@ @change="handleChange" @keydown="handleKeydown" /> - + {{ textLength }} / {{ attrs.maxlength }} @@ -157,7 +161,7 @@ import { useSlots, watch, } from 'vue' -import { isClient } from '@vueuse/core' +import { isClient, useResizeObserver } from '@vueuse/core' import { isNil } from 'lodash-unified' import { ElIcon } from '@element-plus/components/icon' import { @@ -215,6 +219,7 @@ const focused = ref(false) const hovering = ref(false) const isComposing = ref(false) const passwordVisible = ref(false) +const countStyle = ref() const textareaCalcStyle = shallowRef(props.inputStyle) const _ref = computed(() => input.value || textarea.value) @@ -280,6 +285,16 @@ const suffixVisible = computed( const [recordCursor, setCursor] = useCursor(input) +useResizeObserver(textarea, (entries) => { + if (!isWordLimitVisible.value || props.resize !== 'both') return + const entry = entries[0] + const { width } = entry.contentRect + countStyle.value = { + /** right: 100% - width + padding(15) + right(6) */ + right: `calc(100% - ${width + 15 + 6}px)`, + } +}) + const resizeTextarea = () => { const { type, autosize } = props