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

问题
使用Mpvue框架结合Vant Weapp组件库进行微信小程序开发中使用toast组件时，不小心又陷入“坑”中，当然主要还是路径问题。

注意点
使用toast组件时，与其它最普通的Vant Weapp组件相比，有几点需要注意。为了更方便理解，还是先上源码（index.vue），如下：

x
<van-picker :columns=“column4” @change=“onChange2”/>

<van-panel title="加载状态">
  <van-picker loading :columns="column4"/>
</van-panel>
<!--这种特殊占位符是必须有的！-->
<van-toast id="van-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是错误的写法！

  }

}

}

总结有：
（1）必须在部分添加，这个起到类似于占位符的作用。
（2）在

©著作权归作者所有：来自51CTO博客作者googlingman的原创作品，如需转载，请注明出处，否则将追究法律责任