npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ar-cascader

v1.1.2

Published

regionalism cascader base on view-design,中国行政区域区域划分(含港澳台)级联选择器,三级,省-市-区,数据来源于国家统计局2023年6月统计用区划代码

Downloads

74

Readme

ar-cascader

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

中国行政区域区域划分(含港澳台),最多支持三级,省-市-区,数据来源于国家统计局2023年6月统计用区划代码, 数据通过 npm 依赖 @zhangqingcq/china-area-data 引入

regionalism 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

如果安装依赖失败,可更换国内的镜像再试(淘宝镜像https://registry.npmmirror.com、腾讯云镜像https://mirrors.cloud.tencent.com/npm/)

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

注意

  • 在开启change-on-select时,数据回显不受level限制,如开启level:2三级级联时,传入[110000000000]可正确回显为北京市,但不开启 change-on-select时,传入数据必须大于等于当前level设置,如:开启level:1二级级联时,传入[ 110000000000, 110100000000, 110105000000 ]可正确 回显北京市/市辖区,但传入[110000000000]将无法回显,组件已选项将为空。

  • 本组件于2024年7月19日更新重构版本[email protected] (vue2)[email protected] (vue3),主要改动为:

    • 使用国家统计局2023年6月统计用区划代码作为数据源。
    • 数据源通过npm依赖@zhangqingcq/china-area-data引入,同时也欢迎大家使用该依赖作为数据源封装自己喜欢的行政区域组件,该数据可以在view-design的cascader组件直接使用。
    • 各级行政区域代码code统一改为标准的12位,默认number格式,组件返回的code都是number格式,传入code数据回显number和string都支持。
    • 组件支持行政区域名字name模糊匹配搜索。
    • 以前支持的功能都支持,如v-model值格式依然支持'all'、'code'、'name'三种,且无论哪种模式下,所有格式的数据传入组件都可以回显,包括以前旧数据6位的code。
    • 组件示例也重写了,可以简单方便的直接在示例页试用组件的各种功能。