el-input 字段超长省略号 鼠标移上弹出完整内容
时间: 2023-10-09 21:12:23 浏览: 62
可以通过以下方式实现:
1. 使用 CSS 的 text-overflow 属性来实现省略号:
```
.el-input {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
```
2. 在 el-input 上绑定鼠标移入事件,弹出完整内容:
```
<el-input v-model="inputValue" @mouseenter="showFullContent">{{ inputValue }}</el-input>
...
methods: {
showFullContent() {
this.$message({
message: this.inputValue,
showClose: true,
duration: 0
})
}
}
```
这里使用了 Element UI 的 Message 组件来实现弹出完整内容,当然也可以使用其他弹出框组件。
相关问题
el-input 字段超长省略号
可以通过设置 `overflow: hidden` 和 `text-overflow: ellipsis` 来实现 el-input 字段超长省略号。
例如:
```html
<el-input v-model="inputValue" style="width: 200px; overflow: hidden; text-overflow: ellipsis;"></el-input>
```
其中,`width` 表示 el-input 的宽度,`overflow: hidden` 表示超出宽度的部分隐藏,`text-overflow: ellipsis` 表示超出宽度的部分显示省略号。
鼠标放在el-input上面显示el-input里面的内容
要实现鼠标放在 `el-input` 上面显示 `el-input` 里面的内容,可以使用 `tooltip` 组件。具体实现步骤如下:
1. 在 `el-input` 上绑定 `v-tooltip` 指令,并设置 `content` 属性为 `el-input` 的值。
```html
<el-input v-model="inputValue" v-tooltip="{content: inputValue}"></el-input>
```
2. 在 `tooltip` 组件上设置 `manual` 属性为 `true`,这样鼠标不需要点击也会触发 tooltip 显示。
```html
<el-tooltip :manual="true" content="Tooltip Content">
<el-input v-model="inputValue" v-tooltip="{content: inputValue}"></el-input>
</el-tooltip>
```
完整代码示例:
```html
<template>
<div>
<el-tooltip :manual="true" :content="inputValue">
<el-input v-model="inputValue" v-tooltip="{content: inputValue}"></el-input>
</el-tooltip>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
}
}
</script>
```