ar-cascader

administrative region cascader base on view-design

Usage no npm install needed!

<script type="module">
  import arCascader from 'https://cdn.skypack.dev/ar-cascader';
</script>

README

ar-cascader

基于view-design的行政区域级联组件(基于iviewArea中alCascader改良)

administrative region cascader base on view-design

install 安装

    npm install ar-cascader --save

use 使用

在main.js中写入下面的代码

    import arCascader from 'ar-cascader';
    import Vue from 'vue';
    Vue.use(arCascader);

接下来,你就可以在页面中使用ar-cascader了

<template>
    <ar-cascader v-model="value"/>
</template>
<script>
    export default {
        data () {
            return {
                value: []
            }
        }
    }
</script>

示例

1.拉取git项目ar-cascader

git clone https://github.com/RickyHeaven/ar-cascader.git

(也可以直接下载zip文件)

2.安装依赖 npm i

3.运行项目

npm run serve

然后你就能在浏览器看到跑起来的示例了~

config 配置

属性 说明  类型  默认值
value 用于存放结果的数组,建议使用v-model来做双向绑定
v-model 用于存放结果的数组,选择了数据后会自动更新
level 要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2三级(area-data到2.0版本以后不再包含街道数据) String | Number 2
data-type 返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式同al-selector补充说明 String all
size 选择器尺寸,该属性同iview组件cascader的size属性,可选值为small,large String
placeholder 选择器未选择时显示的占位字符 String '请选择']
disabled 是否禁用选择器 Boolean false
render-format 选择后展示的函数,用于自定义显示格式 Function label => label.join(' / ')
change-on-select 当此项为 true 时,点选每级菜单选项值都会发生变化 Boolean false
## 事件
事件 说明 返回值
:-------: ------- :-------:
on-change 选择完成后的回调,返回值此时已选的数据数组 data