Vant Weapp的dialog组件在mpvue小程序中使用

发布时间：2023-10-31 11:00:50 所属栏目：教程来源：转载

导读： 　　问题

　　Dialog组件支持函数调用和组件调用两种形式，而一般的组件仅支持后者。显然，函数调用方式的支持增加了组件使用的灵活性，但是也随之出现另外几个值得注意的问题。

　　问题

　　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

　　})

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!