Using toast component of Vant Weapp applet

problem

When using the Mpvue framework and the Vant Weapp component library to develop wechat applets, when using toast components, we accidentally fall into a "pit", of course, the main problem is the path.

Attention points

When using toast components, there are several points to be noted compared with other most common Vant Weapp components. To make it easier to understand, first go to the source code (index.vue), as follows:

<template>
  <div>
    <van-panel title="Basic usage">
      <van-picker :columns="column1" @change="onChange1"/>
    </van-panel>

    <van-panel title="Forbidden options">
      <van-picker :columns="column2" />
    </van-panel>
    <!--The typical expression is as follows-->
    <van-panel title="Show top bar">
      <van-picker show-toolbar title="Title" :columns="column1" @change="onChange1" @confirm="onConfirm" @cancel="onCancel"/>
    </van-panel>

    <!--Advanced Usage-->
x    <van-panel title="Multi column linkage">
      <van-picker :columns="column4" @change="onChange2"/>
    </van-panel>

    <van-panel title="Loading state">
      <van-picker loading :columns="column4"/>
    </van-panel>
    <!--This special placeholder is a must!-->
    <van-toast id="van-toast"/>
  </div>
</template>
<script>
  //Only relative path mode can be used here!
  //Absolute path can be used in. json file!
  import Toast from '../../../static/vant/toast/toast'

  export default {
    data(){
      return{
        column1: ['Hangzhou', 'Ningbo', 'Wenzhou', 'Jiaxing', 'Huzhou'],
        column2: [
          { text: 'Hangzhou', disabled: true },
          { text: 'Ningbo' },
          { text: 'Wenzhou' }
        ],
        column3: {
          //Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou', 'Jiaxing', 'Huzhou'],
          //Fujian: ['Fuzhou', 'Xiamen', 'Putian', 'Sanming', 'Quanzhou']
        },
        //When multi column data is passed in, columns is an array of objects, and each object in the array is configured with each column
        column4: [
          {
            values: ['Zhejiang', 'Fujian'],
            className: 'column1'
          },
          {
            values: ['Hangzhou', 'Ningbo', 'Wenzhou', 'Jiaxing', 'Huzhou'],
            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('cancel');
      },

      onChange2(event) {
        const { picker, value } = event.mp.detail;
        picker.setColumnValues(1, this.column3[value[0]]);//this.data.column3 is the wrong way to write!

      }

    }
  }
</script>
<style>

</style>

The conclusion is as follows:
(1) you must add < van toast id = "Van toast" / > in the < template > section, which acts like a placeholder.
(2) in the < script > section, the relative path representation must be used to reference the Toast object, but the absolute path representation can be used in the corresponding. json file.
(3) the Toast object is called as a function. Of course, it is easy to see from the above example fragments, and its parameters are easy to express, so we won't go into details.

Tags: Mobile JSON Vue

Posted on Sun, 01 Dec 2019 23:56:01 -0500 by ziv