低代码高性能原生UI框架

Appearance

本页导读

Popover ​

组件类型：UxPopoverComponentPublicInstance

支持任何位置弹出并且自动计算在适当的位置显示

平台兼容性 ​

UniApp X ​

AndroidiOSweb鸿蒙 Next小程序
√√√x√

UniApp Vue Nvue ​

AndroidiOSweb鸿蒙 Next小程序
xx√xx

Props ​

属性名类型默认值说明
targetIdString目标id
widthAny宽度
offsetAny10偏移
alignBooleanfalse与目标水平对齐
backgroundColorString#000000背景色
showMaskBooleantrue显示遮罩
showBlurBooleanfalse开启模糊背景
blurRadiusNumber10模糊半径
blurColorStringrgba(10,10,10,0.3)模糊颜色
opacityNumber$ux.Conf.maskAlpha遮罩透明度0-1
zIndexNumber10001层级z-index

Events ​

事件名说明参数
change显示状态改变时触发

示例代码 ​

html
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="弹出层" :bold="true">
				<ux-text text="支持任何位置弹出并且自动计算在适当的位置显示"></ux-text>
			</ux-card>
		</ux-scroll>
		
		<view id="lt" class="lt">
			<ux-button theme="primary" text="左上" @click="click('lt', false)"></ux-button>
		</view>
		<view id="ct" class="ct">
			<ux-button theme="primary" text="中上 - 水平对齐" @click="click('ct', true)"></ux-button>
		</view>
		<view id="rt" class="rt">
			<ux-button theme="primary" text="右上" @click="click('rt', false)"></ux-button>
		</view>
		<view id="lc" class="lc">
			<ux-button theme="primary" text="左中" @click="click('lc', false)"></ux-button>
		</view>
		<view id="c" class="c">
			<ux-button theme="primary" text="中" @click="click('c', false)"></ux-button>
		</view>
		<view id="rc" class="rc">
			<ux-button theme="primary" text="右中" @click="click('rc', false)"></ux-button>
		</view>
		<view id="lb" class="lb">
			<ux-button theme="primary" text="左下" @click="click('lb', false)"></ux-button>
		</view>
		<view id="cb" class="cb">
			<ux-button theme="primary" text="中下 - 水平对齐" @click="click('cb', true)"></ux-button>
		</view>
		<view id="rb" class="rb">
			<ux-button theme="primary" text="右下" @click="click('rb', false)"></ux-button>
		</view>
		
		<ux-popover ref="uxPopoverRef" :targetId="targetId" :align="align">
			<ux-cell :title="it.name" :icon="it.icon" :border="i < btns.length - 1" :rightArrow="false"
				color="white" iconColor="white" :hover="false" v-for="(it, i) in btns" :key="i"></ux-cell>
		</ux-popover>
	</ux-page>
</template>
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="弹出层" :bold="true">
				<ux-text text="支持任何位置弹出并且自动计算在适当的位置显示"></ux-text>
			</ux-card>
		</ux-scroll>
		
		<view id="lt" class="lt">
			<ux-button theme="primary" text="左上" @click="click('lt', false)"></ux-button>
		</view>
		<view id="ct" class="ct">
			<ux-button theme="primary" text="中上 - 水平对齐" @click="click('ct', true)"></ux-button>
		</view>
		<view id="rt" class="rt">
			<ux-button theme="primary" text="右上" @click="click('rt', false)"></ux-button>
		</view>
		<view id="lc" class="lc">
			<ux-button theme="primary" text="左中" @click="click('lc', false)"></ux-button>
		</view>
		<view id="c" class="c">
			<ux-button theme="primary" text="中" @click="click('c', false)"></ux-button>
		</view>
		<view id="rc" class="rc">
			<ux-button theme="primary" text="右中" @click="click('rc', false)"></ux-button>
		</view>
		<view id="lb" class="lb">
			<ux-button theme="primary" text="左下" @click="click('lb', false)"></ux-button>
		</view>
		<view id="cb" class="cb">
			<ux-button theme="primary" text="中下 - 水平对齐" @click="click('cb', true)"></ux-button>
		</view>
		<view id="rb" class="rb">
			<ux-button theme="primary" text="右下" @click="click('rb', false)"></ux-button>
		</view>
		
		<ux-popover ref="uxPopoverRef" :targetId="targetId" :align="align">
			<ux-cell :title="it.name" :icon="it.icon" :border="i < btns.length - 1" :rightArrow="false"
				color="white" iconColor="white" :hover="false" v-for="(it, i) in btns" :key="i"></ux-cell>
		</ux-popover>
	</ux-page>
</template>
ts
<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxBtn } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const targetId = ref('lt')
	const align = ref(false)
	const uxPopoverRef = ref<UxPopoverComponentPublicInstance | null>(null)
	
	const btns = [{
		name: '扫一扫',
		icon: 'scan-outline',
	}, {
		name: '关于',
		icon: 'help-outline',
	}, {
		name: '设置',
		icon: 'setting-outline',
	}] as UxBtn[]
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/popover.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
	
	function click(_id : string, _align : boolean) {
		targetId.value = _id
		align.value = _align
		
		uxPopoverRef.value?.$callMethod('open')
	}
</script>
<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxBtn } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const targetId = ref('lt')
	const align = ref(false)
	const uxPopoverRef = ref<UxPopoverComponentPublicInstance | null>(null)
	
	const btns = [{
		name: '扫一扫',
		icon: 'scan-outline',
	}, {
		name: '关于',
		icon: 'help-outline',
	}, {
		name: '设置',
		icon: 'setting-outline',
	}] as UxBtn[]
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/popover.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
	
	function click(_id : string, _align : boolean) {
		targetId.value = _id
		align.value = _align
		
		uxPopoverRef.value?.$callMethod('open')
	}
</script>
css
<style lang="scss">
	.lt {
		position: fixed;
		top: 205px;
		left: 15px;
	}

	.ct {
		position: fixed;
		top: 205px;
		left: 45%;
	}

	.rt {
		position: fixed;
		top: 205px;
		right: 15px;
	}

	.lc {
		position: fixed;
		top: 50%;
		left: 15px;
	}

	.c {
		position: fixed;
		top: 50%;
		left: 48%;
	}

	.rc {
		position: fixed;
		top: 50%;
		right: 15px;
	}

	.lb {
		position: fixed;
		bottom: 30px;
		left: 15px;
	}

	.cb {
		position: fixed;
		bottom: 30px;
		left: 45%;
	}

	.rb {
		position: fixed;
		bottom: 30px;
		right: 15px;
	}
</style>
<style lang="scss">
	.lt {
		position: fixed;
		top: 205px;
		left: 15px;
	}

	.ct {
		position: fixed;
		top: 205px;
		left: 45%;
	}

	.rt {
		position: fixed;
		top: 205px;
		right: 15px;
	}

	.lc {
		position: fixed;
		top: 50%;
		left: 15px;
	}

	.c {
		position: fixed;
		top: 50%;
		left: 48%;
	}

	.rc {
		position: fixed;
		top: 50%;
		right: 15px;
	}

	.lb {
		position: fixed;
		bottom: 30px;
		left: 15px;
	}

	.cb {
		position: fixed;
		bottom: 30px;
		left: 45%;
	}

	.rb {
		position: fixed;
		bottom: 30px;
		right: 15px;
	}
</style>