写业务的时候发现,因为想偷懒嘛,直接就在想在外部去定义一个变量,然后写个弹窗里( tsx )的 el-input ,而不是又去写个 vue 页面,但发现就输入不了了,而且跟着文档写 textarea 没有字数统计。就两个问题嘛
TSX 的写法嘛,最开始我是这么写的
const auditText = ref('');
// 忽略代码<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }}
max-length={50}placeholder="请填写审核不通过原因(最少五个字)"show-word-limittype="textarea"
/>
然后发现真是一点反应没有啊,然后看了下文档上面的这句话
const auditText = ref<string>('');
function test(value) {
console.log(value);
auditText.value = value;
}
//忽略代码
<ElInput
model-value={auditText.value}
onInput={test}
autosize={{ minRows: 5, maxRows: 10 }}
max-length={50}
placeholder="请填写审核不通过原因(最少五个字)"
show-word-limit
type="textarea"
/>
但是那其实也不用这么麻烦人文档里也写得很清楚了v-model
就行
<ElInput
v-model={auditText.value}
autosize={{ minRows: 5, maxRows: 10 }}
max-length={50}
placeholder="请填写审核不通过原因(最少五个字)"
show-word-limit
type="textarea"
/>
先看看官网的写法,定义个 maxlength 再定义个 show-word-limit 就有字数统计了
可是如果我在 tsx 里按官网这么写会发生什么那
果然吗,不是 props 的属性就不用写了,原生事件是直接绑定在 attrs 上给 input 标签的,所以写在 tsx 里会报错,写在模版里不会。暂时就忽略这一行检查把~~~。
平时会记录一些简单但好玩的问题,水一篇 vue ,每天一篇 vue 一篇 react 。
1
chiaoyuja 16 天前
图没了
|
![]() |
2
shakukansp 16 天前
你第一个写法就有点离谱了
像是没自己封装过带 v-model 的自定义组件一样 |