Vant Weapp小程序蹲坑之使用toast组件
2019-02-07 22:20
561 查看
问题
使用Mpvue框架结合Vant Weapp组件库进行微信小程序开发中使用toast组件时,不小心又陷入“坑”中,当然主要还是路径问题。
注意点
使用toast组件时,与其它最普通的Vant Weapp组件相比,有几点需要注意。为了更方便理解,还是先上源码(index.vue),如下:
<template> <div> <van-panel title="基础用法"> <van-picker :columns="column1" @change="onChange1"/> </van-panel> <van-panel title="禁用选项"> <van-picker :columns="column2" /> </van-panel> <!--非常典型的表达如下--> <van-panel title="展示顶部栏"> <van-picker show-toolbar title="标题" :columns="column1" @change="onChange1" @confirm="onConfirm" @cancel="onCancel"/> </van-panel> <!--高级用法--> x <van-panel title="多列联动"> <van-picker :columns="column4" @change="onChange2"/> </van-panel> <van-panel title="加载状态"> <van-picker loading :columns="column4"/> </van-panel> <!--这种特殊占位符是必须有的!--> <van-toast id="van-toast"/> </div> </template> <script> //在此只能使用相对路径方式! //.json文件中可以使用绝对路径! import Toast from '../../../static/vant/toast/toast' export default { data(){ return{ column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'], column2: [ { text: '杭州', disabled: true }, { text: '宁波' }, { text: '温州' } ], column3: { 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'], 福建: ['福州', '厦门', '莆田', '三明', '泉州'] }, //当传入多列数据时,columns为一个对象数组,数组中的每一个对象配置每一列 column4: [ { values: ['浙江', '福建'], className: 'column1' }, { values: ['杭州', '宁波', '温州', '嘉兴', '湖州'], className: 'column2', defaultIndex: 2 } ] } }, methods:{ onChange1(event) { const { value, index } = event.mp.detail; Toast(`Value: ${value}, Index:${index}`); }, onConfirm(event) { const { value, index } = event.mp.detail; Toast(`Value: ${value}, Index:${index}`); }, onCancel() { Toast('取消'); }, onChange2(event) { const { picker, value } = event.mp.detail; picker.setColumnValues(1, this.column3[value[0]]);//this.data.column3是错误的写法! } } } </script> <style> </style>
总结有:
(1)必须在<template>部分添加<van-toast id="van-toast"/>,这个起到类似于占位符的作用。
(2)在<script>段中必须使用相对路径表示方式来引用Toast对象,但在对应的.json文件中可以使用绝对路径表示方式。
(3)以函数方式调用Toast对象,当然从上述示例片断中易见,其参数很容易表达,恕不赘述。
相关文章推荐
- Vant Weapp的dialog组件在mpvue小程序中使用注意事项
- Android中使用toast组件做一个点击按钮打招呼的程序
- Vant Weapp小程序蹲坑之navigateTo:fail page not found
- 用微信开发者工具--打开小程序组件vant Weapp示例
- 小程序使用iView Weapp组件传值问题
- AppFramework1.0数据库访问组件使用说明(三)配置文件详解
- 数据提供程序中Command组件使用
- Top Android App使用的组件(2)
- AppFramework1.0数据库访问组件使用说明(六)QueryFilter的使用
- 由于另一个程序或正在运行的服务可能正在使用网络地址转换组件(Ipnat.sys),windows防火墙无法运行
- MFC小程序003------MFC使用WebBrowser组件,在对话框中创建滚动视图,动态创建一个静态文本控件并设置鼠标单击的消息响应
- Top Android App使用的组件(四)
- AppFramework1.0数据库访问组件使用说明(七)SqlTemplate与SqlMap的使用
- 使用 Eclipse + PyDev 开发 Google App Engine 程序
- IOS的app程序中的文件目录的功能和使用详细说明
- Top Android App使用的组件 2
- 【android】使用Event Bus模式解耦Android App组件间通信
- Top Android App使用的组件(应用)
- IOS的app程序中的文件目录的功能和使用详细说明 - 包括itune同步的部分
- App_global.asax.pdb: 另一个程序正在使用此文件,进程无法访问。