vue.js结合mui框架后picker(选择器)的使用
vue.js结合mui框架后picker(选择器)的使用效果图:示例一示例二示例三引入的mui和vue.js:<link rel="stylesheet" href="css/mui.min.css"><link rel="stylesheet" type="text/css"
·
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>
更多推荐
已为社区贡献13条内容
所有评论(0)