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="username"
label="用户名"
placeholder="请输入用户名"
/>
<van-field
:value="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目录。
然后就可以使用更灵活的函数调用方式了:
Dialog.alert({
title: ‘标题‘,
message
})