el-input输入框在禁用状态下 如何在右下角显示输入框内的已输入字数/总字数
0
悬赏园豆：5
[已解决问题]
解决于 2023-10-10 18:27
<el-form-item label="项目敏感性分析" prop="projectSensitiveAnalysis">
<el-input v-if="!ruleForm.isdisabled" type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="false" show-word-limit></el-input>
<el-input v-else type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="true"></el-input>
</el-form-item>
v-else 内容为禁用状态
最佳答案
0
方式：用一个 flex 容器包裹
<div style="display: flex; justify-content: flex-end;align-items: center;">
输入：<el-input v-model="formData.message4"
placeholder="Please input" maxlength=200 show-word-limit disabled >
</el-input>
<span>6/200</span>
</div>
--
效果：
当然，和原生的有差距，，再调调。
经典的 flex布局 中文文章：
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
收获园豆：5
再 迭代：
<span style="margin-left: -50px;z-index: 100;">6/200</span>
-50px 你 动态计算下吧，
@快乐的凡人721:
参考你说的自己造<span> 下面是解决的方案
<el-form-item label="项目敏感性分析" prop="projectSensitiveAnalysis" class="row-full">
<el-input v-if="!ruleForm.isdisabled" type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="false"></el-input>
<el-input v-else type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="true"></el-input>
<span style="position: absolute; bottom: 0; right: 0;">{{ ruleForm.projectSensitiveAnalysis.length }}/1000</span>
</el-form-item>
感谢指导
其他回答(2)
0
监听input事件,然后通过事件获取到字符数量,再在右下角显示不就ok了
<el-input v-else type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="true">
<span style="position: absolute; bottom: 0; right: 0;">{{ ruleForm.projectSensitiveAnalysis.length }}/1000</span>
</el-input>
字符数量直接获取绑定的长度就可以, 现在就是在el-input里面加什么都不显示 包括span
<el-form-item label="项目敏感性分析" prop="projectSensitiveAnalysis" class="row-full">
<el-input v-if="!ruleForm.isdisabled" type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="false"></el-input>
<el-input v-else type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="true"></el-input>
<span style="position: absolute; bottom: 0; right: 0;">{{ ruleForm.projectSensitiveAnalysis.length }}/1000</span>
</el-form-item>
已通过自己造span的解决了问题 感谢指点
0
使用position: absolute;的时候，外面套一层position: relative;
<div style="position: relative;">
<el-input
v-model="textarea"
maxlength="1000"
placeholder="Please input"
type="textarea"
disabled
show-word-limit
></el-input>
<span style="position: absolute; bottom: 2px; right: 2px;">{{ textarea.length }}/1000</span>
</div>
感谢 已通过其他方式解决了
这个组件自带的都是这样做的：
disabled=true 之后，尾巴的那个 <span> 消失了，，需要的话，自己造咯
– 快乐的凡人721 1年前@快乐的凡人721: 小生不才呀! 是想这样 但好像input一旦禁用就没办法加span的了
– 码一码ba 1年前<el-input v-else type="textarea" maxlength="1000" :autosize="{ minRows: 3 }" v-model="ruleForm.projectSensitiveAnalysis" :disabled="true">
<span style="position: absolute; bottom: 0; right: 0;">{{ ruleForm.projectSensitiveAnalysis.length }}/1000</span>
</el-input>
这样就不起作用