vue3使用el-tooltip插槽达到换行效果

更新时间：2023年08月31日 15:41:14 作者：燕哥学前端

本文主要介绍了vue3使用el-tooltip插槽达到换行效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

el-tooltip的content属性中的内容可以使用插槽来替换

话不多说，直接上代码

<el-tooltip effect="light" placement="top-start">
      <div slot="content" class="tips">  // 在这里运用插槽
          <p class="tip-text">
            我是页面中展示的内容
          </p>
      </div>
      <template #content>  // 这里是插槽中的内容
        <p class="content">
          我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 
          我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容 我是tooltip中的内容
        </p>
      </template>
</el-tooltip>
<style>
.content {
  max-width: 200px; // 设置一个最大宽度
  white-space: pre-wrap; // 超出这个宽度就直接换行
}
</style>

最后放上效果对比图，如果觉得有帮到你，可以给我一个赞吗😜没换行前的效果

换行后的效果

到此这篇关于vue3使用el-tooltip插槽达到换行效果的文章就介绍到这了,更多相关vue3 el-tooltip插槽换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 解决form表单提交但不跳转页面的问题
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue实例的对象参数options的几个常用选项详解
今天小编就为大家分享一篇Vue实例的对象参数options的几个常用选项详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
使用vue-router与v-if实现tab切换遇到的问题及解决方法
这篇文章主要介绍了vue-router与v-if实现tab切换的思考,需要的朋友可以参考下
2018-09-09
详解vue 组件
这篇文章主要介绍了详解vue 组件的相关知识，文中讲解非常细致，代码供大家参考学习，感兴趣的朋友可以了解下
2020-06-06
vue属性props默认类型的写法介绍
这篇文章主要介绍了vue属性props默认类型的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue将html页面生成高清晰pdf文件的方法
最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下
2022-03-03
vue实现图形验证码登录
这篇文章主要为大家详细介绍了vue实现图形验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
Vue路由实现页面跳转的示例代码
根据登录的角色不一样,实现不同的路由展示，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2024-04-04
vue实现excel表格的导入导出的示例
本文主要介绍了vue实现excel表格的导入导出的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue遍历生成的输入框绑定及修改值示例
今天小编就为大家分享一篇vue遍历生成的输入框绑定及修改值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10

vue3使用el-tooltip插槽达到换行效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具