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 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
使用flow来规范javascript的变量类型
Sep 12 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抓取页面与代码解析 推荐
2010/07/23 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python3遍历目录树实现方法
2015/05/22 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python实现静态web服务器
2019/09/03 Python
python创建学生管理系统
2019/11/22 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
导游词之山东孔庙
2019/11/04 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Mysql排序的特性详情
2021/11/01 MySQL