vue城市三级联动组件 vue-area-linkage

Install the pkg with npm:

// v5之前的版本
npm i --save vue-area-linkage// v5及之后的版本
npm i --save vue-area-linkage area-data

　　目前基本都是5之后的了

main.js中

import VueAreaLinkage from 'vue-area-linkage';Vue.use(VueAreaLinkage)

　　组件中

import {pca, pcaa} from 'area-data'; // 城市数据import 'vue-area-linkage/dist/index.css'; // 样式

 data () {return {pca: pca,pcaa: pcaa,selected2: '',}
}

d代码

// v5之前的版本
<area-select v-model="selected"></area-select>
<area-cascader v-model="selected2"></area-cascader>// v5及之后的版本
<area-select v-model="selected" :data="pca"></area-select> // 省市
// 省市区：<area-select v-model="selected" :data="pcaa"></area-select>
<area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市
// 省市区：<area-cascader v-model="selected2" :data="pcaa"></area-cascader>//setting
<area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>
<area-cascader type='all' v-model="selected2" :level='1' :data="pcaa"></area-cascader>

转载于:https://www.cnblogs.com/haonanZhang/p/10613127.html

vue城市三级联动组件 vue-area-linkage相关推荐

使用React实现选择城市三级联动组件
以下代码是初期写的代码,后来对代码进行优化,解决了初期的bug.完整的选择城市三级联动组件可以参考我的github项目中的代码,这是后期调试成功上传上去的React选择城市三级联动组件 <Sel ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
picker封装 uniapp_uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
台湾、香港、澳门的城市三级联动json
台湾.香港.澳门的城市三级联动json =========== 台湾 ============ {"citys": [{"areas": [{"are ...
城市三级联动功能实现
背景: 最近在进行商品购买流程的开发,需要用户填写自己的收货地址,为了保证地址的准确性,需要使用到全国城市的三级联动功能其中可以有三个思路: 1.使用 js 直接加载城市信息: 2.自己建立数据库, ...
收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...
全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
iOS 开发带区号的城市三级联动（xml解析）
iOS 开发带区号的城市三级联动(xml解析) demo下载地址: http://download.csdn.net/detail/qq_20176153/9514906

vue城市三级联动组件 vue-area-linkage

vue城市三级联动组件 vue-area-linkage相关推荐

最新文章

热门文章