vue.js结合mui框架后picker(选择器)的使用

vue.js结合mui框架后picker(选择器)的使用

效果图:

示例一示例二示例三
Computer$1600价格
引入的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>
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值