用的微信开发能力(即在点击确定按钮时候对调用微信平台API获取到对应的信息,此处是获取用户个人身份信息)
函数式调用函数式调用——confirm
最常规的另一种用法就是直接使用 Dialog、Dialog.alert、Dialog.confirm 的方法快速打开弹窗组件,关闭弹框组件则通过 Dialog.close ,取消
弹框的加载状态则使用 Dialog.stopLoading,组件内部嵌套的其他组件或标签是dialog组件的内容,如下所示:
// wxml
<van-dialog id="van-dialog">
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';
// js
Dialog.alert({
title: "标题"
message: '代码是写出来给人看的,附带能在机器上运行'
}).then(() => {
// on close
});
复制代码
这里使用函数调用一定要注意在使用van-dialog的页面的wxml中一定需要写这个来使用组件,下文在分析dialog的源码中会讲到(卖个关子),
或者你可以先猜一猜:blush::blush:
上面三种van-dialog的常规使用方法的效果如下:
(此图片来源于网络,如有侵权,请联系删除! )
四、四、Dialog进阶用法进阶用法
下面将会提供几个作者在实战中写出的Dialog对话框组件的实战用法
使用使用use-title-slot定制标题定制标题
<van-dialog
id="van-dialog"
show="{{ dialogShow }}"
message="资质原件拍照或扫描可以不加盖公章,复印件需盖章\n\n如是三证合一,则无需提供税务登记证、组织机构代码证"
message-align="left"
confirm-button-text="知道了"
confirm-button-color="#EE712F"
use-title-slot
>
<view slot="title" class=" merchant-dialog__title">
<view class="merchant-dialog__title-text">开户前,请准备以下资料</view>
<van-icon name="cross" size="40rpx" class="merchant-dialog__title-icon" bindtap="closeDialog" />
</view>
</van-dialog>
// 样式部分的代码此处省略
复制代码
触发弹框显示
handleButtonClick1: function () {
this.setData({
dialogShow: true
})
},
复制代码
此例子如要使用了如下特性:
use-title-slot
confirm-button-text、confirm-button-color