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 |