气泡弹框

Bubble Popup:最常见的右上角弹出菜单,可以做聊天对话框使用。可设置不同方向。

组件结构

<template>
	<view :class="{ 'tui-flex-end': flexEnd }">
		<view class="tui-popup-list" :class="{ 'tui-popup-show': show,'tui-z_index':show && position!='relative' }" :style="{ width: width, backgroundColor: backgroundColor, borderRadius: radius, color: color, position: position, left: left, right: right, bottom: bottom, top: top,transform:`translate(${translateX},${translateY})` }">
			<view class="tui-triangle" :style="{
					borderWidth: borderWidth,
					borderColor: `transparent transparent ${backgroundColor} transparent`,
					left: triangleLeft,
					right: triangleRight,
					top: triangleTop,
					bottom: triangleBottom
				}"
			 v-if="direction == 'top'"></view>
			<view class="tui-triangle" :style="{
					borderWidth: borderWidth,
					borderColor: `${backgroundColor}  transparent transparent transparent`,
					left: triangleLeft,
					right: triangleRight,
					top: triangleTop,
					bottom: triangleBottom
				}"
			 v-if="direction == 'bottom'"></view>
			<view class="tui-triangle" :style="{
					borderWidth: borderWidth,
					borderColor: `transparent  ${backgroundColor} transparent transparent`,
					left: triangleLeft,
					right: triangleRight,
					top: triangleTop,
					bottom: triangleBottom
				}"
			 v-if="direction == 'left'"></view>
			<view class="tui-triangle" :style="{
					borderWidth: borderWidth,
					borderColor: `transparent transparent  transparent ${backgroundColor}`,
					left: triangleLeft,
					right: triangleRight,
					top: triangleTop,
					bottom: triangleBottom
				}"
			 v-if="direction == 'right'"></view>
			<slot />
		</view>
		<view @touchmove.stop.prevent="stop" class="tui-popup-mask" :class="{ 'tui-popup-show': show }" :style="{ backgroundColor: maskBgColor }"
		 v-if="mask" @tap="handleClose"></view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiBubblePopup',
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
width String 宽度 300rpx
radius String popup圆角 8rpx
left String 定位 left值 auto
right String right值 auto
top String top值 auto
bottom String bottom值 auto
translateX String 水平方向移动距离 0
translateY String 垂直方向移动距离 0
backgroundColor String 背景颜色 #4c4c4c
color String 字体颜色 #fff
borderWidth String 三角border-width 12rpx
direction String 三角形方向 top left right bottom top
triangleLeft String 三角定位left值 auto
triangleRight String 三角定位right值 auto
triangleTop String 三角定位top值 auto
triangleBottom String 三角定位bottom值 auto
position String 定位 relative absolute fixed fixed
flexEnd Boolean flex-end false
mask Boolean 是否需要mask true
maskBgColor String 遮罩背景色 rgba(0, 0, 0, 0.4)
show Boolean 控制显示 false

methods

名称 描述
@close 遮罩点击事件,关闭弹框

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/bubble/bubble

H5二维码

小程序二维码