热门IT资讯网

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

发表于:2024-11-21 作者:热门IT资讯网编辑
编辑最后更新 2024年11月21日,问题Dialog组件支持函数调用和组件调用两种形式,而一般的组件仅支持后者。显然,函数调用方式的支持增加了组件使用的灵活性,但是也随之出现另外几个值得注意的问题。两种方式使用举例在我的mpvue工程测

问题

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文件内容如下:

为了对比方便,我在上述页面中既使用了组件调用方式又使用了函数调用方式。其中,组件调用方式大家都熟悉,不必赘述。
值得注意的是后者。

函数调用方式使用注意事项

有如下几点:

1,必须放置一个dialog的声明方式定义:

2,使用import命令中不能使用绝对路径方式:

import Dialog from '@/../static/vant/dialog/dialog'

这里的@代表项目中的src目录。

然后就可以使用更灵活的函数调用方式了:
Dialog.alert({
title: '标题',
message
})

0