Vant Weapp小程序蹲坑之使用toast組件
阿新 • • 發佈:2019-02-08
ast app values def can 基礎用法 template 註意點 picker 問題
使用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小程序蹲坑之使用toast組件