vant 怎么显示评分 评分组件_vue vant Area组件使用详解

这篇文章主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

官网中给的内容太少，引入官网中的Area例子之后，发现弹出来的组件里并没有数据。

1.下载areaList.js并在使用的模板中引用 官方网站 areaList.js

import areaList from '../../assets/area/area.js'

2.main.js引入并注册(一般与Popup一起使用)

import { Area, Popup } from 'vue-router'

Vue.use(Area)

Vue.use(Popup)

3.template中，基础用法配置显示列，需要传入一个area-list属性

选择需要显示的城市

v-model="show"

position="bottom"

:style="{ height: '50%' }">

4.script中，api与方法

export default {

data() {

return {

areaList,

show:false,

carmodel:''

}

},

methods:{

// 弹出层显示

showPopup() {

this.show = true;

},

//value=0改变省，1改变市，2改变区

onChange(picker, index, value){

let val = picker.getValues();

console.log(val)//查看打印

let areaName = ''

for (var i = 0; i < val.length; i++) {

areaName = areaName+(i==0?'':'/')+val[i].name

}

this.carmodel = areaName

},

//确定选择城市

onConfirm(val){

console.log(val[0].name+","+val[1].name)

this.show = false//关闭弹框

},

//取消选中城市

onCancel(){

this.show = false

this.$refs.myArea.reset()// 重置城市列表

}

}

}

5.效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，