Table of contents
In the actual development process, my front-end project needs to implement a small function, which is to display the actual jump address link when the mouse moves to the jump button.
achieve effect
HTML
Add a div tag in the el-tooltip tag, use slot="content" on the div tag, the content in the div is the prompt content displayed when the mouse rolls over.
<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/");
},Save the vue file and open it with a browser. At this time, you can see that the content that the mouse slides over is displayed as custom content.