dwqs / Vue Area Linkage
Licence: mit
省市区联动选择: https://dwqs.github.io/vue-area-linkage/
Stars: ✭ 439
Projects that are alternatives of or similar to Vue Area Linkage
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-76.99%)
Mutual labels: picker, vuejs2
Distpicker
⚠️ [Deprecated] No longer maintained. A simple jQuery plugin for picking provinces, cities and districts of China. (中国 / 省市区 / 三级联动 / 地址选择器)
Stars: ✭ 1,608 (+266.29%)
Mutual labels: china, picker
react-area-linkage
省市区联动选择: https://dwqs.github.io/react-area-linkage/
Stars: ✭ 52 (-88.15%)
Mutual labels: picker, china
Vue Sample Svg Icons
An opinionated example of how to use SVG icons in a Vue.js application
Stars: ✭ 399 (-9.11%)
Mutual labels: vuejs2
Mmdb china ip list
Geoip MaxMind Database for china ip list! This is also an example of generating MaxMind Database!
Stars: ✭ 424 (-3.42%)
Mutual labels: china
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (-1.14%)
Mutual labels: vuejs2
Vue Tagsinput
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
Stars: ✭ 375 (-14.58%)
Mutual labels: vuejs2
Fmphotopicker
A modern, simple and zero-dependency photo picker with an elegant and customizable image editor
Stars: ✭ 428 (-2.51%)
Mutual labels: picker
Insgallery
📸 Instagram-like image picker for Android (一款 UI 炫酷高仿 Instagram 的图片、视频选择器)
Stars: ✭ 409 (-6.83%)
Mutual labels: picker
React Native Actions Sheet
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
Stars: ✭ 412 (-6.15%)
Mutual labels: picker
Flutter wechat assets picker
An assets picker in WeChat style, support multi assets picking.
Stars: ✭ 398 (-9.34%)
Mutual labels: picker
Countrypickerview
A simple, customizable view for efficiently collecting country information in iOS apps.
Stars: ✭ 397 (-9.57%)
Mutual labels: picker
Vue Resize
A generic component to detect DOM elements resizing
Stars: ✭ 405 (-7.74%)
Mutual labels: vuejs2
vue-area-linkage
省市区联动选择. 组合数据来源:area-data
Installation
Install the pkg with npm:
// v5之前的版本
npm i --save vue-area-linkage
// v5及之后的版本
npm i --save vue-area-linkage area-data
or yarn
// v5之前的版本
yarn add vue-area-linkage
// v5及之后的版本
yarn add vue-area-linkage area-data
Usage
import Vue from 'vue';
import { pca, pcaa } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage)
// 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>
More demo to visit here.
On Demand Import
version >= 2.1.2
安装 babel-plugin-on-demand-import:
npm i babel-plugin-on-demand-import -D
修改 .babelrc
:
{
// ...
"plugins": [
["on-demand-import" {
"libraryName": "vue-area-linkage",
"libraryPath": "dist/lib"
}]
]
}
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import pcaa from 'area-data/pcaa';
// Only import AreaCascader component
import { AreaCascader } from 'vue-area-linkage';
Vue.use(AreaCascader);
<area-cascader v-model="val" level={1} :data="pcaa"></area-cascader>
// Only import AreaSelect component
import { AreaSelect } from 'vue-area-linkage';
Vue.use(AreaSelect);
<area-select v-model="val2" level={2} :data="pcaa"></area-select>
属性
area-select 组件
参数 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
type | String | all/code/text | code | 设置返回的数据格式 |
placeholders | Array | - | [] | 设置 placeholder text |
level | Number | 0/1/2 | 1 | 设置联动层级(0-只选省份/1-省市联动/2-省市区联动) |
size | String | small/medium/large | medium | 设置输入框的大小 |
disabled | Boolean | - | false | 是否禁用 |
data | Object | - | - | 地区数据(v5需要传入) |
icon | String | - | area-select-icon | 自定义下拉小图标 |
disableLinkage | Boolean | - | true | 地区选择是否进行联动 |
v4 仅支持省市区联动,即 v4 不再支持 level 的值为 3(省市区街联动)
area-cascader 组件
参数 | 类型 | 可选值 | 默认值 | 说明 |
---|---|---|---|---|
type | String | all/code/text | code | 设置返回的数据格式 |
placeholder | String | - | '' | 设置 placeholder text |
level | Number | 0/1 | 0 | 设置联动层级(0-省市联动/1-省市区联动) |
size | String | small/medium/large | medium | 设置输入框的大小 |
separator | String | - | '-' | 显示选中文本的分隔符 |
disabled | Boolean | - | false | 是否禁用 |
data | Object | - | - | 地区数据(v5需要传入) |
事件
事件名 | 说明 | 参数 |
---|---|---|
change | 选中值发生变化时触发 | 目前选择的值 |
change 事件在 1.2.5 之后提供
Related Project
License
MIT.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].