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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 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源码之 ext/mysql扩展部分
2009/07/17 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
基于Python的关键字监控及告警
2017/07/06 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python清空命令行方式
2020/01/13 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
中文教师求职信
2014/02/22 职场文书
离职信范文
2015/06/23 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技