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

iview-area-v5

v1.6.1

Published

An area-linkage-component bases on Vue and iView-UI components Use area-data v5

Downloads

3

Readme

iview-area-v5

npm

一款基于Vue框架和iView-UI组件库开发的城市级联组件,数据包含中国的省(直辖市)、市、县区和乡镇街,数据来源area-data v5

English Document 线上DEMO

iview-area有两种形式的级联:

  • 下拉菜单(基于iview的Select组件)
  • 级联选择(基于iview的Cascader组件)

install 安装

    npm install iview-area-v5 --save

use 使用

在main.js中写入下面的代码

    import iviewArea from 'iview-area-v5';
    import Vue from 'vue';
    Vue.use(iviewArea);

接下来,你就可以在页面中使用iview-area了

<template>
    <al-selector v-model="res_s"/>
    <al-cascader v-model="res_c"/>
</template>
<script>
    export default {
        data () {
            return {
                res_s: [],
                res_c: []
            }
        }
    }
</script>

config 配置

al-selector:

属性 | 说明 |  类型 |  默认值 :-------: | ------- | :-------: | :-------: value|用于存放结果的数组,建议使用v-model来做双向绑定|Array|无 v-model|用于存放结果的数组,选择了数据后会自动更新,可传入默认显示的数据,详见表格下补充|Array|无 gutter|设置各级别选择器之间的距离,单位px|String | Number|10 level|要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2、3四级|String | Number|3 data-type|返回数据的类型,'all':城市编码和名称,'code':只返回编码,'name':只返回名称,数据格式请看表格下面的补充说明|String|all searchable|是否可搜索,添加该属性则点击选择器后可输入名称搜索|Boolean|false size|选择器尺寸,该属性同iview组件select的size属性,可选值为small,large,default|String|default auto|是否在选择一级之后自动选择之后所有等级的选择器(自动选中为列表第一项)|Boolean|false placeholder|选择器未选择时显示的占位字符,若为字符串,则各级别选择器均使用该作为占位字符,若为数组,根据数组对应位置的字符串设置选择器占位字符,若数组元素少于级别数,缺省的则设为默认数组中对应的占位字符|Array | String|['请选择省', '请选择市', '请选择县区', '请选择街道'] not-found-text|无数据时显示的文字提示,规则同placeholder属性|Array | String|['无匹配市', '无匹配县区', '无匹配街道'] disabled|设置禁用整个级联选择器或某个级别的选择器,可只写disabled,也可写:disabled="true""false",或传入一个数组,如禁用二级和四级选择器则为[1, 3],也可传入数值指定从指定级别开始禁用|Boolean | Array | Number|false

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

补充说明:

data-type数据格式补充说明:

  • data-type="all"时,返回数据格式如下:
    [
        {
            code: '130000',
            name: '河北省'
        },
        {
            code: '130100',
            name: '石家庄市'
        }
    ]
  • data-type="name"时,返回数据格式如下:
    ['河北省', '石家庄市']
  • data-type="code"时,返回数据格式如下:
    ['130000', '130100']

v-model属性补充说明:

  • 传入名称数组,若所设地方名称未找到或地方所属关系不对,则显示该等级列表中第一个地方,若数组地方个数少于城市及联选择器的等级数目,则后面缺省的地方名默认已列表中第一个地方显示;且如果设置了数组且不为空,则每次选择一个等级的地方后下面级别的选择器的列表都会更新,且默认选中的为对应列表中第一个地方

  ex: ['河北省', '长春市']

- 传入编号数组,若所设编号未找到对应地方或地方所属关系不对,则显示该等级列表中第一个地方,规则同上

ex: ['130000', '120100']

- 传入空数组 []

al-cascader:

属性 | 说明 |  类型 |  默认值 :-------: | ------- | :-------: | :-------: value|用于存放结果的数组,建议使用v-model来做双向绑定|无|无 v-model|用于存放结果的数组,选择了数据后会自动更新|无|无 level|要显示的级别,如设为2则显示省、市和县,即3级,级别可设为0、1、2、3四级|String | Number|3 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(' / ')

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