el-input在只可以读不可以改的时候, 如果字显示不全则鼠标悬浮显示所有内容
时间: 2024-10-16 11:10:46 浏览: 166
在Element UI库中的`el-input`组件中,如果你想要创建一个只读并且当输入内容过长显示不全时,在鼠标悬停时能展示全部内容的输入框,你可以设置`disabled`属性使其处于禁用状态,并启用`placeholder`属性来显示提示信息。同时,可以利用CSS来控制鼠标悬浮时的行为,例如添加`:hover`伪类来改变`.el-input__inner`的选择器样式,让它在鼠标悬停时展示内容。
HTML部分:
```html
<el-input type="text" disabled placeholder="点击此处查看完整内容" :value="longContent" class="read-only-input">
</el-input>
```
CSS部分:
```css
.read-only-input {
white-space: nowrap; /* 阻止文本换行 */
}
.read-only-input:hover .el-input__inner {
width: 100%; /* 或者自定义宽度,如最大宽度 */
overflow: visible; /* 显示超出的内容 */
}
```
JavaScript (如果需要动态内容):
```javascript
data() {
return {
longContent: '这是一个非常非常非常长的示例文本,鼠标悬浮时会展示全部内容……',
};
},
```
这样,用户无法修改输入框中的内容,仅能看到完整的提示文字,当鼠标移动到输入框上时,整个内容就会显示出来。
阅读全文
相关推荐


















