官网地址: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. 51nod 1022 石子归并 V2 —— DP四边形不等式优化

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1022 1022 石子归并 V2  基准时间限制:1 秒 空间限 ...

  2. Android Studio 代码混淆(你真的会混淆吗)

    一.前言 今天要打包新产品,突然忘了混淆的参数是怎么写的了,虽然之前也混淆过,可是具体配置的参数代码有些记不起来了,因此决定花点时间写篇博客记录一下,方便以后查找和自己的记忆. 二.Android S ...

  3. composer镜像安装laravel

    博主最近在学习Laravel的框架的相关知识,对于Laravel的许多新特性,大家最好还是去查看官网文档最好,Laravel的文档非常完善,中文英文的都有,可以很好的解决你的困惑. 但是我们会发现学习 ...

  4. BZOJ3674:可持久化并查集加强版

    浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...

  5. C++常见错误总结

    1.  error C2871: 'std' : does not exist or is not a namespace 原来 C++有两个不同版本的头文件.引入名字空间这个概念以前编译器用的是#i ...

  6. JavaScript的中类型转换

    JavaScript的类型转换 By 大志若愚  (一)转换为字符串 X + '' toString() String() 函数转换为字符串一般是将函数体输出,不过可以重写其toString方法  ( ...

  7. Ubuntu 重启命令

    重启命令: 1.直接reboot 2.shutdown -r now 这两种都是立刻重启 3.shutdown -r 大概30秒后会重启 关机命令:1.halt   立刻关机2.poweroff 立刻 ...

  8. 解决Response输出时乱码

    Response ServletResponse – 通用的response提供了一个响应应该具有的最基本的属性和方法 | |- HttpServletResponse – 在ServletRespo ...

  9. webSocket 简单介绍

    WebSocket :WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信.                       简单的说 ...

  10. 错误:(26, 13) Failed to resolve: com.android.support:appcompat-v7:27.+

    小编也是初学安卓,今天配置环境的时候遇到这个问题了,搞了半天终于找到了问题 在build.gradle中添加 allprojects { repositories { jcenter() maven ...