鼠标放在el-input上面显示el-input里面的内容
时间: 2023-07-22 22:03:32 浏览: 508
在一个input框中显示当前的年月日,当鼠标放上去时变换为当前时间显示
可以使用element-ui提供的tooltip组件来实现鼠标悬停显示el-input里面的内容。具体实现方法如下:
1. 给el-input添加一个ref属性,方便后面获取该组件的值。
```html
<el-input ref="input" v-model="inputValue"></el-input>
```
2. 在template中添加tooltip组件,并设置为悬停时显示el-input的值。
```html
<el-tooltip effect="light" :content="inputValue" placement="top">
<el-input ref="input" v-model="inputValue"></el-input>
</el-tooltip>
```
3. 在script中定义inputValue变量,并在mounted生命周期中获取el-input的值。
```javascript
export default {
data() {
return {
inputValue: ''
}
},
mounted() {
this.inputValue = this.$refs.input.$el.querySelector('input').value
}
}
```
这样,当鼠标悬停在el-input上时,就会显示该输入框中的值。
阅读全文