修改类型为textarea的el-input的默认高度，enter换行输入时才加高到一定高度(vue2语法)

最新推荐文章于 2024-09-29 10:36:27 发布

₍•ʚ•₎呀呀

最新推荐文章于 2024-09-29 10:36:27 发布

阅读量2.8k

点赞数

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_60886885/article/details/130819464

版权

这段代码展示了如何在Vue.js中使用el-input组件创建一个textarea，配置autosize以自动调整高度。当用户按下回车键且行数小于2时，行数会增加，从而适应更多的输入内容。注意，可能需要根据样式调整高度计算，并可添加过渡动画提升用户体验。

摘要由CSDN通过智能技术生成

<template>
  <el-input
    type="textarea"
    :autosize="{ minRows: 1, maxRows: 2 }"
    :rows="defaultRows"
    v-model="inputValue"
    @keydown.enter="onEnter"
  />
</template>

<script>
export default {
  data() {
    return {
      defaultRows: 1,
      inputValue: '',
    };
  },
  methods: {
    onEnter() {
      if (this.defaultRows < 2) {
        this.defaultRows++;
      }
    },
  },
};
</script>

在上面的代码中，首先在 el-input 组件上添加了 type="textarea"，将其类型设置为 textarea。然后，使用 autosize 属性启用自适应高度，设置了最小行数为 1，最大行数为 2，这样就能让 el-input 的高度随着输入内容的多少自适应。

接着，使用 rows 属性设置了默认的行数为 1，控制了 el-input 组件的默认高度。在 data 函数中，定义了响应式数据 defaultRows 和 inputValue，分别用来保存默认的行数和输入的内容。

最后，使用 @keydown.enter 事件监听器，当用户按下回车键时，调用 onEnter 方法。在该方法中，判断如果当前的行数小于 2，则将行数加 1，这样就能让 el-input 的高度随着用户输入的换行符逐渐增加。

需要注意的是，由于 el-input 组件的样式可能会影响高度的计算，因此可能需要根据实际情况进行调整。另外，为了实现更好的用户体验，建议在修改高度时添加过渡动画效果。可以使用 transition 或 animate.css 等库来实现。