lineage-app/components/views/t-rt-popup/t-rt-popup1.vue

<template>
	<view>
		<tui-bubble-popup :show="popupShow" @close="toggle" :maskBgColor="maskBgColor" right="8px" :top="popupTop" triangleRight="16px" triangleTop="-22rpx"  width="90px">
			<view @tap="scan" class="tui-popup-item tui-start" hover-class="tui-item-active" :hover-stay-time="150">
			    <tui-icon name="sweep" color="#fff" :size="20"></tui-icon>
				<text class="tui-bubble-popup_title">扫一扫</text>
			</view>
			<view @tap="configure" class="tui-popup-item tui-start" hover-class="tui-item-active" :hover-stay-time="150">
			    <tui-icon name="setup" color="#fff" :size="20"></tui-icon>
				<text class="tui-bubble-popup_title">系统设置</text>
			</view>
			<view @tap="settings" class="tui-popup-item tui-start" hover-class="tui-item-active" :hover-stay-time="150">
			    <tui-icon name="camera-add" color="#fff" :size="20"></tui-icon>
				<text class="tui-bubble-popup_title">管理设置</text>
			</view>
		</tui-bubble-popup>
	</view>
</template>

<script>
	import tuiIcon from '@/components/thorui/tui-icon/tui-icon';
	import tuiBubblePopup from '@/components/thorui/tui-bubble-popup/tui-bubble-popup';
//右上角气泡弹层
export default {
	components: {
		tuiIcon,
		tuiBubblePopup
	},
	name: 'tRtPopup',
	props: {
		//如果图标是image，则icon传入图片地址
		itemList: {
			type: Array,
			default: () => {
				return [
					{
						title: '关闭',
						icon: 'close'
					}
				];
			}
		},
		//遮罩背景色
		maskBgColor: {
			type: String,
			default: 'transparent'
		},
		//图标是否为图片
		isImage:{
			type: Boolean,
			default: false
		},
		//图标宽度
		width:{
			type: String,
			default: '40rpx'
		},
		//图标高度
		height:{
			type: String,
			default: '40rpx'
		}
		
	},
	created() {
		this.popupTop = 0 + uni.upx2px(12) + 'px';
		// #ifdef H5
		this.popupTop = 44 + uni.upx2px(12) + 'px';
		// #endif
	},
	data() {
		return {
			popupShow: false,
			popupTop: '12rpx'
		};
	},
	methods: {
		settings: function() {
			uni.navigateTo({
				url: './settings'
			});
		},
		scan: function() {
			uni.scanCode({
			　　　　　onlyFromCamera: true, //为true只允许相机扫码，不加允许相册扫码
			        success: function(res) {
			            console.log('条码类型：' + res.scanType);
			            console.log(res.scanType + ':'  + res.result);
			        }
			    })
		},
		configure: function() {
			uni.navigateTo({
				url: '../main/configure/configure'
			});
		},
		handleClick(index) {
			this.$emit('click', { index: index });
			this.toggle()
		},
		toggle() {
			this.popupShow = !this.popupShow;
		}
	}
};
</script>

<style lang="scss" scoped>
.tui-popup-item {
	padding: 10rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #888;
		-webkit-transform: scaleY(0.5);
		transform: sc8aleY(0.5);
		bottom: 0;
		right: 0;
		left: 38rpx;
	}

	.tui-bubble-popup_title {
		padding-left: $uni-spacing-row-base;
	}
}

.tui-start {
	border-top-left-radius: 8rpx;
	border-top-right-radius: 8rpx;
}

.tui-last {
	border-bottom-left-radius: 8rpx;
	border-bottom-right-radius: 8rpx;
	&::after {
		border-bottom: 0 !important;
	}
}

.tui-item-active {
	background-color: #444;
}
</style>