Giter Club home page Giter Club logo

area-linkage-vue's Introduction

npm-version license

area-linkage-vue

省市区街道四级联动选择. 组合数据来源:area-data-vue

安装

使用 npm 安装

npm i --save area-linkage-vue area-data-vue

使用

import Vue from 'vue';
import { pcaa } from 'area-data-vue';
import 'area-linkage-vue/dist/index.css';
import AreaLinkageVue from 'area-linkage-vue';
Vue.prototype.$pcaa = pcaa;

Vue.use(AreaLinkageVue)
<area-select v-model="selected" :data="$pcaa" :level="0"></area-select>  // 省
<area-select v-model="selected" :data="$pcaa" :level="1"></area-select>  // 省市
<area-select v-model="selected" :data="$pcaa" :level="2"></area-select>  // 省市区
<area-select v-model="selected" :data="$pcaa" :level="3"></area-select>  // 省市区街道

<area-cascader v-model="selected2" :data="$pcaa" :level="0"></area-cascader>  // 省市
<area-cascader v-model="selected2" :data="$pcaa" :level="1"></area-cascader> // 省市区
<area-cascader v-model="selected2" :data="$pcaa" :level="2"></area-cascader> // 省市区街道

更多演示访问 这里.

属性

area-select 组件

参数 类型 可选值 默认值 说明
type String all/code/text code 设置返回的数据格式
placeholders Array - [] 设置 placeholder text
level Number 0/1/2/3 1 设置联动层级(0-只选省份/1-省市联动/2-省市区联动/3-省市区街道联动)
size String small/medium/large medium 设置输入框的大小
disabled Boolean - false 是否禁用
data Object - - 地区数据
icon String - area-select-icon 自定义下拉小图标
disableLinkage Boolean - true 地区选择是否进行联动

area-cascader 组件

参数 类型 可选值 默认值 说明
type String all/code/text code 设置返回的数据格式
placeholder String - '' 设置 placeholder text
level Number 0/1/2 0 设置联动层级(0-省市联动/1-省市区联动/2-省市区街道联动)
size String small/medium/large medium 设置输入框的大小
separator String - '-' 显示选中文本的分隔符
disabled Boolean - false 是否禁用
data Object - - 地区数据

事件

事件名 说明 参数
change 选中值发生变化时触发 目前选择的值

License

MIT.

area-linkage-vue's People

Contributors

dwqs avatar jingxiangrensheng avatar ice6 avatar wuliupo avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.