vue + vant 筆記

1、a、安裝vant ：npm i vant -S

　  b、按需引入組件：安裝webpack插件：babel-plugin-import

//在當前項目下安裝：
npm install babel-plugin-import -D

// .babelrc 中配置
// 注意：webpack 1 無需設置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 對於使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
//在mian.js或者需要的組件中引入所需的組件
import { Button, Cell } from 'vant';

 

2、實現下拉刷新上拉加載：<van-pull-refresh>是下拉刷新的組件，需要監聽refresh事件；<van-list>組件是上拉加載的組件，需要監聽load事件，load事件每次進入頁面時會被調用

<template>
    <van-pull-refresh class="mt-head"
        v-model="refreshing"
        @refresh="onRefresh(0)"
    >
        <van-list class="mt-head"
            v-model="loading" //數據加載完要主動設置loading為false
            :finished="finished" //后台數據是否已經沒有數據了
　　　　　　　:immediate-check="false" //設置首次進入頁面是否直接觸發load事件，默認為true

            finished-text="沒有更多了"
            @load="onLoad()"
        >
        <div>
            <div class="list-item" v-for="(item, index) in lists" :key="index">
                <h5>{{ item.Name }}</h5>
                <dl>
                    <dt>地址：</dt>
                    <dd>{{ item.Address }}</dd>
                    <dt>電話：</dt>
                    <dd>{{ item.Phone }}</dd>
                    <dt>類型：</dt>
                    <dd>{{ item.Channel }}</dd>
                </dl>
            </div>
        </div>
        </van-list>
    </van-pull-refresh>
</template>

<script>
import eventVue from '../eventVue.js'
export default {
    data () {
        return {
            url: '',
            page: 1,
            refreshing: false,
            loading: false,
            error: false,
            finished: false,
            lists: [],
            searchData: {
                page: 0
            }
        }
    },
    created () {
    },
    methods: {
        async getStoreList (url, data) {
            const res = await this.$http.post(url, data)
            if (res.status == 200) {
                let resData = res.data
                if (resData) {
                    let data = resData.data
                    this.refreshing = false //停止轉圈
                    this.loading = false //停止轉圈
                    if (data.list.length > 0) {
                        this.lists = this.lists.concat(data.list) //拼接數據
                    } else {
                        this.finished = true
                    }
                    
                    let search = data.search
                    eventVue.$emit('getCateData', search)

                } else {
                    Toast(resData.errcode + resData.errmsg)
                }
                console.log('接口成功')
            } else {
                console.log('失敗')
            }
        },
        onLoad() {this.searchData.page ++
            this.getStoreList(this.url, this.searchData)
        },
        onRefresh(index) {
            this.searchData.page = 1
            this.lists = []
            this.getStoreList(this.url, this.searchData)
        },
    }
}
</script>

3、實現向上展開的選擇彈窗： 需要同時用到van-popup組件和van-picker組件，這是個組件，數據由父組件傳過來的

<template>
    <van-popup
        v-model="show"
        :close-on-click-overlay="false" //禁止點擊遮罩層關閉彈窗
        position="bottom"> //設置彈窗彈出的位置
        <van-picker
            show-toolbar
            :title="title"
            :columns="columns" //是一個數組 如果想改成對象顯示值的key一定要是text，然后其他值可以自定義
            @cancel="onCancel"
            @confirm="onConfirm"
            @change="onChange"/>

    </van-popup>
</template>
<script>


export default {
    props:['columns','title','show','tag'],
    methods: {
        onConfirm(value, index) {
            let data = {};
            if (this.tag == 'chooseType') {
                data.tag = 'channel'
            } else if (this.tag == 'chooseProvice') {
                data.tag = 'province'
            } else if (this.tag == 'chooseCity') {
                data.tag = 'city'
            }
            data.chooseItem = value
            this.$emit('showChange', data)
        },
        onCancel() {
            this.$emit('showChange')
        },
        onChange(picker, values) {
        //     console.log(picker)
            // console.log(values)
            // picker.setColumnValues(1, citys[values[0]]);
        },
    }
}
</script>