vant-weapp Dialog 小程序弹出框的使用方法

1、如果你的小程序是npm安装的vant

// json：

{
  "navigationBarTitleText": "",
  "usingComponents": {
    "van-dialog": "@vant/weapp/dialog/index"
  }
}

js: 

import Dialog from '@vant/weapp/dialog/dialog';

Page({
    onLoad: function (options) {
        Dialog.alert({
          title: '标题',
          message: '弹窗内容',
        }).then(() => {
          // on close
        });
    }
})

Html:

// 找个地方放置

<van-dialog id="van-dialog" />

到这步就完成了.

2、如果是下载源码使用 es6版本

// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

js:

import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';

其余的地方跟第一步都是一样的

3、组件调用

<!-- html -->
<van-dialog
  use-slot
  title="标题"
  show="{{ show }}"
  show-cancel-button
  confirm-button-open-type="getUserInfo"
  bind:close="onClose"
  bind:getuserinfo="getUserInfo"
>
  <image src="https://img.yzcdn.cn/1.jpg" />
</van-dialog>

// js

Page({
  data: {
    show: true,
  },

  getUserInfo(event) {
    console.log(event.detail);
  },

  onClose() {
    this.setData({ show: false });
  },
});

官方链接：Vant Weapp - 轻量、可靠的小程序 UI 组件库