<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no, email=no">
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/mint-ui.css" />
<style type="text/css">
.mint-popup-bottom {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<!--<mt-header fixed title="固定在顶部"></mt-header>-->
<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
<div>
单个选择
</div>
<mt-picker :slots="slots1" @change="pick1change" ref="slots1"></mt-picker>
<div @click="sure1()" style="width: 100%;text-align: center;margin-top: 10px;">
确定
</div>
<div>
范围选择
</div>
<mt-picker :slots="slots2" @change="pick2change" ref="slots2"></mt-picker>
<div @click="sure2()" style="width: 100%;text-align: center;margin-top: 10px;">
确定
</div>
<!--<mt-datetime-picker
v-model="datapickerVisible"
type="date"
:start-date='startDate'
:end-date='endDate'
@confirm="handleConfirm"
ref="picker">
</mt-datetime-picker>-->
<mt-cell-swipe
title="标题文字"
:right="[
{
content: 'Delete',
style: { background: 'red', color: '#fff' },
handler: () => this.$messagebox('delete')
}
]"></mt-cell-swipe>
<mt-popup v-model="popupVisible" position="bottom">
<mt-picker :slots="slots3" @change="pick3change"></mt-picker>
</mt-popup>
</div>
</body>
<!-- 先引入 Vue -->
<script src="js/vue-2.5.js"></script>
<!-- 引入mint组件库 -->
<script src="js/mint-ui.js"></script>
<!-- 引入城市数据-->
<script src="js/city/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<!-- 日期格式化-->
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
<script>
var _this = new Vue({
el: '#app',
data: {
slots1: [{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'center'
}],
slots2: [{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'center'
}],
slots3: [{
flex: 1,
values: [],
className: 'slot1',
textAlign: 'center',
text:{name:'',value:""}
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: [],
className: 'slot3',
textAlign: 'center',
text:{name:'',value:""}
}, {
divider: true,
content: '-',
className: 'slot4'
}, {
flex: 1,
values: [],
className: 'slot5',
textAlign: 'center',
text:{name:'',value:""}
}],
popupVisible: false
/*,
datapickerVisible:true,
startDate: new Date('2018-12-24'), //设置开始时间
endDate: new Date('2019-01-22')*/
},
created: function() {
},
mounted: function() {
//this.initcitydata();
//this.$refs.picker.open();
console.log((new Date('2018-12-24')).getFullYear())
},
methods: {
pick1change: function(picker, values) {
},
sure1: function() {
alert( this.$refs.slots1.getSlotValue(0));
},
pick2change: function(picker, values) {
if(values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
},
sure2: function() {
alert(this.$refs.slots2.getSlotValue(0) + "--" + this.$refs.slots2.getSlotValue(1));
},
initcitydata: function() {
for(var i = 0; i < cityData3.length; i++) {
this.slots3[0].values.push(cityData3[i].text);
if(i==0){
this.slots3[0].text.name=cityData3[i].text;
this.slots3[0].text.value=cityData3[i].value;
}
}
for(var i = 0; i < cityData3[0].children.length; i++) {
this.slots3[2].values.push(cityData3[0].children[i].text);
if(i==0){
this.slots3[2].text.name=cityData3[0].children[i].text;
this.slots3[2].text.value=cityData3[0].children[i].value;
}
}
for(var i = 0; i < cityData3[0].children[0].children.length; i++) {
this.slots3[4].values.push(cityData3[0].children[0].children[i].text);
if(i==0){
this.slots3[4].text.name=cityData3[0].children[0].children[i].text;
this.slots3[4].text.value=cityData3[0].children[0].children[i].value;
}
}
},
pick3change: function(picker, values) {
let city = [];
let county = [];
for(var i = 0; i < cityData3.length; i++) {
if(cityData3[i].text == values[0]) {
for(var j = 0; j < cityData3[i].children.length; j++) {
city.push(cityData3[i].children[j].text);
if(cityData3[i].children[j].text == values[1]) {
for(var k = 0; k < cityData3[i].children[j].children.length; k++) {
county.push(cityData3[i].children[j].children[k].text)
}
}
}
break;
}
}
picker.setSlotValues(1, city);
picker.setSlotValues(2, county);
for(var i = 0; i < cityData3.length; i++) {
if(cityData3[i].text==picker.getSlotValue(0)){
this.slots3[0].text.name=cityData3[i].text;
this.slots3[0].text.value=cityData3[i].value;
for(var j = 0; j < cityData3[i].children.length; j++) {
if(cityData3[i].children[j].text==picker.getSlotValue(1)){
this.slots3[2].text.name=cityData3[i].children[j].text;
this.slots3[2].text.value=cityData3[i].children[j].value;
for(var k = 0; k < cityData3[i].children[j].children.length; k++) {
if(cityData3[i].children[j].children[k].text==picker.getSlotValue(2)){
this.slots3[4].text.name=cityData3[i].children[j].children[k].text;
this.slots3[4].text.value=cityData3[i].children[j].children[k].value;
break;
}
}
break;
}
}
break;
}
}
console.log(JSON.stringify(this.slots3[0].text),JSON.stringify(this.slots3[2].text),JSON.stringify(this.slots3[4].text));
}
/*,
handleConfirm:function(data) {
let date = moment(data).format('YYYY-MM-DD');
console.log(date)
}*/
}
})
</script>
</html>
vue+mintui 省市县3级联动.rar （11个子文件） 
mintui css 
mint-ui.css 53KB style.css 3KB img 
Picker(选择器+省市县3级).html 7KB js index.js 1KB city city.data-3.js 550KB vue-2.5.js 84KB mint-ui.js 106KB moment.js 105KB require.js 87KB clipboard.min.js 11KB .project 960B
评论0
最新资源