uniapp封装文字提示气泡框toolTip组件

uniapp封装文字提示气泡框toolTip组件

文字提示气泡框:toolTip
因为uniapp 中小程序中没有window对象,需手动调用 关闭
第一种办法关闭:this.$refs.tooltip.close()
第二种办法关闭:visible.sync = false

移动端没有现成的toolTip组件,所以封装了

效果:

在这里插入图片描述
在这里插入图片描述

<!-- 文字提示气泡框:toolTip -->
<!-- 因为uniapp 中小程序中没有window对象,需手动调用 关闭第一种办法关闭:this.$refs.tooltip.close()第二种办法关闭:visible.sync = false -->
<template><view class="zb-tooltip" :style="{'--theme-bg-color':color}"><view class="zb_tooltip_content" @click.stop="handleClick"><slot></slot><view class="zb_tooltip__popper" @click.stop="()=>{}" :style="[style,{visibility:isShow?'visible':'hidden',color:color==='white'?'':'#fff',boxShadow: color==='white'?'0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d':''}]"><slot name="content">{{content}}</slot><view class="zb_popper__icon" :style="[arrowStyle]" :class="[{'zb_popper__up':placement.indexOf('bottom')===0,'zb_popper__arrow':placement.indexOf('top')===0,'zb_popper__right':placement.indexOf('right')===0,'zb_popper__left':placement.indexOf('left')===0,}]"></view></view></view></view>
</template><script>export default {props: {visible: Boolean,color: {type: String,default: '#FFF',},placement: {type: String,default: 'top',},content: {type: String,default: ''},show: {type: Boolean,default: false,}},data() {return {isShow: this.visible,title: 'Hello',arrowLeft: 0,query: null,style: {},arrowStyle: {}}},onLoad() {},watch: {isShow: {handler(val) {this.$emit('update:visible', val)},immediate: true,},visible: {handler(val) {if (val) {this.$nextTick(() => {this.getPosition()})}this.isShow = val},immediate: true,}},mounted() {// #ifdef H5window.addEventListener('click', () => {this.isShow = false})// #endifthis.getPosition()},methods: {close() {this.isShow = false},fixedWrap() {this.isShow = false},async handleClick() {if (this.isShow) {return this.isShow = false}await this.getPosition()this.isShow = true},getPosition() {return new Promise((resolve) => {uni.createSelectorQuery().in(this).selectAll('.zb_tooltip_content,.zb_tooltip__popper').boundingClientRect(async (data) => {let {left,bottom,right,top,width,height} = data[0]let obj1 = data[1]let objStyle = {}let objStyle1 = {}switch (this.placement) {case 'top':if (obj1.width > width) {objStyle.left = `-${(obj1.width - width)/2}px`} else {objStyle.left = `${Math.abs(obj1.width - width)/2}px`}objStyle.bottom = `${height+8}px`objStyle1.left = (obj1.width / 2 - 6) + 'px'break;case 'top-start':objStyle.left = `0px`objStyle.bottom = `${height+8}px`break;case 'top-end':objStyle.right = `0px`objStyle.bottom = `${height+8}px`objStyle1.right = `8px`break;case 'bottom':if (obj1.width > width) {objStyle.left = `-${(obj1.width - width)/2}px`} else {objStyle.left = `${Math.abs(obj1.width - width)/2}px`}objStyle.top = `${height+8}px`objStyle1.left = (obj1.width / 2 - 6) + 'px'break;case 'bottom-start':objStyle.left = `0px`objStyle.top = `${height+8}px`objStyle1.left = `8px`break;case 'bottom-end':objStyle.right = `0px`objStyle.top = `${height+8}px`objStyle1.right = `8px`break;case 'right':objStyle.left = `${width+8}px`if (obj1.height > height) {objStyle.top = `-${(obj1.height - height)/2}px`} else {objStyle.top = `${Math.abs((obj1.height - height)/2)}px`}objStyle1.top = `${obj1.height/2-6}px`break;case 'right-start':objStyle.left = `${width+8}px`objStyle.top = `0px`objStyle1.top = `8px`break;case 'right-end':objStyle.left = `${width+8}px`objStyle.bottom = `0px`objStyle1.bottom = `8px`break;case 'left':objStyle.right = `${width+8}px`if (obj1.height > height) {objStyle.top = `-${(obj1.height - height)/2}px`} else {objStyle.top = `${Math.abs((obj1.height - height)/2)}px`}objStyle1.top = `${obj1.height/2-6}px`break;case 'left-start':objStyle.right = `${width+8}px`objStyle.top = `0px`objStyle1.top = `8px`break;case 'left-end':objStyle.right = `${width+8}px`objStyle.bottom = `0px`objStyle1.bottom = `8px`break;}this.style = objStyle// 三角形箭头this.arrowStyle = objStyle1resolve()}).exec()})}}}
</script><style lang="scss" scoped>$theme-bg-color: var(--theme-bg-color);.zb-tooltip {position: relative;}.zb_tooltip_content {height: 100%;position: relative;display: inline-block;}.zb_tooltip__popper {background: $theme-bg-color;visibility: hidden;// color:'#fff';position: absolute;margin-top: 3.91rpx;border-radius: 2.56rpx;font-size: 8.59rpx;padding: 0 3.91rpx;min-width: 5.91rpx;word-wrap: break-word;display: inline-block;white-space: nowrap;z-index: 9;}.zb_popper__icon {width: 0;height: 0;z-index: 9;position: absolute;}.zb_popper__arrow {bottom: -5px;/* transform-origin: center top; */border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid $theme-bg-color;}.zb_popper__right {border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-right: 6px solid $theme-bg-color;left: -5px;}.zb_popper__left {border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 6px solid $theme-bg-color;right: -5px;}.zb_popper__up {border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid $theme-bg-color;top: -5px;}.fixed {position: absolute;width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;pointer-events: auto;background: red;z-index: -1;}
</style>

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

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

相关文章

【2024.03.05】定时执行专家 V7.1 发布 - TimingExecutor V7.1 Release

目录 ▉ 软件介绍 ▉ 新版本 V7.1 下载地址 ▉ V7.1 新功能 ▼2024-03-03 V7.1 - 更新日志 ▉ V7.0 新UI设计 ▉ 软件介绍 《定时执行专家》是一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件。软件具有 25 种【任务类型】、12 种【触发器】触发方式&#x…

Linux运维工程师不可或缺的10款工具

运维工程师在日常工作中频繁运用的10款工具&#xff0c;并细致阐述每款工具的功能、适用场景以及其卓越之处。 1. Shell脚本&#xff1a; 功能&#xff1a;主要用于自动化任务和批处理作业。 适用场景&#xff1a;频繁用于文件处理、系统管理、简单的网络管理等操作。 优势&…

unicloud 获取集合collection并请求云数据库

unicloud 获取集合collection并请求数据库 在unicloud 云数据库概念及创建一个云数据库表并添加记录(数据)这一篇文章中,我介绍了unicloud数据库以及如何新建表数据 如果没看过的话可以去看看,然后在看这篇文章,因为这篇文章讲解的是如何获取云数据库的数据集合,要想获取,你得…

后量子时代,未来密码该何去何从?

古有飞鸽&#xff0c;现有网络&#xff0c;在知识经济为基础的信息化社会中&#xff0c;保障网络信息安全无疑成为成为国与国之间无形的较量。小到个人通讯&#xff0c;大到机要信息传输&#xff0c;信息安全对于国家安全和经济活动正常运转至关重要。密码学作为保障网络与信息…

java017 - Java接口

1、接口概述 2、接口特点 代码&#xff1a; jumpping接口&#xff1a; 猫类&#xff1a; 测试类&#xff1a; 3、接口成员特点 代码&#xff1a; 实现 4、类和接口直接的关系 5、抽象类和接口的区别 不合理&#xff1a;不是所有门都具备报警功能&#xff0c;继承和实现都要写…

react native封装ScrollView,实现(滑到底部)和(滑到顶部+手指继续向下滑)时拉取新数据

里面的tw是在react native中使用tailwind的第三方库 只求读者把样式看个大概&#xff0c;主要还是功能的实现 ScrollView的官方文档如下 https://reactnative.cn/docs/scrollview import tw from twrnc import { View, Text, ScrollView, RefreshControl } from react-native …

双体系Java学习之算术运算符,赋值运算符,关系运算符

// 二元运算符//CtrlD : 复制当前行到下一行int a 10;int b 20;int c 25;int d 25;System.out.println(ab);System.out.println(a-b);System.out.println(a*b);System.out.println(a/(double)b);赋值运算符 关系运算符 package operator;public class Demo03 {public stati…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础组件:AlphabetIndexer)

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 AlphabetIndexer(value: {arrayValue: Array<string>, s…

面试管:来,小卡拉米,来个最基本的,说一下Set和Map的理解

听到这个题之后的内心独白&#xff1a; 卧槽&#xff0c;我都是背的高达上&#xff0c;为啥来个基本的&#xff0c;没准备呀&#xff0c;这让我怎么吹牛逼&#xff0c;我特码的面的可是高级呀&#xff0c;不应该问我&#xff1a;项目调优、首屏优化、打包优化等问题吗&#xff…

【教程】 iOS构建版本无效问题解决方案

引言 在进行iOS应用上架时&#xff0c;有时会遇到构建版本无效的问题&#xff0c;即通过XCode上传成功后&#xff0c;但在App Store Connect的TestFlight中无法显示构建版本&#xff0c;或者显示一会儿后就消失了。本文将介绍可能的原因分析&#xff0c;并提供解决问题的方法。…

webpack基础配置及使用

webpack是什么 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图 &#xff0c;其中包含应用程序需要的每个模块&#xff0c;然后将所有这些模块打包成一个或多个 bundle 。主要有 五个核心概念&#xff1a…

电源技术中的TPHR8504PL,LQ(M1W 40V高速同步N沟道150A 功率MOSFET用于高效DC-DC转换器

TPHR8504PL,LQ&#xff08;M1W是一种MOSFET&#xff08;金属氧化物半导体场效应晶体管&#xff09;&#xff0c;它是40 Volt N-沟道MOSFET&#xff0c;由N型沟道和P型衬底构成&#xff0c;而P-沟道MOSFET则由P型沟道和N型衬底构成。 TPHR8504PL,LQ&#xff08;M1W N-沟道MOSFE…

2024 ssh连接linux ,包括连接被拒的解决方案

这里以windows系统 连接 linux&#xff08;centOS&#xff09;为例&#xff1a; 一、如果windows 连接时出现&#xff1a; Permission denied, please try again. 连接被拒绝&#xff0c;做出以下修改&#xff1a; 打开linux - Terminal 输入&#xff1a;cat /etc/ssh/sshd_c…

【算法 高级数据结构】树状数组:一种高效的数据结构(一)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;算法题、 基础算法~赶紧来学算法吧 &#x1f4a1;往期推荐&#xff1a; 【算法基础 & 数学】快速幂求逆元&#xff08;逆元、扩展欧几里得定理、小费马定理&#x…

Python与FPGA——图像锐化

文章目录 前言一、图像锐化二、Python robert锐化三、Python sobel锐化四、Python laplacian锐化五、FPGA sobel锐化总结 前言 在增强图像之前一般会先对图像进行平滑处理以减少或消除噪声&#xff0c;图像的能量主要集中在低频部分&#xff0c;而噪声和图像边缘信息的能量主要…

品牌要把控质量也要管控价格

在品牌发展的道路上&#xff0c;产品质量的把控非常重要&#xff0c;关系到品牌的竞争力&#xff0c;但品牌要长期发展&#xff0c;产品要获得市场足够份额&#xff0c;还需要有稳定的价格体系做支撑&#xff0c;这个价格不是仅凭品牌单方面的定价而定&#xff0c;而是整个渠道…

Oracle定时任务和存储过程

--1.声明定时任务 DECLAREjob NUMBER; BIGIN dbms_job.sumit(job, --任务ID,系统定义的test_prcedure(19)&#xff0c;--调用存储过程&#xff1f;to_date(20240305 02:00&#xff0c;yyyymmdd hh24:mi) --任务开始时间sysdate1/(24*60) --任务执行周期 [每分钟执行…

商业前端TS开发自动化工具

本期作者 一、背景 商业侧的业务比较复杂&#xff0c;B端项目中含有大量常量类的类型判断&#xff0c;且因历史原因&#xff0c;很多常量值前端无法直接知其含义&#xff0c;这既不利于新人的上手&#xff0c;也不利于项目的维护。 在开发协作上&#xff0c;前后端的API沟通&a…

什么是工业边缘网关?工业边缘网关有什么作用?

在数字化和智能化的浪潮下&#xff0c;工业领域正迎来前所未有的变革。其中&#xff0c;工业边缘网关作为这场变革中的重要角色&#xff0c;正逐渐受到人们的关注。那么&#xff0c;什么是工业边缘网关&#xff1f;它如何在工业数字化中发挥作用&#xff1f;今天&#xff0c;就…

Wireshark——获取捕获流量的前N个数据包

1、问题 使用Wireshark捕获了大量的消息&#xff0c;但是只想要前面一部分。 2、方法 使用Wireshark捕获了近18w条消息&#xff0c;但只需要前5w条。 选择文件&#xff0c;导出特定分组。 输入需要保存的消息范围。如&#xff1a;1-50000。 保存即可。