阳谷网站建设网络推广,北京做网站推广一个月多少钱,网站做附近地图导航,触动网站建设uniapp封装文字提示气泡框toolTip组件 文字提示气泡框#xff1a;toolTip 因为uniapp 中小程序中没有window对象#xff0c;需手动调用 关闭 第一种办法关闭#xff1a;this.$refs.tooltip.close() 第二种办法关闭#xff1a;visible.sync false 移动端没有现成的toolTip组…uniapp封装文字提示气泡框toolTip组件 文字提示气泡框toolTip 因为uniapp 中小程序中没有window对象需手动调用 关闭 第一种办法关闭this.$refs.tooltip.close() 第二种办法关闭visible.sync false 移动端没有现成的toolTip组件所以封装了
效果 !-- 文字提示气泡框toolTip --
!-- 因为uniapp 中小程序中没有window对象需手动调用 关闭第一种办法关闭this.$refs.tooltip.close()第二种办法关闭visible.sync false --
templateview classzb-tooltip :style{--theme-bg-color:color}view classzb_tooltip_content click.stophandleClickslot/slotview classzb_tooltip__popper click.stop(){} :style[style,{visibility:isShow?visible:hidden,color:colorwhite?:#fff,boxShadow: colorwhite?0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d:}]slot namecontent{{content}}/slotview classzb_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
/templatescriptexport 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 ${height8}pxobjStyle1.left (obj1.width / 2 - 6) pxbreak;case top-start:objStyle.left 0pxobjStyle.bottom ${height8}pxbreak;case top-end:objStyle.right 0pxobjStyle.bottom ${height8}pxobjStyle1.right 8pxbreak;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 ${height8}pxobjStyle1.left (obj1.width / 2 - 6) pxbreak;case bottom-start:objStyle.left 0pxobjStyle.top ${height8}pxobjStyle1.left 8pxbreak;case bottom-end:objStyle.right 0pxobjStyle.top ${height8}pxobjStyle1.right 8pxbreak;case right:objStyle.left ${width8}pxif (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}pxbreak;case right-start:objStyle.left ${width8}pxobjStyle.top 0pxobjStyle1.top 8pxbreak;case right-end:objStyle.left ${width8}pxobjStyle.bottom 0pxobjStyle1.bottom 8pxbreak;case left:objStyle.right ${width8}pxif (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}pxbreak;case left-start:objStyle.right ${width8}pxobjStyle.top 0pxobjStyle1.top 8pxbreak;case left-end:objStyle.right ${width8}pxobjStyle.bottom 0pxobjStyle1.bottom 8pxbreak;}this.style objStyle// 三角形箭头this.arrowStyle objStyle1resolve()}).exec()})}}}
/scriptstyle langscss 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
