官网地址: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. Spring Boot2.0之热部署原理

    所谓的热部署:比如项目的热部署,就是在应用程序在不停止的情况下,实现新的部署 原理: 实用类加载器(classloader重新读取字节码文件到jvm内存) 如何纯手写一个热部署功能: 1.监听 cla ...

  2. db2move 数据导出整理

    db2move <database-name> <action> [<option>   <value>] 命令解释:1).database-name, ...

  3. dubbo的防痴呆设计

    项目中也经常会遇到各种因为配置而引入的问题,很多技术支持解决不掉就找开发,结果发现大部分还是配置错误或网络不通等.如果在设计之初就能考虑到并针对这些问题做出应对设计,甚至给出异常的解决方案,确实可以减 ...

  4. transition插件

    $("#box").transition({ opacity: 0.1, scale: 0.3 }); $("#box").transition({ opaci ...

  5. bzoj 3456 城市规划 —— 分治FFT / 多项式求逆 / 指数型生成函数(多项式求ln)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3456 首先考虑DP做法,正难则反,考虑所有情况减去不连通的情况: 而不连通的情况就是那个经典 ...

  6. linux 中spfvim安装

    1. 安装 git 1.1 安装依赖的包: curl          curl-devel     zlib-devel         openssl-devel      perl      c ...

  7. Happy Great BG-卡精度

    Happy Great BG Time Limit: 2000ms Case Time Limit: 2000ms Memory Limit: 65536KB   64-bit integer IO ...

  8. Java的Socket通信(多线程)(1)

    如图: 思路: ①首先创建服务器端Socket,指定并侦听某一个端口,然后循环监听开始等待客户端的连接…. ②创建客户端socket,指定服务器地址和端口,然后获取输出流,向服务器端发送请求,并关闭s ...

  9. linux查询内存真是利用率

    使用top工具查看到Suse Linux的内存占用率很大,可能97%以上,我知道这是Linux的内存使用机制,先将内存整个管理起来,需要的时候在分配给单个进程.但是如果我需要查看系统真实的内存占用率应 ...

  10. <正则吃饺子> :关于oracle 中 with的简单使用

    oracle中 with的简单使用介绍,具体可以参见其他的博文介绍,在这里只是简单的介绍: with 构建了一个临时表,类似于存储过程中的游标,我是这么理解的. 一.数据准备: select * fr ...