Vue el-input 为textarea 显示字数会把内容挡住

这段代码展示了如何使用深度选择器`::v-deep`来穿透Vue组件的样式隔离,修改`el-textarea`和`el-input__count`的样式。它将计数器的背景颜色设为透明,调整其位置,并设置textarea的内联高度为138px。
摘要由CSDN通过智能技术生成
直接修改样式即可

::v-deep .el-textarea .el-input__count {
	background-color: transparent;
	bottom: -36px;
	right: 0;
}
::v-deep .el-textarea__inner {
	height: 138px !important;
}

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中使用el-input组件显示信纸,首先需要在Vue组件中引入el-input,并传入相关的属性和样式。具体步骤如下: 1. 在Vue组件的模板中使用el-input组件,如下所示: ``` <el-input v-model="message" type="textarea" :rows="5" placeholder="请输入您的信件内容" :autosize="{ minRows: 5, maxRows: 10 }" ></el-input> ``` 其中,v-model用于双向绑定数据,将输入的内容绑定到组件实例的message属性上。type设置为textarea以便多行输入。rows设置初始行数为5,placeholder设置输入框的提示文本。autosize属性用于自适应文本框的高度。 2. 在data中定义message属性: ``` data() { return { message: '' } } ``` 这样就创建了一个用于存储输入内容的变量message。 3. 可以通过CSS样式来调整el-input组件的外观,以实现显示信纸的效果。例如,可以使用边框、背景图或者阴影等样式来模拟信纸的外观。 ``` .el-input { border: 1px solid #ccc; background: url('paper.jpg'); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); } ``` 其中,.el-inputel-input组件的样式类名,border用于设置边框样式,background用于设置背景图像,box-shadow用于设置阴影效果。 通过以上步骤,就可以在Vue中使用el-input组件来显示信纸效果了。用户可以在输入框中输入内容,并且组件将内容绑定到message变量中,开发者可以通过message变量来获取输入的内容,实现相应的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值