官网地址:https://distpicker.uine.org/

安装:

npm install v-distpicker --save

局部注册:

import VDistpicker from 'v-distpicker'

export default {
components: { VDistpicker }
}

使用:

<template>
<v-distpicker></v-distpicker>
<template> <script>
import VDistpicker from 'v-distpicker' export default {
components: { VDistpicker },
}
</script>

为啥变得这么简单,因为底层做了一个组件封装,如下所示:

之后,改吧改吧,可以了

基于Vue的省市区三级联动插件的更多相关文章

  1. vue 引用省市区三级联动(插件)

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  2. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  3. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  4. vue 引用省市区三级联动(element-ui Cascader)

    npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...

  5. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  6. vue 引用省市区三级联动(element-ui select)

    npm 下载 axios npm install --save axios static 静态文件夹里 创建 json 文件夹 json 文件夹里创建 map.json map.json 文件里写 ( ...

  7. vue实现省市区三级联动

    npm 安装 npm install v-distpicker --save Vue全局引入组件 import Distpicker from 'v-distpicker' Vue.component ...

  8. 省市区三级联动插件:app-jquery-cityselect.js

    (function ($) { $.fn.cityselect = function (options) { var settings = $.extend ({}, options); this.e ...

  9. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

随机推荐

  1. 利用Python+阿里云实现DDNS(动态域名解析)

    引子我想大家应该都很熟悉DNS了,这回在DNS前面加了一个D又变成了什么呢?这个D就是Dynamic(动态),也就是说,按照传统,一个域名所对应的IP地址应该是定死的,而使用了DDNS后,域名所对应的 ...

  2. 分享知识-快乐自己:Spring中的(三种)异常处理机制

    案例目录结构: Web.xml 配置: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...

  3. jauery改变inout的type属性报错type property can’t be changed

    uncaught exception type property can’t be changed 使用代码$("#pwd").attr("type",&quo ...

  4. listen 74

    Genes Link Touch and Hearing Sound and touch may seem completely separate, except possibly when play ...

  5. hdu-2874 Connections between cities(lca+tarjan+并查集)

    题目链接: Connections between cities Time Limit: 10000/5000 MS (Java/Others)     Memory Limit: 32768/327 ...

  6. 每天一个linux命令(5):mkdir命令

    版权声明更新:2017-05-09博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下命令mkdir. 2 ...

  7. aoj 0033 玉

    図のように二股に分かれている容器があります.1 から 10 までの番号が付けられた10 個の玉を容器の開口部 A から落とし.左の筒 B か右の筒 C に玉を入れます.板 D は支点 E を中心に左右 ...

  8. DS:template

    ylbtech-DS: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.cnbl ...

  9. Python文件运行时报TabError: inconsistent use of tabs and spaces in indentation

    1. 问题描述 Python文件运行时报TabError: inconsistent use of tabs and spaces in indentation 2. 问题原因 tab 和 space ...

  10. RHEL6安装JDK7

    一.安装准备 1.操作系统:redhat-server-6.1-x86_64 下载地址: http://www.verycd.com/files/d39b97540497d24175340915244 ...