vue + vant 笔记

佚名 7年前 (2019-04-18) 随笔 2075人围观抢沙发百度已收录

1、a、安装vant ：npm install vant -S

　 b、按需引入组件：安装webpack插件：babel-plugin-import

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

//在当前项目下安装：
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"
            :finished="finished"
            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>