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

<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 等库来实现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要禁止el-input输入框中的回车换行,可以通过监听输入框的keydown事件,并在事件处理函数中判断按下的键是否是回车键,如果是回车键就阻止默认换行行为。 在Vue的代码中,可以在el-input标签上添加@keydown修饰符来监听keydown事件,然后在回调函数中使用event.preventDefault()方法来阻止默认换行行为。 具体实现步骤如下: 1. 在el-input标签上添加@keydown.enter.prevent修饰符,用于监听回车键的按下事件并阻止默认行为。 2. 在回调函数中使用event.preventDefault()方法,阻止回车键的默认换行行为。 示例代码如下所示: <el-input v-model="backForm.replyMessage" type="textarea" placeholder="请输入回复" @keydown.enter.prevent></el-input> 其中,@keydown.enter.prevent表示监听回车键的按下事件,并阻止默认行为。这样就可以禁止在el-input输入框中按下回车键换行了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [enter键控制input光标移动到下一个框](https://download.csdn.net/download/alice_666/10740494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-input输入换行,显示时换行(开发小记)](https://blog.csdn.net/weixin_42078172/article/details/116900758)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值