【巷子】---vue基于mint-ui三级联动---【vue】
一、基本配置
https://github.com/modood/Administrative-divisions-of-China
三级联动数据地址
二、vue基本配置
1、cnpm install mint-ui --save-dev
2、引入
<template>
<div>
<mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
<p>地址3级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</div>
</template> <style>
</style> <script>
import Vue from "vue";
import { Picker } from "mint-ui";
import myaddress from "../../data.json";
Vue.component(Picker.name, Picker); export default {
data() {
return {
myAddressSlots: [
{
flex: 1,//对应 slot CSS 的 flex 值
defaultIndex: 1,//对应 slot 初始选中值,需传入其在 values 数组中的序号,默认为 0
values: Object.keys(myaddress), //省份数组
className: "slot1",//对应 slot 的类名
textAlign: "center"//对应 slot 的对齐方式
},
{
divider: true,//对应 slot 是否为分隔符
content: "-",//分隔符 slot 的显示文本
className: "slot2"
},
{
flex: 1,
values: [],
className: "slot3",
textAlign: "center"
},
{
divider: true,
content: "-",
className: "slot4"
},
{
flex: 1,
values: [],
className: "slot5",
textAlign: "center"
}
],
myAddressProvince: "省",
myAddressCity: "市",
myAddresscounty: "区/县"
};
},
created() {},
methods: {
onMyAddressChange(picker, values) {
if (myaddress[values[0]]) {
//这个判断类似于v-if的效果(可以不加,但是vue会报错,很不爽)
picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组,当前省的数组
picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
//获取省
this.myAddressProvince = values[0];
//获取市
this.myAddressCity = values[1];
//获取县
this.myAddresscounty = values[2]; /*
setSlotValues(index, values):设定给定 slot 的备选值数组 */
}
}
},
mounted() {
this.$nextTick(() => {
//vue里面全部加载好了再执行的函数 (类似于setTimeout)
this.myAddressSlots[0].defaultIndex = 0;
// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
//因为我没有看过源码(我猜测是因为数据没有改变,不会触发更新)
});
}
};
</script>
【巷子】---vue基于mint-ui三级联动---【vue】的更多相关文章
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- vue移动端地址三级联动组件(一)
vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...
- 用vue实现省市县三级联动
我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...
- vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
- C# 基于Bootstrap的三级联动
实现效果如图: 一.声明市.县.乡对应的下拉控件select <div class="form-group"> <label class="col-sm ...
- 基于JQ的三级联动菜单选择
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
- vue基于element-ui的三级CheckBox复选框
最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...
- vue移动端地址三级联动组件(二)
继续上一篇: 子组件css: <style scoped lang="less"> #city { width: 100%; height: 100%; positio ...
随机推荐
- Nginx 反向代理解决favicon404错误问题
# set site favicon location /favicon.ico { root html; } OR location = /favicon.ico { log_not_found o ...
- java获取map中的最小KEY,最小VALUE
import java.util.Arrays; import java.util.Collection; import java.util.HashMap; import java.util.Map ...
- DropDownListFor的种种纠结(禁止转载)
严重禁止转载,好多爬虫软件为了浏览到处抓东西,真缺德 具有键“CorpType”的 ViewData 项属于类型“System.Int64”,但它必须属于类型“IEnumerable<Selec ...
- cocos2d-x 3.0 在lua中调用自定义类
环境 windows8, cocos2d-x 3.0, 现在开始安装需要的一些其它包 1. 按README.mdown文档上面要求的, 下载在windows下要安装的东东, 主要就是python2.7 ...
- GreenPlum数据加载
1. copy命令 对于数据加载,GreenPlum数据库提供copy工具,copy工具源于PostgreSQL数据库,copy命令支持文件与表之间的数据加载和表对文件的数据卸载.使用copy命令进行 ...
- selenium之 chromedriver与chrome版本映射表(更新至v2.31)
转自:http://blog.csdn.net/huilan_same/article/details/51896672 chromedriver版本 支持的Chrome版本 v2.31 v58-60 ...
- Android系统启动流程
当系统引导程序启动Linux内核,内核会记载各种数据结构,和驱动程序,加载完毕之后,Android系统开始启动并加载第一个用户级别的进程:init(system/core/init/Init.c) 查 ...
- button按钮不能点击鼠标形状css 代码,禁用button按钮时鼠标形状
cursor:not-allowed;
- 教你在windows下安装使用配置vim+gcc[转]
转自http://blog.163.com/lixiangqiu_9202/blog/static/535750372012461190722/ 一直在使用linux,但有时也会去虚拟机里的winxp ...
- Spring Mvc 页面传递数组到后台接收
1.定义一个简单的类 User.java public class User { private Integer id; private String name; public Integer get ...