vol-box 弹出框
v-model 控制显示。默认底部居中显示取消、确认按钮；使用 #footer 时不再显示默认按钮。
参数属性
| 属性 | 说明 | 类型 | 默认 |
|---|---|---|---|
| modelValue / v-model | 是否显示 | Boolean | false |
| title | 标题 | String | |
| padding | 内边距 rpx | Number | 32 |
| confirmText | 确认按钮文字 | String | 确认 |
| cancelText | 取消按钮文字 | String | 取消 |
| onConfirm | 确认回调（与 @confirm 并存） | Function | |
| onCancel | 取消回调（与 @cancel 并存） | Function |
事件：@confirm、@cancel、update:modelValue
<template>
<vol-button type="primary" @click="openBox">打开弹出框</vol-button>
<vol-button type="default" @click="openCustomBox">自定义底部</vol-button>
<vol-box v-model="boxVisible" title="提示" @confirm="onBoxConfirm" @cancel="onBoxCancel">
<view>这是 vol-box 默认弹出框示例，可确认或取消。</view>
</vol-box>
<vol-box v-model="customBoxVisible" title="自定义底部">
<view>自定义 footer 插槽时，不再显示默认确认/取消按钮。</view>
<template #footer>
<view class="custom-box-footer">
<vol-button type="primary" size="small" @click="closeCustomBox">我知道了</vol-button>
</view>
</template>
</vol-box>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const boxVisible = ref(false)
const customBoxVisible = ref(false)
const openBox = () => { boxVisible.value = true }
const openCustomBox = () => { customBoxVisible.value = true }
const closeCustomBox = () => { customBoxVisible.value = false }
const onBoxConfirm = () => { proxy.$toast('已确认') }
const onBoxCancel = () => { proxy.$toast('已取消') }
</script>