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>

總結有：
（1）必須在<template>部分添加<van-toast id="van-toast"/>，這個起到類似於佔位符的作用。
（2）在<script>段中必須使用相對路徑表示方式來引用Toast對象，但在對應的.json文件中可以使用絕對路徑表示方式。
（3）以函數方式調用Toast對象，當然從上述示例片斷中易見，其參數很容易表達，恕不贅述。