123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <template>
- <el-input :model-value="modelValue"
- ref="inputRef"
- @update:modelValue="emitInput"
- :placeholder="placeholder"
- :clearable="clearable"
- :disabled="disabled"
- :maxlength="limit"
- :show-word-limit="!!limit"
- type="textarea"
- :autosize="autosize"
- resize="none"
- :style="{width}"></el-input>
- </template>
- <script>
- import { ElInput } from 'element-plus'
- import { computed, watch, ref, nextTick, inject } from 'vue'
- import { useFormInput } from '@cip/components/hooks/form-input'
- import { formInputProps } from '../../form-input-props'
- export default {
- components: { ElInput },
- props: formInputProps,
- emits: ['update:modelValue'],
- setup (props, context) {
- const cipConfig = inject('cip-config', {})
- const { width, clearable, ...formInput } = useFormInput(props, context)
- const inputRef = ref()
- const emitInput = (val) => {
- context.emit('update:modelValue', val)
- }
- const limit = computed(() => {
- return props.config?.limit ?? cipConfig?.limit?.textarea ?? ''
- })
- const autosize = computed(() => {
- return props.config?.autosize || { minRows: 2, maxRows: 6 }
- })
- watch(() => props.config.autosize, (val) => {
- if (inputRef.value) {
- nextTick(() => {
- inputRef.value.resizeTextarea()
- })
- }
- }, { deep: true }) // 需要深度监听才可以正常触发
- return {
- ...formInput,
- inputRef,
- clearable,
- emitInput,
- autosize,
- width,
- limit
- }
- }
- }
- </script>
|