wk-view

Appearance

On this page

wkv-dialog ​

对话框

用法 ​

html
<wkv-dialog v-model:visible="visible" title="默认弹窗">默认弹窗</wkv-dialog>

Props ​

属性名类型默认值说明
visibleBooleanfalse对话框是否可见
modeStringdefault对话框展示模式，可选 default image
imageString-图片
imageHeight[Number, String]mode 为 default 时 200px
mode 为 image 时 350px		图片宽度
titleString-标题
contentString-内容文案，等同于 defalut 插槽
cancelTextString取消自定义取消按钮的文案
confirmTextString确认自定义确认按钮的文案
noCancelBooleanfalse是否隐藏取消按钮
noConfirmBooleanfalse是否隐藏确认按钮
maskClosableBooleantrue是否在点击遮罩时关闭弹窗
width[Number, String]85%对话框宽度

Events ​

事件名事件说明函数签名参数说明
update:visible更新弹窗可见性() => void-
cancel点击取消按钮时触发() => void-
confirm点击确定按钮时触发() => void-
maskClick点击遮罩时触发() => void-

Slots ​

插槽名插槽说明参数说明
default弹窗内容-

示例 ​

vue
<template>
	<view class="wkv-dialog-example">
		<wkv-button @click="visibleDefault = true">默认对话框</wkv-button>
		<wkv-dialog v-model:visible="visibleDefault" title="默认弹窗">默认弹窗</wkv-dialog>

		<wkv-button @click="visibleNoCancel = true">隐藏取消按钮</wkv-button>
		<wkv-dialog v-model:visible="visibleNoCancel" title="隐藏取消按钮" noCancel>
			隐藏取消按钮
		</wkv-dialog>

		<wkv-button @click="visibleNoConfirm = true">隐藏确认按钮</wkv-button>
		<wkv-dialog v-model:visible="visibleNoConfirm" title="隐藏确认按钮" noConfirm>
			隐藏确认按钮
		</wkv-dialog>

		<wkv-button @click="visibleLongContent = true">长内容可滚动</wkv-button>
		<wkv-dialog v-model:visible="visibleLongContent" title="长内容可滚动">
			<view v-for="index in 30" :key="index">长内容可滚动 {{ index }}</view>
		</wkv-dialog>

		<wkv-button @click="visibleImageText = true">图文</wkv-button>
		<wkv-dialog
			v-model:visible="visibleImageText"
			title="图文"
			image="https://x0.ifengimg.com/ucms/2021_31/80A3E3EF0CDF35E0BCE679BC74DE8D0BDED4D9E9_size77_w553_h369.png"
		>
			图文
		</wkv-dialog>

		<wkv-button @click="visibleImage = true">大图</wkv-button>
		<wkv-dialog
			v-model:visible="visibleImage"
			mode="image"
			image="https://x0.ifengimg.com/ucms/2021_31/80A3E3EF0CDF35E0BCE679BC74DE8D0BDED4D9E9_size77_w553_h369.png"
		>
		</wkv-dialog>

		<wkv-button @click="visibleUpdateButton = true">修改按钮文案</wkv-button>
		<wkv-dialog
			v-model:visible="visibleUpdateButton"
			title="修改按钮文案"
			cancelText="点我取消"
			confirmText="点我确认"
		>
			修改按钮文案
		</wkv-dialog>

		<wkv-button @click="visibleMaskClosable = true">禁止点击遮罩隐藏</wkv-button>
		<wkv-dialog
			v-model:visible="visibleMaskClosable"
			title="禁止点击遮罩隐藏"
			:maskClosable="false"
		>
			禁止点击遮罩隐藏
		</wkv-dialog>
	</view>
</template>
vue
<script setup lang="ts">
import { ref } from 'vue'

const visibleDefault = ref(false)
const visibleNoConfirm = ref(false)
const visibleNoCancel = ref(false)
const visibleLongContent = ref(false)
const visibleImageText = ref(false)
const visibleImage = ref(false)
const visibleUpdateButton = ref(false)
const visibleMaskClosable = ref(false)
</script>
scss
<style lang="scss">
.wkv-dialog-example {
	padding: 20px;

	.wkv-button {
		margin-bottom: 10px;
	}
}
</style>