vant弹出框底部位置定位,vant的dialog组件加载,vant上啦加载,vant 按钮,vant弹窗,vant tabbar
Vant4 是一个基于 Vue.js 的移动端组件库，其中包含很多 UI 组件，其中包括 Dialog 弹出框组件。

Dialog 弹出框组件可以在页面中弹出一个模态对话框，用于提示用户或获取用户输入。它可以显示标题、内容以及底部按钮区域，并支持自定义样式和事件处理。

以下是一个简单的 Vant4 Dialog 弹出框示例：

html
<template>
<div class="demo">
<van-button type="primary" @click="showDialog">打开弹出框</van-button>
<van-dialog v-model="show" title="提示" message="确定要删除这条记录吗？" :before-close="handleClose">
<template #footer>
<van-button @click="show = false">取消</van-button>
<van-button type="primary" @click="handleConfirm">确认</van-button>
</template>
</van-dialog>
</div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Button, Dialog } from 'vant';

export default defineComponent({
components: {
Button,
Dialog,
},
setup() {
const show = ref(false);

const showDialog = () => {
show.value = true;
};

const handleClose = (action: string) => {
console.log('before close', action);
// 如果返回 false，则不关闭弹窗
return true;
};

const handleConfirm = () => {
console.log('confirm');
show.value = false;
};

return {
show,
showDialog,
handleClose,
handleConfirm,
};
},
});
</script>


在这个示例中，我们使用了 Vant4 的 Button 和 Dialog 组件。当用户点击打开弹出框按钮时，我们通过 showDialog 方法将 show 变量设置为 true，从而显示 Dialog 弹出框。在 Dialog 弹出框中，我们设置了标题和消息，以及两个底部按钮，其中一个是取消按钮，另一个是确认按钮。在确认按钮的点击事件中，我们将 show 变量设置为 false，从而关闭 Dialog 弹出框。

此外，我们还通过 before-close 属性设置了一个回调函数，在弹出框关闭之前可以执行一些操作。如果回调函数返回 false，则不会关闭弹出框。在这个示例中，我们只是简单地输出了一条日志信息，但你可以根据需要编写自己的逻辑。