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

Posted 2021-01-29

问题

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
})