npm 安装

npm install v-distpicker --save

Vue全局引入组件

import Distpicker from 'v-distpicker'

Vue.component('v-distpicker', Distpicker)

也可以那里需要,哪里引入

import VDistpicker from 'v-distpicker'

export default {
components: { VDistpicker }
}
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

在声明vue实例的时候,定义 一个onSelected方法

<v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker>

onSelected(data) {
this.address.province = data.province.value
this.address.city = data.city.value
this.address.county = data.area.value
},

  

vue实现省市区三级联动的更多相关文章

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

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

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

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

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

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

  4. 基于Vue的省市区三级联动插件

    官网地址:https://distpicker.uine.org/ 安装: npm install v-distpicker --save 局部注册: import VDistpicker from ...

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

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

  6. vue省市区三级联动

    仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...

  7. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  8. Vue 国家省市三级联动

    在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...

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

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

随机推荐

  1. lavarel 框架 搜索后分页

    ................框架控制器 public function list(Request $request){ $word=$request->input('word'); $arr ...

  2. tp5 Redis缓冲的设置与清除

    控制器代码: //设置缓冲的方法 public function order() { $word = input('word');//接受搜索值 //题意:将订单数据使用redis进行缓存中,第二次读 ...

  3. ffmpeg修改视频文件的分辨率

    在本文中,我们将展示如何调整任何视频文件的大小. 这种方法是在Linux系统(几乎任何发行版)中调整视频文件大小的最佳方法之一,也是Windows和Mac用户的绝佳替代方案. 更改视频文件的分辨率将是 ...

  4. Spring 中的 bean线程安全性分析

    首先:Spring 中的 bean不是线程安全的 Spring容器中的Bean是否线程安全,容器本身并没有提供Bean的线程安全策略,因此可以说Spring容器中的Bean本身不具备线程安全的特性,但 ...

  5. (九)React Ant Design Pro + .Net5 WebApi:后端环境搭建-IdentityServer4-简单配置

    一.简介 IdentityServer4 是用于 ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架,通过中间件的方式集成.JWT(json web token) ...

  6. 保姆级SpringBoot+Vue图片上传到阿里云OSS教程

    小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...

  7. MariaDB开启日志审计功能

    对于MySQL.Percona.MariaDB三家都有自己的审计插件,但是MySQL的审计插件是只有企业版才有的,同时也有很多第三方的的MySQL的审计插件,而Percona和MariaDB都是GPL ...

  8. 使用MariaDB backup恢复主从

    安装 yum install MariaDB-backup 备份命令 工具需要直接操作数据目录,需要在数据库服务器上执行 mariabackup --backup --target-dir=/data ...

  9. Linux C申请内存三种基本方式

    一份代码可以知道具体方式和原理: int main() { int stack_a; int stack_b; static int static_c; static int static_d; in ...

  10. Jenkins+Docker+Git 自动化部署

    Jenkins+Docker+Git 自动化部署图文教程 https://blog.csdn.net/qq_38252039/article/details/89791247 前言: 通过几天的学习和 ...