vue.js結合mui框架後picker（選擇器）的使用
效果圖：
引入的mui和vue.js：
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
代碼如下：（這裏的時間我限制了；只顯示當前日的前三天和當前日的後一天；總5天）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<style>
.mui-btn-block{
margin-top: 15px;
padding: 3px 0;
}
</style>
</head>
<body>
<div id="app">
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>外出單位</label>
<input @click="goto" readonly="readonly" type="text" placeholder="請選擇外出單位" v-model="goIng">
</div>
<div class="mui-input-row">
<label>外出時間</label>
<input @click="tIme" v-model="time" readonly="readonly" type="text" placeholder="請選擇外出時間">
</div>
<div class="mui-input-row">
<label>外出地點</label>
<input @click="city" v-model="City" readonly="readonly" type="text" placeholder="請選擇外出地點">
</div>
</form>
<div>
<button @click="subm" type="button" class="mui-btn mui-btn-block mui-btn-primary">提交</button>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
goIng:'', //外出單位
time:'', //外出時間
City:'', //外出地點
setData:[
{value: 'aaa', text: '信息中心'},
{ value: 'bbb', text: '圖文中心'},
{ value: 'ccc', text: '客服中心'}
], //外出單位的數據
cityData: [
{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "東城區"
}]
},
{
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平區"
},
{
value: "120102",
text: "河東區"
},
{
value: "120104",
text: "南開區"
}]
}
] //外出城市的數據
},
methods:{
//外出單位
goto(){
let self = this;
let goto = new mui.PopPicker({//通過new mui.PopPicker()初始化popPicker組件
layer: 1 //顯示列數
});
goto.setData(this.setData); //setData() 支持數據格式爲: 數組
goto.show(function(e) { //e 就是總數據的數組 顯示picker
self.goIng = e[0].text
// console.log(self.goIng)
})
},
//外出時間
tIme(){
let self = this;
let myDate = new Date();
let year =myDate.getFullYear();//完整的年份
let month=myDate.getMonth(); //獲取當前月份(0-11,0代表1月)
let date = myDate.getDate(); //獲取當前日(1-31)
let tIme = new mui.DtPicker({
type: "date",//設置日曆初始視圖模式
beginDate: new Date(year, month, date-3),//設置開始日期 （2019,01,01）
endDate: new Date(year, month, date+1),//設置結束日期
labels: ['年', '月', '日'],//設置默認標籤區域提示語
});
tIme.show(function(e) { //顯示picker
self.time = e
// console.log(self.time)
})
},
//外出城市
city(){
let _this = this;
let goto = new mui.PopPicker({//通過new mui.PopPicker()初始化popPicker組件
layer: 2 //顯示列數
});
goto.setData(this.cityData); //setData() 支持數據格式爲: 數組
goto.show(function(e) { //e 就是總數據的數組 顯示picker
// console.log(e)
_this.City = e[0].text +','+ e[1].text
// console.log(self.goIng)
})
},
//提交
subm(){
console.log("a")
}
}
})
</script>
</body>
</html>
