v-distpicker的简单安装和使用 — 一款地区选择插件

```
npm install v-distpicker --save
```

2.引用方式(二选一)

(1)在main.js中引入

import VDistpicker from 'v-distpicker';//引入v-distpicker
Vue.component('v-distpicker',VDistpicker);//全局注册v-distpicker

(2)在想要用的.vue文件中引用

import VDistpicker from 'v-distpicker';//引入v-distpicker
export default{components:{VDistpicker//注册组件}data(){return {}}
}

3.使用方式

(1)一般模式

```
<v-distpicker></v-distpicker>
```

(2)有默认值模式

<v-distpicker province="广东省"city="茂名市"area="茂南区">
</v-distpicker>

(3)正常应用模式

<v-distpicker @province="provinceChange" province="广东省"@city="cityChange" city="茂名市"@area="areaChange" area="茂南区">
</v-distpicker>export default{data(){return {data:[]//从接口获取到的数据}},methods:{//三个选择框的值改变事件，data参数：返回选择框改变时候的值，是一个对象provinceChange(data){//省this.data['merchantProvince'] = data.value},cityChange(){//市this.data['merchantCity'] = data.value},areaChange(){//区、县this.data['merchantTown'] = data.value}}
}

(4)移动端

加上type=“mobile”

<v-distpicker type='mobile'></v-distpicker>

4.出现问题

在main.js引入的时候，会提示如图所示的问题，但是是可以正常使用的。

本文转自 https://blog.csdn.net/weixin_46801609/article/details/109609143，如有侵权，请联系删除。

v-distpicker的简单安装和使用 — 一款地区选择插件相关推荐

3s安装JupyterLab，4步完成JupyterLab插件安装（附多款高生产力插件推荐）
Jupyter相信大家都不陌生,我们会经常用Jupyter来完成数据清理.转化.数值模拟.统计建模.机器学习等等,而且Jupyter本身将代码和输出集成在一个文档上,在日常工作过程中更加有效的提高我们 ...
Linux简单安装Mysql+Apach+PHP+phpMyAdmin
Linux简单安装Mysql+Apach+PHP+phpMyAdmin 2008年06月02日星期一上午 01:00 从网上看到许多Apache+Mysql+PHP的安装文档,但有的总是会有写错误 ...
简单安装和yum安装的区别
源码简单安装和yum安装的差异: 这里先介绍一个命令: ./nginx -V,通过该命令可以查看到所安装Nginx的版本及相关配置信息. 简单安装 yum安装解压Nginx目录执行tar -zxv ...
macos下使用aria2_macOS下 ansible简单安装及基础使用
macOS下 ansible简单安装及基础使用,其实命令是相通的,我这篇测试基本都是在macOS下执行的.在Linux操作系统下几乎同样的办法. ansible是一种自动化运维工具,基于Python开 ...
基础归纳-Express简单安装可参考
0.介绍 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一个完 ...
Nginx运维之二简单安装和环境搭建
Nginx运维之二简单安装和环境配置安装环境 gcc 安装 PCRE pcre-devel 安装 zlib 安装 OpenSSL 安装下载安装配置安装编译安装配置编辑(案例) 启动与停止 ...
oracle11g初次使用教程,Oracle11g简单安装和使用教程
这篇文章主要为大家详细介绍了Oracle11g简单安装和使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下一.Oracle11g的安装过程(Windows版本)很简单,步骤为: 1. 首先从 ...
cacti简单安装部署
cacti简单安装部署目录 cacti简单部署 1 环境依赖包部署 1 1. cacti中文版0.8e搭建 2 2. cacti安装向导 url:http://192. ...
[异常解决] ubuntu上安装虚拟机遇到的问题（vmware坑了，virtual-box简单安装，在virtual-box中安装精简版win7）
[异常解决] ubuntu上安装虚拟机遇到的问题(vmware坑了,virtual-box简单安装,在virtual-box中安装精简版win7) 参考文章: (1)[异常解决] ubuntu上安装虚 ...

v-distpicker的简单安装和使用 — 一款地区选择插件

1.安装

（1）进入到对应的vue项目目录中，打开终端

（2）输入安装指令

2.引用方式(二选一)

(1)在main.js中引入

(2)在想要用的.vue文件中引用

3.使用方式

(1)一般模式

(2)有默认值模式

(3)正常应用模式

(4)移动端

4.出现问题

v-distpicker的简单安装和使用 — 一款地区选择插件相关推荐

最新文章

热门文章