基于vue-popperjs的二次封装弹窗

前言:

基于vue-popperjs的二次封装

代码

<template><!-- 1. :appendToBody="true"是否把位置加到body外层标签上饿了么UI和antD是true,iview和vuetifyjs是false2. trigger属性触发方式,常用hover悬浮触发、clickToOpen鼠标点击触发3. :visibleArrow="true"默认显示三角形小箭头,但是可以修改也可以使用伪元素自定义其对应样式,这样更加自由灵活一些4. :options="{ ... } 其实就是popper.js的配置项,可看对应官方文档5. placement: placement 即为tooltip出现的位置,有12个位置,即:placementArr6. modifiers: { ... } 此修饰符配置对象主要是控制定位的相关参数7. offset即偏移量在原有位置上进行移动微调,这里暂时不设置了,直接使用给.popper加上外边距即可margin: 12px !important;8. computeStyle.gpuAcceleration = false 关闭css3的transform定位,因为要自定义9. preventOverflow.boundariesElement = 'window' 防止popper元素定位到边界外如:当左侧距离不够用的时候,即使设置placement='left'但是tooltip依旧会在右侧10. <div class="popper" /> 此标签是tooltip的容器,所以我们可以设置对应想要的样式11. rootClass="selfSetRootClass"搭配transition="fade"实现淡入淡出过渡效果12. slot="reference"命名插槽是触发tooltip打开/关闭的dom元素13. disabled是否关闭这个tooltip--><popper :appendToBody="true" :trigger="trigger" :visibleArrow="false" :options="{placement: placement,modifiers: {offset: {offset: 0,},computeStyle: {gpuAcceleration: false,},preventOverflow: {boundariesElement: 'window',},},}" rootClass="selfSetRootClass" transition="fade" :disabled="disabled"><!-- 内容过多的时候,建议使用content插槽,便于自定义样式 --><div v-if="$slots.content" :class="{ isLightPopper: light }" ref="popperRef" class="popper" :style="tooltipStyle"><slot name="content"></slot></div><!-- 内容少的话,直接content属性 --><div v-else :class="{ isLightPopper: light }" ref="popperRef" class="popper" :style="tooltipStyle">{{ content }}</div><!-- 把外界传递的普通插槽当做具名插槽传递给子组件使用 --><slot slot="reference"></slot></popper>
</template><script>
// 基于vue-popperjs的二次封装
import popper from "vue-popperjs"; // vue-popperjs基于popper.js二次封装
import "vue-popperjs/dist/vue-popper.css";
// 总共12个位置
const placementArr = ["top","top-start","top-end","left","left-start","left-end","right","right-start","right-end","bottom","bottom-start","bottom-end",
];
export default {name: "myTooltip",components: { popper }, // 注册并使用vue-popperjs插件组件props: {// 12个tooltip位置placement: {type: String,default: "top", // 默认validator(val) {return placementArr.includes(val); // 位置校验函数},},trigger: {type: String,default: "hover",},// 内容(同内容插槽,不过内容插槽的权重高一些)content: {type: String,default: "",},// 是否是亮色模式,默认是暗色模式light: {type: Boolean,default: false,},// 是否禁用即关掉tooltipdisabled: {type: Boolean,default: false,},tooltipStyle: {type: Object,default: () => {return {}}},},
};
</script><style lang="less">
// 覆盖部分默认的样式(不用加/deep/ )
.popper {box-sizing: border-box;padding: 6px 6px;border-radius: 3px;color: #fff;background-color: #333;
}// 设置一个tootip的外边距(也可以使用offset)
.popper[x-placement^="top"] {margin-bottom: 12px !important;
}.popper[x-placement^="bottom"] {margin-top: 12px !important;
}.popper[x-placement^="left"] {margin-right: 12px !important;
}.popper[x-placement^="right"] {margin-left: 12px !important;
}// 加上过渡效果(搭配transition="fade")
.selfSetRootClass {transition: all 0.6s;
}.fade-enter,
.fade-leave-to {opacity: 0;
}.fade-enter-active,
.fade-leave-active {transition: opacity 0.6s;
}// 亮色模式样式
.isLightPopper {color: #333;background-color: #fff;filter: drop-shadow(0, 2px, 12px, 0, rgba(0, 0, 0, 0.24));box-shadow: 0, 2px, 12px, 0, rgba(0, 0, 0, 0.24);
}</style>

使用

<toolTip :disabled="visible" v-if="item" :tooltipStyle="tooltipStyle" :content="`${item[element.option.cardBottom.keyStatus.count]}`"><span data-value="alarms" class="bottomvalueClass">{{item[count]}}</span>
</toolTip>tooltipStyle () {return {width: `${tooltip.width}px!important`,backgroundImage: `url(${tooltip.imageUrl})!important`,background: '',border: `${tooltip.borderWidth}px solid ${tooltip.borderColor}!important`,fontFamily: `${tooltip.fontFamily}!important`,fontSize: `${tooltip.fontSize}px!important`,color: `${tooltip.fontColor}!important`,textAlign: `${tooltip.textDecoration}!important`}},

效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenAI 普及 ChatGPT,开通热线电话,近屿智能深耕AI培训

12月19日&#xff0c;在OpenAI直播活动的第10天&#xff0c;宣布允许用户通过电话或WhatsApp与ChatGPT进行交互。并在美国推出 ChatGPT 热线电话&#xff0c;用户拨打后可与 ChatGPT 进行语音对话。 这项服务的一个亮点在于它兼容各种类型的通信设备——不论是现代智能手机如iP…

黑马Java面试教程_P9_MySQL

系列博客目录 文章目录 系列博客目录前言1. 优化1.1 MySQL中&#xff0c;如何定位慢查询&#xff1f;面试文稿 1.2 面试官接着问&#xff1a;那这个SQL语句执行很慢,如何分析 ( 如何优化&#xff09;呢?面试文稿 1.3 了解过索引吗?(什么是索引)1.4 继续问 索引的底层数据结构…

Vue3+@antv/g2plot 生成词云图

antv/g2plot 是一个基于 AntV 的图表库属于antv库的一部分 用于快速创建各种类型的图表 支持折线图、柱状图、饼图、散点图等多种图表类型 antv/g2plot 属于antv库的一部分 g2plot是在g2基础上封装的 npm install antv/g2plot --save效果 所有值共享一个颜色并且每次刷新颜色随…

K线单边突破指标(附带源码)

编写需求&#xff1a; 今天我们来根据粉丝要求进行源码复现&#xff1a; 【请根据最近两根K线判断当下的行情做多&#xff0c;做空方向。用三个价格判断当前K线状态&#xff0c;最高价、最低价、收盘价都大于昨日对应价格&#xff0c;为上涨K线。用三个价格判断当前K线状态&a…

LabVIEW电机控制中的主动消抖

在LabVIEW电机控制系统中&#xff0c;抖动现象&#xff08;如控制信号波动或机械振动&#xff09;会影响系统的稳定性和精度。通过使用主动消抖算法&#xff0c;可以有效降低抖动&#xff0c;提高控制性能。本文将介绍几种主流的主动消抖算法&#xff0c;并结合具体应用案例进行…

【安全测试相关知识】

安全测试介绍 背景 在当前信息技术快速发展的背景下&#xff0c;网络安全问题日益严峻&#xff0c;数据泄露、黑客攻击、病毒传播等安全事件层出不穷&#xff0c;给个人、企业乃至国家带来严重威胁。所以安全测试已成为企业和国家关注的重心 作用 安全测试是确保软件系统安…

重温设计模式--工厂模式(简单、工厂、抽象)

文章目录 工厂模式定义工厂模式通常可以细分为以下几种类型1、简单工厂模式&#xff08;Simple Factory Pattern&#xff09;2、工厂方法模式&#xff08;Factory Method Pattern&#xff09;3、抽象工厂模式&#xff08;Abstract Factory Pattern) UML 图1、简单工厂模式UML2、…

SAP PP 后继物料触发条件

问题&#xff1a; 物料主数据 MRP4维护了后继物料&#xff0c;该物料库存为0&#xff0c;但是做生成订单时候&#xff0c;查看BOM没有显示未后续无力啊 原因 需要在生成订单中点击可用性检查&#xff0c;才能出发对库存校验&#xff0c;才能匹配到后继物料

联通光猫怎么自己改桥接模式?

环境&#xff1a; 联通光猫 ZXHN F677V9 硬件版本号 V9.0 软件版本号 V9.0.0P1T3 问题描述&#xff1a; 联通光猫怎么自己改桥接模式 家里用的是ZXHN F677V9 光猫&#xff0c;最近又搞了个软路由&#xff0c;想改桥接模式 解决方案&#xff1a; 1.拿到最新超级密码&…

商场消防电气控制系统设计(论文+源码)

1系统的功能及方案设计 如图2.1所示为本次设计的整体框图&#xff0c;其中单片机部分采用ST89C52来负责协调各个模块&#xff1b;液晶选择LCD1602液晶屏来显示信息;温度传感器选择PT1000进行温度的检测&#xff1b;烟雾传检测选择MQ2烟雾传感器&#xff1b;CO2检测选择CCS811模…

Springboot3声明式客户端

简介 Spring Framework 6 和 Spring Boot 3 引入了一些新的特性和改进&#xff0c;以简化 HTTP API 的消费。它允许开发者通过声明式接口来定义对外部 HTTP API 的调用。其中开发者只需要定义接口和方法签名&#xff0c;而具体的实现细节由框架自动生成。 这个特性通常被称为…

信贷域——互联网金融体系

摘要 本文介绍了互联网金融的概念、特征、发展阶段和生态。互联网金融是互联网与金融结合的新兴模式&#xff0c;以大数据、云计算为基础&#xff0c;实现资金融通和支付。发展经历了技术支持、业务领域深入到金融业务领域三个阶段。互联网金融生态包括互联网支付、P2P网络借贷…

精通Redis

目录 1.NoSQL 非关系型数据库 2.Redis 3.Redis的java客户端 4.Jedis 4.1Jedis快速入门 4.2Jedis连接池及使用 5.SpringDataRedis和RedisTemplate 6.SpringDataRedis快速入门 7.RedisSerializer 1.NoSQL 非关系型数据库 基础篇-02.初始Redis-认识NoSQL_哔哩哔哩_bilib…

LabVIEW水泵性能测试系统

在现代工业应用中&#xff0c;水泵作为一种广泛使用的流体输送设备&#xff0c;其性能的可靠性对整个生产系统的稳定运行至关重要。通过LabVIEW软件配合专业硬件设备&#xff0c;设计了一套水泵性能测试系统&#xff0c;实现对各类水泵的综合性能测试与分析&#xff0c;提升水泵…

2.利用docker进行gitlab服务器迁移

一、Docker安装 安装Ubuntu 22.04.3 LTS \n \l 1、旧版本安装包清理 sudo apt-get remove docker docker-engine docker.io containerd runc当你卸载Docker时&#xff0c;存储在/var/lib/docker/中的图像、容器、卷和网络不会自动删除。如果你想从一个干净的安装开始&#x…

无人零售 4G 工业无线路由器赋能自助贩卖机高效运营

工业4G路由器为运营商赋予 “千里眼”&#xff0c;实现对贩卖机销售、库存、设备状态的远程精准监控&#xff0c;便于及时补货与维护&#xff1b;凭借强大的数据实时传输&#xff0c;助力深度洞察销售趋势、优化库存、挖掘商机&#xff1b;还能远程升级、保障交易安全、快速处理…

zabbix监控山石系列Hillstone监控模版(适用于zabbix7及以上)

监控项&#xff1a; 触发器&#xff1a; 监控数据如下&#xff1a;

【论文阅读笔记】Scalable, Detailed and Mask-Free Universal Photometric Stereo

【论文阅读笔记】Scalable, Detailed and Mask-Free Universal Photometric Stereo 前言摘要引言Task 相关工作方法SDM-UniPS预处理尺度不变的空间光特征编码器像素采样变压器的非局部交互 PS-Mix数据集 实验结果训练细节评估和时间&#xff1a; 消融实验定向照明下的评估没有对…

【MySQL】7.0 入门学习(七)——MySQL基本指令:帮助、清除输入、查询等

1.0 help &#xff1f; 帮助指令&#xff0c;查询某个指令的解释、用法、说明等。详情参考博文&#xff1a; 【数据库】6.0 MySQL入门学习&#xff08;六&#xff09;——MySQL启动与停止、官方手册、文档查询 https://www.cnblogs.com/xiaofu007/p/10301005.html 2.0 在cmd命…