Vue JS автоматическое изменение размера текстового поля при загрузке - PullRequest
Новая
       75

Vue JS автоматическое изменение размера текстового поля при загрузке

0 голосов
/ 30 мая 2020

Обучение Vue, так что это может быть основной c вопрос. У меня есть компонент, который отображает ввод текстового поля: 

<textarea
    v-if="$attrs.type === 'textarea'"
    v-bind="$attrs"
    :value="value"
    @input="inputChange"
    :class="[
        error ? 'text-red-500' : 'text-gray-600',
        textareaAutoResized ? 'h-32' : '',
        inputClass,
    ]"
></textarea>

Мой inputChange метод работает хорошо: 

methods: {
    inputChange(evt) {
        let value = evt.target.value
        this.$emit('input', value)

        if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
            evt.target.style.height = "auto";
            let newHeight = evt.target.scrollHeight;
            evt.target.style.height = `${newHeight}px`;
        }

    },
},

Но я не могу настроить автоматический размер текстового поля при загрузке страницы на основе исходное содержание. Как мне получить доступ к установленному элементу? Спасибо! 

    mounted() {
        if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
            this.$el.style.height = "auto";
            let newHeight = this.$el.scrollHeight;
            this.$el.style.height = `${newHeight}px`;
        }
    },

1 Ответ

1 голос
/ 30 мая 2020

Вы можете использовать $ref на своем <textarea>: 

<textarea
    ref="textarea"
    v-if="$attrs.type === 'textarea'"
    v-bind="$attrs"
    :value="value"
    @input="inputChange"
    :class="[
        error ? 'text-red-500' : 'text-gray-600',
        textareaAutoResized ? 'h-32' : '',
        inputClass,
    ]"
></textarea>

и установить его: 

mounted() {
    if (this.$attrs.type === 'textarea' && this.textareaAutoResized) {
        this.$refs.textarea.style.height = "auto";
        let newHeight = this.$refs.textarea.scrollHeight;
        this.$refs.textarea.style.height = `${newHeight}px`;
    }
},
...