【前端】（初学vue3+TS）修改tooltip样式，自定义有按钮的弹出框

最新推荐文章于 2024-08-14 16:08:51 发布

洛尧

最新推荐文章于 2024-08-14 16:08:51 发布

阅读量779

点赞数

分类专栏：前端文章标签：前端 javascript vue.js css

本文链接：https://blog.csdn.net/qq_43144103/article/details/129375094

版权

本文介绍了在Vue3项目中，结合TypeScript如何自定义Element Plus的Tooltip组件样式，包括如何添加按钮，并讨论了使用popper-class进行样式调整以及可能的全局样式污染问题。

摘要由CSDN通过智能技术生成

组件用法见element-plus官网。
做出有按钮的tooltip，修改tooltip的样式，用deep不太好使，因为你用控制台选不中它，光标一挪开就没了。给它加popper-class然后慢慢调吧。这样做的坏处是（不加scoped）会全局样式污染。
在这里插入图片描述

<template>
  <div class="cmain">
    <div class="right">
      <div
        v-for="(item,index) in mapTools"
        :key="index"
        :class="[
          'center',
          item.selected? 'active': '',
        ]"
        @click="changeTool(item)"
      >
        <el-tooltip v-if="item.name =='view'"  effect="dark" :content="item.label" placement="left" popper-class="popper">
          <img :src="item.icon" />
          <template #content > 
            <div class="inner">
              <div
                v-for="(item,index) in viewType"
                :key="index"
                :class="[
                  'center',
                  item.selected? 'active': '',
                ]"
                @click="changeViewType(item)"
              >
              {
   {
    item.label }}
            </div>
            </div>
          </template>
        </el-tooltip>
        <el-tooltip v-if="item.name !='view'"  effect="dark" :content="item.label" placement="left">

最低0.47元/天解锁文章