目录
在实际开发过程中,我的前端项目需要实现一个小小的功能,就是当鼠标移动到跳转按钮上的时候显示实际跳转的地址链接。
实现效果
HTML
在el-tooltip标签里面添加一个div标签,在div标签上使用slot="content",div里面的内容就是鼠标滑过显示的提示内容。
<el-tooltip effect="white" placement="top">
<div slot="content">{{formDetail.assetNavigation}}</div>
<el-button
icon="el-icon-search"
v-model="formDetail.assetNavigation"
:style="{width: '60%'}"
class="underline"
@click="jump()">点击跳转
</el-button>
</el-tooltip>
data
data() {
return {
formDetail: {
assetNavigation: "https://www.baidu.com/"
}
}
}
methods
jump() {
// location.href="https://www.baidu.com/" //当前页面打开
// window.open(this.form.assetNavigation);//新的页面打开页面 https://www.baidu.com/
window.open("https://www.baidu.com/");
},
保存vue文件后使用浏览器打开,这时候就可以看到鼠标滑过内容显示为自定义的内容了。