1.0.10 • Published 9 months ago

ar-cascader v1.0.10

Weekly downloads
-
License
ISC
Repository
github
Last release
9 months ago

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 | Number2
data-type返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式同al-selector补充说明Stringall
size选择器尺寸,该属性同iview组件cascader的size属性,可选值为small,largeString
placeholder选择器未选择时显示的占位字符String'请选择']
disabled是否禁用选择器Booleanfalse
render-format选择后展示的函数,用于自定义显示格式Functionlabel => label.join(' / ')
change-on-select当此项为 true 时,点选每级菜单选项值都会发生变化Booleanfalse

事件

事件说明返回值
on-change选择完成后的回调,返回值此时已选的数据数组data