Vant Weapp的dialog组件在mpvue小程序中使用注意事项 _小程序

博观而约取，厚积而薄发。这篇文章主要讲述Vant Weapp的dialog组件在mpvue小程序中使用注意事项相关的知识，希望能为你提供帮助。
问题Dialog组件支持函数调用和组件调用两种形式，而一般的组件仅支持后者。显然，函数调用方式的支持增加了组件使用的灵活性，但是也随之出现另外几个值得注意的问题。
两种方式使用举例在我的mpvue工程测试中，针对dialog组件我专门创建了一个测试文件夹test_dialog，其中包含如下三个文件：

index.vue
main.js
main.json

上述三个文件的作用相信各位都明白。注意，我把vant-weapp组件库×××后存放到static目录下：
/static/vant/各个组件对应子文件夹。
其中，main.json内容如下：

{ "navigationBarTitleText": "test_tabbar_page", "usingComponents": { "van-button": "/static/vant/button/index", "van-icon": "/static/vant/icon/index", "van-area": "/static/vant/area/index", "van-dialog":"/static/vant/dialog/index", "van-field": "/static/vant/field/index" } }

main.js文件内容固定不变。
index.vue文件内容如下：

< template> < div> < div> < van-button plain type="primary" class="demo-margin-right" @click="onClickAlert" > 消息提示 < /van-button> < van-dialog id="van-dialog" /> < /div> < div > < van-button plain type="danger" @click="showCustomDialog" > 组件调用 < /van-button> < van-dialog use-slot async-close :show="show" show-cancel-button confirm-button-open-type="getUserInfo" @close="onClose" @getuserinfo="getUserInfo" > < van-field :value="https://www.songbingjia.com/android/username" label="用户名" placeholder="请输入用户名" /> < van-field :value="https://www.songbingjia.com/android/password" type="password" label="密码" border="false" placeholder="请输入密码" /> < /van-dialog> < /div> < /div> < /template> < script> import Dialog from ‘@/../static/vant/dialog/dialog‘ const message = ‘有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者‘ export default { data: { show: false, username: ‘‘, password: ‘‘ }, methods:{ onClickAlert(){ Dialog.alert({ title: ‘标题‘, message }) }, showCustomDialog() { this.show=true }, getUserInfo(event) { console.log(event.mp.detail) }, onClose(event) { if (event.mp.detail === ‘confirm‘) { // 异步关闭弹窗 setTimeout(() => { this.show=false }, 1000); } else { this.show=false } } } } < /script>

为了对比方便，我在上述页面中既使用了组件调用方式又使用了函数调用方式。其中，组件调用方式大家都熟悉，不必赘述。
值得注意的是后者。
函数调用方式使用注意事项有如下几点：
1，必须放置一个dialog的声明方式定义：
< van-dialog id=" van-dialog" />
2，使用import命令中不能使用绝对路径方式：
import Dialog from ‘@/../static/vant/dialog/dialog‘
这里的@代表项目中的src目录。
【Vant Weapp的dialog组件在mpvue小程序中使用注意事项】然后就可以使用更灵活的函数调用方式了：
Dialog.alert({
title: ‘标题‘,
message
})