基于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,一经查实,立即删除!

相关文章

es6复习笔记】数值扩展(16)

介绍 在 JavaScript 中&#xff0c;数值扩展提供了一些额外的功能&#xff0c;使得处理数值变得更加方便。本教程将介绍一些常用的数值扩展方法和属性。 1. Number.EPSILON Number.EPSILON 是 JavaScript 表示的最小精度。它的值接近于 2.2204460492503130808472633361816E-…

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 继续问 索引的底层数据结构…

《OpenCV计算机视觉》-对图片的各种操作(均值、方框、高斯、中值滤波处理)及形态学处理

文章目录 《OpenCV计算机视觉》-对图片的各种操作&#xff08;均值、方框、高斯、中值滤波处理&#xff09;边界填充阈值处理图像平滑处理生成椒盐图片均值滤波处理方框滤波处理高斯滤波处理中值滤波处理 图像形态学腐蚀膨胀开运算闭运算顶帽和黑帽 《OpenCV计算机视觉》-对图片…

selenium学习笔记(二)

文章目录 前言设计模式POMPOM概念POM优势POM设计原则POM的实现 selenium的常用操作处理动态元素截图操作勾选复选框多层框架/窗口定位操作下拉框上传文件操作处理弹窗切换窗口拖拽操作 如何处理浏览器驱动更新导致的问题selenium与网站监控监听网页内容变化监控网络请求 seleni…

spring boot的配置文件属性注入到类的静态属性

假设我们有一个名为some.property的属性&#xff0c;它在Spring配置文件中定义了值&#xff0c;例如application.properties或application.yml。 1. 非静态字段 为什么推荐&#xff1f; 简单直接&#xff1a;不需要额外的配置或复杂的逻辑。符合Spring的设计理念&#xff1a…

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;才能匹配到后继物料

LSTM实现天气模型训练与预测

要实现一个天气预测的模型&#xff0c;并确保该模型可以反复进行训练和更新&#xff0c;先设计&#xff1a; 设计方案 数据获取&#xff1a; 使用公开的天气数据API&#xff08;例如OpenWeather API或其他类似的API&#xff09;获取天气数据。确保数据以合适的格式&#xff08…

tcp 的重传,流量控制,拥塞控制

tcp 的重传解决了什么问题tcp的几种重传机制分别解决什么问题?方案 1: 超时重传方案2: 快速重传选择性确认(sack)d-sack(重复接收) 滑动窗口:累计应答 流量控制解决什么问题?如何做的?问题1: 那如果第一次发送的数据都大于缓冲区的大小怎么办?问题2: 如果剩余大小为0会发生…

Electron -- Electron应用主要核心(二)

Electron 应用主要由以下几个核心组成部分构成&#xff1a; 主进程&#xff08;Main Process&#xff09;&#xff1a; Electron 应用的入口点是主进程&#xff0c;通常是 main.js 文件。它负责管理应用的生命周期&#xff0c;包括创建窗口、处理系统事件和应用更新等。主进程可…

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

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

如何使用 TypeScript 和 Jest 编写高质量单元测试

前言 在前端开发中&#xff0c;TypeScript 和 Jest 是两款不可或缺的工具。TypeScript 提供了强大的静态类型检查和现代 JavaScript 特性&#xff0c;显著提高了代码的可靠性和可维护性。而 Jest 作为一个功能丰富的测试框架&#xff0c;能够方便地编写和运行各种测试&#xf…

在数据采集中,动态代理如何模拟不同地区的用户行为?

在数据采集的广阔领域中&#xff0c;动态代理IP扮演着一个关键角色&#xff0c;它能够模拟不同地区的用户行为&#xff0c;为我们提供了一种强大的工具来收集和分析数据。这篇文章将带你深入了解动态代理如何在数据采集中发挥作用&#xff0c;以及它是如何帮助我们模拟全球各地…

停车管理系统:构建安全、便捷的停车环境

Tomcat 简介 只要学习Java Web项目就不得不学习Tomcat。Tomcat是一种免费的开源的一种Java Web项目的容器&#xff0c;完美继承了 Apache服务器的特性&#xff0c;并且里面添加可以自动化运行的Java Web组件&#xff0c;让Java Web项目可以完全的运行到Tomcat里面。对于特大型项…