全局弹框 · Vant

核心 API 请查阅 全局弹框-基础篇，本文档仅说明 Vant 框架下的特化配置。

导入路径

import { $initHook, $JiessDialog } from '@jiess/plus/vant';

const hook = $initHook({
    ui: vant,            // vant 根对象
    ...Vue,              // Vue 响应式 API
});

Vant 特化——弹出类型

Vant 支持多种弹出类型，通过 type 属性切换：

type	底层组件	说明
'dialog'	van-dialog	标准对话框（默认）
'popup'	van-popup	弹出层（从底部/侧边滑出）
'action-sheet'	van-action-sheet	动作面板

// 弹出层（底部滑出）
$JiessDialog({
    type: 'popup',
    position: 'bottom',    // 'bottom' / 'top' / 'left' / 'right'
    round: true,
    $title: '选择操作',
    $content: { /* ... */ },
});

// 动作面板
$JiessDialog({
    type: 'action-sheet',
    $title: '请选择',
    actions: [
        { name: '拍照', callback: () => {} },
        { name: '从相册选择', callback: () => {} },
    ],
});

Vant 特化属性

基于 Vant 组件，以下属性可透传：

属性	类型	说明
position	string	popup 弹出位置：'bottom'/'top'/'left'/'right'
round	boolean	是否圆角
closeable	boolean	是否显示关闭图标
closeOnClickOverlay	boolean	点击遮罩是否关闭
lockScroll	boolean	是否锁定背景滚动
safeAreaInsetBottom	boolean	是否开启底部安全区适配

$JiessDialog({
    type: 'popup',
    position: 'bottom',
    round: true,
    closeable: true,
    closeOnClickOverlay: true,
    $content: {
        children: {
            $Form: {
                children: {
                    name: { $Input: { $label: '姓名' } },
                },
            },
        },
    },
});

注意事项

事项	说明
show 响应式处理	Vant 使用组合式响应对象 show，Jiess 内部通过 hasProxy 判断处理
动画延迟	remove() 有 260ms 延迟等待 Vant 动画完成
安全区适配	H5 端建议开启 safeAreaInsetBottom: true

实战示例

示例 1：底部弹出表单

import { $JiessDialog } from '@jiess/plus/vant';

const popupForm = $JiessDialog({
    type: 'popup',
    position: 'bottom',
    round: true,
    closeable: true,
    $title: '新增地址',
    $content: {
        children: {
            $Form: {
                labelWidth: '6em',
                safeAreaInsetBottom: true,
                children: {
                    name: { $label: '收货人', $name: 'name', $rules: ['required'], $Input: { placeholder: '请输入收货人姓名', clearable: true } },
                    phone: { $label: '手机号', $name: 'phone', $rules: ['required', 'phone'], $Input: { placeholder: '请输入手机号', type: 'tel' } },
                    province: {
                        $label: '所在地区', $name: 'province',
                        $Cascader: { options: regionData, placeholder: '请选择省市区' },
                    },
                },
            },
            $Button: {
                children: '保存',
                type: 'primary',
                size: 'large',
                round: true,
                block: true,
                onClick() { this.validate().then(data => saveAddress(data)).then(() => this.close()); },
            },
        },
    },
});

示例 2：动作面板选择

$JiessDialog({
    type: 'action-sheet',
    $title: '请选择操作',
    cancelText: '取消',
    actions: [
        { name: '拍照上传', subname: '使用相机拍摄', callback: () => chooseImage('camera') },
        { name: '从相册选择', subname: '从手机相册选取', callback: () => chooseImage('album') },
        { name: '查看大图', color: '#1989fa', callback: () => previewImage() },
    ],
});

示例 3：确认对话框（危险操作）

$JiessDialog({
    type: 'dialog',
    title: '删除确认',
    message: '确定要删除该条记录吗？',
    showCancelButton: true,
    confirmButtonText: '确定删除',
    confirmButtonColor: '#ee0a24',
    cancelButtonText: '取消',
    beforeClose: async (action) => {
        if (action === 'confirm') {
            await api.deleteRecord(id);
            return true;
        }
        return true;
    },
});

下一步

• 全局弹框-基础篇 — BuildDialog 核心 API
• 快捷表单-Vant — 弹框内嵌表单