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

@china5a/vue-multi-address

v1.0.7

Published

A Multifunctional Address Plug-in Strongly Dependent on iView UI Library

Downloads

75

Readme

vue-multi-address

  • 多功能自定义拓展地址库,支持 数组type 不同类型的三级联库
  • 强依赖iview

BUG

  • 在iview modal tabs 中出现显示异常 -2017-9-18 fiex
  • 当重置prop 是,无法联动data的值变化 -2019年6月24日20:10:46 fix
  • 移除亢余代码 —— 2019年6月25日23:28:29
  • 补全省份全称 —— 2019年6月25日23:33:11

Tips非常重要

  • 这个项目强依赖 于 https://github.com/iview/iview ,不然css 会Boooooooom啊
  • 参考类型项目 https://github.com/G-Veigar/vue-address-picker

install

npm install --save vue-multi-address

父组件中

<template>
  <address-picker v-model="location" :level="3" :type='["unit","address"]' @on-change="getChangeValue"></address-picker>
</template>

event 子组件返回值 地区的对象 {province,city,district}

  • @on-change return{Object}

methods:{
  getChangeValue(location)  {
    console.info(location);
  }
}

props

  • level {number}
	level 分为三级 1 2 3,
	level 1 则只会出现一个级联
	level 2 则只会出现两个级联
	level 3 则只会出现三个级联
	
  • type {array}
	:type='["unit","address"]'
	
	目前只支持 两个类型库,需要的话,自己在源码里面增加以适应不同的场合
	如果空数组则default : address
  • value {Object} (双向绑定) 支持value 传入默认值
	<address-picker :value="location" :level="3" :type='["unit","address"]' @on-change="getChangeValue" ></address-picker>

此时 在js 里面这样赋予默认值

data(){
      return {
        location: {
          province: "浙江",
          city: "",
          district: ""
        }
      }
    }

lib 库 格式 纯js文件


module.exports={
	{ "name": "北京", "city": [{ "name": "北京", "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"] }] },
	{ "name": "天津", "city": [{ "name": "天津", "area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟  县"] }] }
}