Vant Weapp小程序蹲坑之使用toast组件 _程序

花门楼前见秋草，岂能贫贱相看老。这篇文章主要讲述Vant Weapp小程序蹲坑之使用toast组件相关的知识，希望能为你提供帮助。
问题使用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>

【Vant Weapp小程序蹲坑之使用toast组件】总结有：
（1）必须在< template> 部分添加< van-toast id=" van-toast" /> ，这个起到类似于占位符的作用。
（2）在< script> 段中必须使用相对路径表示方式来引用Toast对象，但在对应的.json文件中可以使用绝对路径表示方式。
（3）以函数方式调用Toast对象，当然从上述示例片断中易见，其参数很容易表达，恕不赘述。