16: mint-ui移動端

1.1 mint-ui安裝與介紹

 　　 官網：http://mint-ui.github.io/docs/#/zh-cn2/loadmore

　　一、安裝與引用

// 安裝Vue 2.0
npm install mint-ui -S

// 引入所有組件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

 1.2 Datetime Picker的用法

　　參考博客：https://blog.csdn.net/qq_35430000/article/details/82183079

<template>
  <div class="pickerDemo">
    <div class="showTime">
      <p class="timeDes">當前時間是：{{this.selectedValue}}</p>
      <div class="selectTime" @click="selectData">選擇時間</div>
    </div>
    <!-- @touchmove.prevent 阻止默認事件，此方法能夠在選擇時間時阻止頁面也跟着滾動。 -->
    <div class="pickerPop" @touchmove.prevent>
      <!-- 年月日時分選擇 -->
      <mt-datetime-picker
        lockScroll="true"
        ref="datePicker"
        v-model="dateVal"
        class="myPicker"
        type="datetime"
        year-format="{value}"
        month-format="{value}"
        date-format="{value}"
        hour-format="{value}"
        minute-format="{value}"
        second-format="{value}"
        @confirm="dateConfirm()">
      </mt-datetime-picker>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {formatDate} from '@/assets/js/util/formatdate.js'
  import {DatetimePicker } from 'mint-ui'
  Vue.component(DatetimePicker.name, DatetimePicker)
  export default {
    name: 'pickerDemo',
    data () {
      return {
        dateVal: '2019-04-17', // 默認是當前日期
        selectedValue: '2019-04-17'
      }
    },
    components: {
    },
    methods: {

      //獲取當前時間，格式YYYY-MM-DD
      getNowFormatDate(){
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },

      // 打開時間選擇器
      selectData () {
        // 若是已經選過日期，則再次打開時間選擇器時，日期回顯（不須要回顯的話能夠去掉 這個判斷）
        if (this.selectedValue) {
          this.dateVal = this.selectedValue
        } else {
          this.dateVal = new Date()
        }
        this.$refs['datePicker'].open()
      },

      // 時間選擇器肯定按鈕，並把時間轉換成咱們須要的時間格式
      dateConfirm () {
        this.selectedValue = formatDate(this.dateVal)
      }
    },
    created () {
      var nowData = this.getNowFormatDate();
      this.selectedValue = nowData;
    },
  }
</script>

<style scoped>

</style>

index.vue

// 只有年月日
export function formatDate (secs) {
  var t = new Date(secs)
  var year = t.getFullYear()
  var month = t.getMonth() + 1
  if (month < 10) { month = '0' + month }
  var date = t.getDate()
  if (date < 10) { date = '0' + date }
  var hour = t.getHours()
  if (hour < 10) { hour = '0' + hour }
  var minute = t.getMinutes()
  if (minute < 10) { minute = '0' + minute }
  var second = t.getSeconds()
  if (second < 10) { second = '0' + second }
  return year + '-' + month + '-' + date
}
// 年月日時分
export function formatDateMin (secs) {
  var t = new Date(secs)
  var year = t.getFullYear()
  var month = t.getMonth() + 1
  if (month < 10) { month = '0' + month }
  var date = t.getDate()
  if (date < 10) { date = '0' + date }
  var hour = t.getHours()
  if (hour < 10) { hour = '0' + hour }
  var minute = t.getMinutes()
  if (minute < 10) { minute = '0' + minute }
  var second = t.getSeconds()
  if (second < 10) { second = '0' + second }
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
}

src\assets\js\util\formatdate.js

 

 

 

 

 

 

 

 

1111111