ConfirmView 确认弹窗

按钮在底部

template

<vz-button @click="handleShow" block>打开弹窗</vz-button>

<vz-confirm-view v-model:show="isShow" radius="20rpx">
  <view class="confirm-view">内容</view>
</vz-confirm-view>

script

import { ref } from "vue";

const isShow = ref(false);
function handleShow() {
  isShow.value = true;
}

按钮在底部

template

<vz-button @click="handleShow" block>打开弹窗</vz-button>

<vz-confirm-view v-model:show="isShow" mode="header" radius="20rpx">
  <view class="confirm-view">内容</view>
</vz-confirm-view>

script

import { ref } from "vue";

const isShow = ref(false);
function handleShow() {
  isShow.value = true;
}

弹窗标题

template

<vz-button @click="handleShow" block>打开弹窗</vz-button>

<vz-confirm-view v-model:show="isShow" title="弹窗标题" radius="20rpx">
  <view class="confirm-view">内容</view>
</vz-confirm-view>

script

import { ref } from "vue";

const isShow = ref(false);
function handleShow() {
  isShow.value = true;
}

Props

属性名	说明	类型	默认值
show	是否显示确认弹窗	boolean	false
mode	按钮位置	header \ footer	footer
header-border	是否显示顶部下边框	boolean	true
title	标题	string	-
confirm-text	确定按钮文案	string	确定
cancel-text	取消按钮文案	string	取消
confirm-type	确定按钮类型	ButtonType	-
cancel-type	取消按钮类型	ButtonType	-
confirm-color	确定按钮颜色	string	-
cancel-color	取消按钮颜色	string	-
button-width	按钮宽度	string \ number	auto \ 240rpx
button-height	按钮高度。仅按钮在底部时生效	string \ number	Button.height
button-text-weight	按钮字体加粗	number \ string	600
z-index	z-index	number \ string	Popup.zIndex
radius	弹窗圆角	string \ number	0
overlay-closeable	点击遮罩层是否关闭弹窗	boolean	true
safe-area-inset-bottom	是否开启底部安全区适配	boolean	Popup.safeAreaInsetBottom
auto-close	点击确认/取消按钮时是否关闭弹窗	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Events

事件名	说明	参数
confirm	点击确定按钮事件	-
cancel	点击取消按钮事件	-

Slots

插槽名	说明
header	顶部插槽
footer	底部插槽

CSS

变量名	说明	默认值
--confirm-view-header-height	顶部高度	90rpx
--confirm-view-header-border-color	顶部下边框颜色	--vz-border-color
--confirm-view-title-padding-x	标题 padding-x	20rpx
--confirm-view-title-text-weight	标题字体加粗	600
--confirm-view-footer-padding	底部 padding	20rpx 20rpx 70rpx
--confirm-view-button-gap	底部按钮间距	40rpx

SCSS

$confirm-view: (
  "header-height": 90rpx,
  "header-border-color": getCssVar("border-color"),
  "title-padding-x": 20rpx,
  "title-text-weight": 600,
  "footer-padding": 20rpx 20rpx 70rpx,
  "button-gap": 40rpx,
);