ar-cascader

基于view-design的行政区域级联组件

administrative region cascader base on view-design

vue2

install 安装

  npm install ar-cascader
  
  or
  
  pnpm add ar-cascader

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.安装依赖

  pnpm i

3.运行项目

  pnpm serve

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

vue3

install 安装

  npm install ar-cascader@vue3
  
  or
  
  pnpm add ar-cascader@vue3

use 使用

  //vue SFC
  
  import {ref} from 'vue'
  import ArCascader from 'ar-cascader';
  const value = ref([])

  <ArCascader v-model="value"/>

示例

1.拉取git项目ar-cascader

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

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

2.安装依赖

  pnpm i

3.运行项目

  pnpm dev

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

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