vue vant Area组件使用详解


Posted in Javascript onDecember 09, 2019

官网中给的内容太少,引入官网中的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属性

<van-cell is-link @click="showPopup" v-model="carmodel">选择需要显示的城市</van-cell>
<van-popup
  v-model="show"
  position="bottom"
  :style="{ height: '50%' }">
  <van-area :area-list="areaList" :columns-num="2" ref="myArea" title="标题" @change="onChange" @confirm="onConfirm" @cancel="onCancel"/>
</van-popup>

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.效果图

vue vant Area组件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
微信小程序动态增加按钮组件
Sep 14 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
JS中的模糊查询功能
Dec 08 #Javascript
详解一些适用于Node.js的命名约定
Dec 08 #Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 #Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 #Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 #Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 #Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 #Javascript
You might like
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
JavaScript 数组详解
2013/10/10 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
django中瀑布流写法实例代码
2019/10/14 Python
详解python内置模块urllib
2020/09/09 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
大学生创业计划书的范文
2014/01/07 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
信息技术课后反思
2014/04/27 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
慰问信格式规范
2015/03/23 职场文书
中秋节晚会开场白
2015/05/29 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Nginx如何配置根据路径转发详解
2022/07/23 Servers