element-ui 的el-tooltip的样式修改及添加事件

一个假的前端男

于 2021-04-23 15:54:10 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/116059280

vue 专栏收录该内容

79 篇文章

订阅专栏

这个博客内容展示了如何在用户界面中添加商品，提供了两个选项供用户选择：实物商品和三方权益。用户可以通过点击对应的按钮，利用路由跳转进行选择。样式设置使得提示信息更加醒目，为用户提供清晰的操作指引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 <el-tooltip placement="bottom-end" effect="light" popper-class="testtooltip">
   <div slot="content" @click="$router.push('/')" class="content" >实物商品</div>
   <div
     slot="content"
     @click="$router.push('/shopMall/integralShop1')"
     class="content"
   >三方权益</div>
   <el-button type="primary">
     <div class="add">
       <span>添加商品</span>
       <span style="margin-top:-2px;margin-left:8px;font-size:16px">|</span>
       <span>
         <i class="el-icon-arrow-down" style="margin-top:-2px;margin-left:5px"></i>
       </span>
     </div>
   </el-button>
 </el-tooltip>

<style>
.testtooltip {
  background: white !important;
  box-shadow: 1px 1px 10px 3px #d3d3d6;
}
.el-tooltip__popper.is-light {
  border: none;
}
</style>