devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：代码探险家 | 2024-08-15 23:39:59

赞

踩

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 H5
			window.addEventListener('click', () => {
				this.isShow = false
			})
			// #endif
			this.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 = objStyle1
							resolve()
						}).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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/985658
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号