Mint-UI静态页面实例Demo

前言:使用Mint-UI做的一个静态页面实例(Mint-UI是基于Vue开发的UI组件库)

1.App.vue:

<template>  
  <div id="app" v-bind:style="appstyle" style="margin:-3% -3% -3% -3%;"> 
  <mt-popup v-model="shitangVisible" position="left" style="border:2px solid;border-radius:25px;">
     <mt-radio title="" v-model="shitang" :options="shitangs" style="margin:8px 8px 8px 8px;"></mt-radio>
  </mt-popup>
  <div style="padding:10% 10% 0 10%;">
  <mt-header title="员工自助报餐单" style="color:black;font-size:100%;opacity:0.2;"></mt-header>
  </div>
  <div style="padding:0% 10% 0 10%;">
  <mt-field label="工号" placeholder="请输入工号" v-model="workcode" style="padding:5% 5% 0% 5%;"></mt-field>
  <mt-field label="用户名" placeholder="请输入用户名" v-model="username" style="padding:5% 5% 0% 5%;"></mt-field>
  </div>
  <div style="padding:0 10% 0 10%;">
  <mt-cell title="就餐食堂" :value="shitang" @click.native="handleClick1" style="padding:5% 5% 0% 5%;"></mt-cell>
  <mt-cell title="餐别选择" :value="canbieStr" @click.native="handleClick2" style="padding:5% 5% 0% 5%;"></mt-cell>
  </div>
  <div style="padding:0% 10% 0 10%;">
  <mt-cell title="开始日期" :value="startStr" @click.native="openPicker1" @confirm="handleChange1" style="padding:5% 5% 0% 5%"></mt-cell>
  <mt-cell title="结束日期" :value="endStr" @click.native="openPicker2" style="padding:5% 5% 0% 5%"></mt-cell>
  </div>
   <mt-popup v-model="canbieVisible" position="right" style="border:2px solid;border-radius:25px;">
     <mt-checklist title="" v-model="canbie" :options="canbies" style="margin:12px 12px 12px 12px;"></mt-checklist>
  </mt-popup>
  <br style="height:1%"/>
  <mt-datetime-picker style="border:2px solid;border-radius:25px;margin:0 0 0 -40%;" ref="picker1" type="date" confirm-text="开始日期" cancel-text="" :startDate ="startShow" :endDate = "endShow" v-model="startDate" year-format="{value} 年" date-format="{value} 日" month-format="{value} 月"></mt-datetime-picker>
  
  <mt-datetime-picker style="border:2px solid;border-radius:25px;margin:0 0 0 -40%;height:36%;" ref="picker2" type="date" confirm-text="结束日期" cancel-text="" :startDate ="startDate" :endDate = "endShow" v-model="endDate"  year-format="{value} 年" date-format="{value} 日" month-format="{value} 月"></mt-datetime-picker>
  <span style="padding:0% 10% 0% 10%;color:red;">*灰色字体为可编辑状态</span>
  <div style="padding:0% 10% 100% 10%;">
  <mt-button type="default" size="large" v-bind:style="buttonstyle" style="border-radius:50%;width:100px;height:100px;margin-left:35%;color:black;" @click.native='submitClick'>点我报餐</mt-button>
  </div>
   <mt-popup v-model="submitVisible" position="bottom" style="border:2px solid;border-radius:25px;">
     <mt-checklist title="餐别选择" v-model="canbie" :options="canbies"></mt-checklist>
  </mt-popup>
  </div>
</template>  
   
<script>  
import {formatDate} from '../common/js/date.js'  
import {getNextMonth} from '../common/js/date.js' 
import {getPreMonth} from '../common/js/date.js' 
import { Toast } from 'mint-ui';
export default { 
  data () { 
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth()+1;
  let days = new Date(year,month,0).getDate();
  return {  
  appstyle:{
     background:"url(" + require("../common/img/timg.jpg") + ")",
     backgroundPosition:'0px 0px'
  },
  buttonstyle:{
     background:"url(" + require("../common/img/pure1.jpg") + ")",
     backgroundPosition:'-2px -5px'
  },
  show: true,
  count: '',
  timer: null,
  begindate:'2001-01-01',
  workcode:'',
  username:'', 
  shitangVisible:false,
  canbieVisible:false,
  submitVisible:false,
  startDate:new Date(date.getFullYear(),date.getMonth()+1,1),
  endDate:new Date(date.getFullYear(),date.getMonth()+1,days-1),
  startShow:new Date(date.getFullYear(),date.getMonth()+1,1),
  endShow:new Date(date.getFullYear(),date.getMonth()+1,days-1),
  shitang: 'xx食堂',
  shitangs: ['xx食堂', 'xx餐厅', 'x食x堂', 'x食堂', 'xx食堂', 'x食堂', 'xx餐厅', 'xx厂', 'xx食堂'],
  canbie: ['早餐', '午餐', '晚餐'],
  canbies: ['早餐', '午餐', '晚餐']
    }  
  },  
  methods: {
     handleClick1: function() {
        this.shitangVisible = true
        },
     handleClick2: function() {
        this.canbieVisible = true
        },
     openPicker1() {
        this.$refs.picker1.open();
      },
     openPicker2() {
        this.$refs.picker2.open();
      },
     handleChange1(value) {
        this.startDate = value.toString();
      },
     moveImg() {
       const TIME_COUNT = 500;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
	let posStr = "-"+(this.count)+"px -"+(this.count-300)+"px";
	this.appstyle.backgroundPosition=posStr;
       }, 300)
      } 
     },
     submitClick() {
	Toast({
	message: '您的报餐信息已经提交,请稍候...',
	position: 'middle',
	duration: 5000
        })
     }
  },
  computed:{
    startStr:function() {
      return formatDate(this.startDate,'yyyy-MM-dd')
    },
    endStr:function() {
      return formatDate(this.endDate,'yyyy-MM-dd')
    },
    canbieStr:function() {
      return new Array(this.canbie).join(',')
    }
  },
  mounted: function(){
    this.moveImg()
  }
} 
</script>  
   
<style>  
html,body{
  overflow: hidden;
  height: 100%;
}
</style> 

2.mian.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'mint-ui/lib/style.min.css'
import { Field } from 'mint-ui';
import { Cell } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Button } from 'mint-ui';
import { Checklist } from 'mint-ui';
import { DatetimePicker } from 'mint-ui';
import { Radio } from 'mint-ui';
import { Toast } from 'mint-ui';
import { Header } from 'mint-ui';

Vue.component(Header.name, Header);
Vue.component(Radio.name, Radio);
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.component(Checklist.name, Checklist);
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(Cell.name, Cell);
Vue.component(Field.name, Field);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

阅读更多
文章标签: Vue
个人分类: 软件开发
想对作者说点什么? 我来说一句

mint-ui-cell示例

2017年08月25日 19KB 下载

mint-ui-search示例

2017年08月03日 19KB 下载

echarts静态图表demo--2种写法

2015年11月10日 438KB 下载

mint-ui-tabbar示例

2017年07月29日 20KB 下载

没有更多推荐了,返回首页

不良信息举报

Mint-UI静态页面实例Demo

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭