el-input type=‘textarea‘ 样式难修改的问题

el-input type=‘textarea’ 样式难修改的问题

1.el-inut type=''textarea 官网示例

发现type等于textarea 时 样式极难修改–例如修改文本域的背景
通过样式穿透都未成功

2.换个思路不用elmentui的文本域–使用html自带的textarea标签

下面是样式修改代码

textarea {
    outline: none;
    padding: 10px;
    max-width: 100%;
    line-height: 1.5;
    border-radius: 5px;
    border: none;
    // box-shadow: 1px 1px 1px #999;
    background-color: #F7F7F7;
}

textarea:focus {
    outline: none;
    border: none !important;
}

3.修改后的结果

4.在vue3中使用

需要获取值和清空的场景
先ref定义

const des_input = ref<any>()
 <textarea ref="des_input" rows="5" cols="43" placeholder="写下你珍贵的留言" />

清空值
des_input.value.value = ‘’"
获取值
des_input.value.value
注意如果这个输入款放在弹出框里，
弹出框刚出现的时候你就读取值是读取不到值的，
所以说弹出框出现时需要立即清空不可行
改为关闭时清空即可
结束—
诸君有用且点赞