VUE+element Input框的神奇操作：自适应高度，换行不费吹灰之力！

2023-05-27 07:42:33

使用 VUE 和 Element 轻松实现输入域自适应高度与自动发送

在日常开发中，输入域是常见的元素，但它在用户体验上常常存在优化空间。例如，输入域的高度可能会随着输入内容的增多而增加，导致页面布局失控；空格换行和 enter 键无法提交内容也让人沮丧。本文将介绍如何使用 VUE 和 Element 框架轻松实现输入域的自适应高度、支持空格换行和 enter 键发送等功能，提升用户输入体验。

安装 Element 框架

第一步是将 Element 框架集成到项目中。通过以下命令安装：

npm install element-ui -S

引入 Element 框架

在 main.js 文件中，引入 Element 框架：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

创建 Input 组件

接下来，创建一个 Input 组件，负责处理输入内容：

<template>
  <el-input v-model="value" @input="handleInput" :autosize="{ minRows: 1, maxRows: 10 }"></el-input>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

代码解释：

el-input 是 Element 提供的输入域组件。
v-model 用于实现双向数据绑定，即输入域中的值与组件的 value prop 同步。
@input 事件监听器在输入内容发生变化时触发。
:autosize 属性设置输入域的高度自适应，minRows 和 maxRows 分别指定最小和最大行数。

使用 Input 组件

在页面模板中，使用 Input 组件：

<template>
  <input-component v-model="value"></input-component>
</template>

<script>
import InputComponent from './components/InputComponent.vue'

export default {
  components: {
    InputComponent
  },
  data() {
    return {
      value: ''
    }
  }
}
</script>