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

@cniot/address-select

v0.3.0

Published

地址选择器

Downloads

29

Readme

说明

地址选择组件

使用

引入

import AddressSelect from '@cniot/address-select';

使用

<AddressSelect
    config={{
      apiModel: 'api',
      urlBase: 'your urlBase', // 必填,对应接口域名
    }}
  />

API

| 属性 | 是否必填 | 默认值 | 说明 | | -------------------- | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | value | 否 | [] (单选时为'') | (受控)当前值, 传入最后一级的 regionId, 例如 广东省-广州市-天河区 则传入天河区的 regionId | | defaultValue | 否 | [] (单选时为'') | (非受控)默认值 | | onChange | 否 | (value, data, extra) => {} | 传入 onChange 成为受控组件, 透出的 value: string[] regionId[](单选时为 regionId: string), 最下级的 regionId, 例如 广东省-广州市-天河区 则透出天河区的 regionId | | useDetailValue | 否 | false | 把 value onChange 第一个参数从字符串变成对象,具体格式如下 | | onVisibleChange | 否 | (visible, type) => {} | 下拉框显示或关闭时触发事件的回调函数 | | multiple | 否 | true | | | disabled | 否 | false | 是否禁用选择器 | | showTopLevel | 否 | false | 是否展示【国家】层级 | | showSearch | 否 | false | 开启搜索,cdn 模式和 mtop 模式行为不同,api 模式暂不支持 | | showFooter | 否 | false | 开启底部快捷操作(全选、反选、清除),仅多选模式下生效 | | dataLanguage | 否 | local | 地址数据国际化, 缺省为 local。可选值为 ISO 码,如 CN、EN | | locale | 否 | - | 文案多语言,默认中文。文案内置中、英、日、韩、俄语言包,也可自行传入。 | | maxLevel | 否 | 4 | 显示到几级地址,针对所有国家都生效 | | levelConfig | 否 | - | 只有在多个国家时(iso='')生效,适用于单独设置某个国家区划层级,优先级高于 maxLevel。示例: { CN: 2 }, key 为国家对应 iso | | iso | 否 | CN | (填''或其他空值)且(showTopLevel=true)时,可选择国家 | | maxTagCount | 否 | - | 最多显示多少个 tag, 仅在多选模式下有效 | | maxTagPlaceholder | 否 | - | 隐藏多余 tag 时显示的内容,在 maxTagCount 生效时起作用 | | changeOnSelect | 否 | false | 是否选中即发生改变, 仅在单选模式下有效 | | canOnlyCheckLeaf | 否 | false | 是否仅叶子节点可勾选,仅在多选模式下有效 | | showDisabledDivision | 否 | false | 地址数据库中,是否展示已删除数据 | | markedDeletion | 否 | true | 标记已删除数据,配置已删除数据显示时生效, 如果传入了 itemRender 需要自己处理, 不开启 showDisabledDivision 也不会有这个 | | needSkipLevelData | 否 | true | 是否需要跳级数据,例如,maxLevel = 3, showTopLevel = false, 广东省-中山市 广东省-东莞市 下没有区, 直接到街道, 开启 false 就不显示 | | includeList | 否 | [] | 国家列表显示,只显示某些国家,ISO 码['CN', 'SG'] | | excludeList | 否 | [] | 国家列表显示,隐藏某些国家, ISO 码['CN', 'SG'] | | blackList | 否 | [] | 过滤某些区划不显示,数组内为区划 id。不包括国家级别,过滤国家请使用 excludeList | | divisionSort | 否 | - | 区划排序,默认按字母进行排序。可选值 ID 和 EN | | readOnly | 否 | - | 预览模式 | | config | 是 | configProps | 地址库参数 |

config 相关配置

| 属性 | 是否必填 | 默认值 | 说明 | | -------- | -------- | ------ | -------------------------------------------------------------------------------------------------- | | apiModel | 否 | mtop | 可选值,"api","cdn" | | cdnUrl | 是 | 无 | apiModel 为 cdn 模式下的 cdn 地址 当前版本:https://division-data.alicdn.com/simple/addr_1_4_all.js | | urlBase | 否 | 无 | apiModel 为 api 时必填, host 地址,如https://oneapi.alibaba-inc.com/mock/CNBP | | params | 否 | 无 | api 模式,请求时携带参数,例如 { version: '18Q4' } |

useDetailValue 开启时数据格式

{
  countryCode: null,
  countryName: null,

  provinceCode: null,
  provinceName: null,

  cityCode: null,
  cityName: null,

  countyCode: null,
  countyName: null,

  streetCode: null,
  streetName: null,
}