vue中如何给el-radio添加tooltip并实现点击跳转

最新推荐文章于 2026-05-11 21:21:06 发布

原创最新推荐文章于 2026-05-11 21:21:06 发布 · 2.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

原创分享

当前文章被收录于：

原创分享

9 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Element UI中使用Tooltip组件，并结合Vue.js实现动态内容展示及路由跳转功能。通过设置toolTipDisable控制提示框显示，利用slot插入自定义内容，最后通过goToRout()方法打开新窗口并跳转至指定路由。

<el-tooltip :disabled="toolTipDisable" placement="bottom" effect="light">
    <div slot="content" @click="goToRout()">{{toolTipContent}}</div>
    <el-radio label="3">New Youk</el-radio>
</el-tooltip>


goToRout(){
   let routeData = this.$router.resolve({name: '/your url', params: {active:'1'}});
   window.open(routeData.href, '_blank');
}

说明：
（1）toolTipDisable：可控制tooltip是否可用
（2）slot=“content”：表示tooltip提示的内容指定已DOM格式插入到页面
（3）goToRout()：路由跳转方法
（4）toolTipContent：提示的内容信息
欢迎大家访问我的个人博客：http://blog.ycsn.xyz/