鼠标放在el-input上面显示el-input里面的内容
时间: 2023-07-22 21:03:31 浏览: 91
要实现鼠标放在 `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>
```
阅读全文