在vue中,怎么控制element-ui tooltip的隐藏和显示
默认mouseover显示tooltip
如何实现鼠标单击显示?
这实际上是segmentfault
的代码框复制功能,如下代码框,右上角会出现一个“复制
”的tooltip,然后单击后会变成“已复制
”的提示
请问vue中如何实现?
代码框演示
点击这个灰色框的右上角可以复制
<el-tooltip :manual="true" v-model="disabled" >
<el-button @click="disabled = !disabled">上左</el-button>
</el-tooltip>
多个tooltip
<el-tooltip v-for="(item, index) in list" :key="index" :manual="true" v-model="item.disabled" :content="item.content">
<el-button @click="toggleDisabled(index)">{{item.content}}</el-button>
</el-tooltip>
list: [{
disabled: true,
content: '直接显示'
},
{
disabled: false,
content: '点击显示'
}]
toggleDisabled(index) {
this.list[index].disabled = !this.list[index].disabled;
}