Popper 弹窗

基于Vue3-popper开发的弹窗组件。

基础用法

可以根据绑定一个布尔值，然后根据不同的事件切换显示隐藏，可以配合Button、Radio、Checkbox、Switch等一起配合使用。

当弹出内容是简单的文本，也可以设置 content 参数。

查看代码

<template>
	<demo-container>
		<gov-popper
			v-model="visible"
			title="标题"
			content="存在即合理，一切事物的存在都有其独特的价值。"
			placement="top"
		>
			<template #reference>
				<gov-button @click="visible = !visible">点击切换</gov-button>
			</template>
		</gov-popper>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

弹出位置

设置 placement 不同弹出位置。

查看代码

<template>
	<demo-container>
		<!-- 控制器 -->
		<gov-radio-group v-model="placement">
			<gov-radio label="top" value="top" />
			<gov-radio label="top-start" value="top-start" />
			<gov-radio label="top-end" value="top-end" />
			<gov-radio label="right" value="right" />
			<gov-radio label="right-start" value="right-start" />
			<gov-radio label="right-end" value="right-end" />
			<gov-radio label="bottom" value="bottom" />
			<gov-radio label="bottom-start" value="bottom-start" />
			<gov-radio label="bottom-end" value="bottom-end" />
			<gov-radio label="left" value="left" />
			<gov-radio label="left-start" value="left-start" />
			<gov-radio label="left-end" value="left-end" />
		</gov-radio-group>
		<hr />
		<!-- popper弹窗 -->
		<gov-popper
			v-model="visible"
			title="标题"
			content="存在即合理，一切事物的存在都有其独特的价值。"
			:placement="placement"
		>
			<template #reference>
				<gov-button @click="visible = !visible">点击切换</gov-button>
			</template>
		</gov-popper>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const placement = ref("top");
const visible = ref(false);
</script>

自定义弹出

可以在默认插槽内自定义弹出内容。

查看代码

<template>
	<demo-container>
		<gov-popper
			v-model="visible"
			title="GovUI是专为政府定制的"
			placement="right"
			width="200px"
		>
			<template #reference>
				<gov-button @click="visible = !visible">点击弹出</gov-button>
			</template>
			<img src="/logo.png" style="width: 100%" />
			<br />
			<div style="text-align: center">
				<gov-button size="small" @click="visible = false">
					关闭
				</gov-button>
				<gov-button
					size="small"
					@click="visible = false"
					type="primary"
				>
					确定
				</gov-button>
			</div>
		</gov-popper>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

Attributes

基于 Vue3-popper开发，但是稍有不同。

参数	类型	可选值	默认值	描述
modelValue / v-model	boolean	-	false	显示隐藏
placement	string	top/top-start/top-end/ bottom/bottom-start/bottom-end/ left/left-start/left-end/ right/right-start/right-end	bottom	显示位置。
clickAwayClose	boolean	-	true	默认点击弹窗层外会关闭弹窗。
offsetSkid	number	-	0	设置触发元素沿自身方向的偏移像素值。
offsetDistance	number	-	12	设置距离触发元素的偏移像素值。
arrow	boolean	-	true	设置为 true 时，在弹出层上显示一个箭头。
arrowPadding	number	-	0	防止箭头触碰到弹出层边缘的像素值。
disabled	boolean	-	false	设置为 true 时，禁用弹出层，如果已打开则关闭它。
openDelay	number	-	0	设置延迟打开弹出层的时间（毫秒）。
closeDelay	number	-	0	设置延迟关闭弹出层的时间（毫秒）。
interactive	boolean	-	true	设置为 false 时，点击或悬停在弹出层上不会关闭它。
content	string	-	-	如果内容是一个简单的字符串，可以直接作为属性传递。
zIndex	number	-	9999	设置弹出层的 z-index 值，控制层叠顺序。
locked	boolean	-	false	设置为 true 时，锁定弹出层位置，空间不足时不会动态翻转。

Events

事件名	描述	类型
toggle	显示隐藏变化时触发的事件。	Function
show	当 Popper 被打开时触发。	Function
hide	当 Popper 被隐藏时触发。	Function

Slots

插槽名	描述
default	Popper 弹出内容。
reference	Popper 包裹内容。