mint-ui使用

 <mt-field label="聯繫人" placeholder="請輸入聯繫人" v-model="username"></mt-field>

渲染爲input輸入框，label相當於前邊的類別。默認當輸入文本的時候，出現刪除按鈕。

<mt-datetime-picker
            type="date"
            ref="picker"
            v-model="value"
            year-format="{value} 年 "
            month-format="{value} 月 "
            date-format="{value} 日 "
            @confirm="handleConfirm"
             @cancel="checkinCancel"
            :startDate = "startDate"
            :endDate = "endDate"
            >
         </mt-datetime-picker>
想要修改兩個按鈕的文本  直接在標籤裏設置：  confirmText="你想修改的文字"
                                         cancelText="你想修改的文字"

datetimepicker   type有：datetime、date、time

<!--時間選擇器-->
<mt-datetime-picker
  type="time"
  ref="picker"
  @confirm="handleConfirm">
</mt-datetime-picker>  

 <!--日期時間選擇器-->
<!-- <mt-datetime-picker
    ref="picker"
    type="datetime"
    @confirm="handleConfirm">
  </mt-datetime-picker> -->

具體使用方法如下：

<script type="text/ecmascript-6">
import { DatetimePicker } from 'mint-ui'  
import moment from 'moment'   // 格式化時間
import Vue from 'vue'
Vue.component(DatetimePicker.name, DatetimePicker)
export default {
  data () {
    return {
     value: new Date(),
      startDate: new Date("1900/01/01"), //默認是當前時間前20年，手動設置日期，這樣說據說是爲了在兼容ios。（還沒有驗證）
      endDate: new Date()
    }
  },
  methods: {
//關閉時間選擇器，也就是按取消按鈕執行的方法
    checkinCancel() {
      this.$refs.picker.close();
    },
//打開時間選擇器的方法
    openPicker () {
      this.$refs.picker.open() 
    },
//獲取時間
    handleConfirm (data) {
      let date = moment(data).format('YYYY.MM.DD') 
      this.dateTime = date
    }
  }
}
</script>

提示語彈框：

indexGo() {
      MessageBox.confirm("", {
        title: "",  //不需要提示，title設置爲空
        confirmButtonText: "回到首頁",  //修改確定按鈕文本
        cancelButtonText: "返回查詢頁", //修改取消按鈕文本
        message: "由於您長時間未支付，該訂單已取消，請重新下單"   //內容
      })
        .then(action => {
          console.log(action);
        })
        .catch(e => {
          console.log(e);
        });
    },

效果如下：

需要一個按鈕方法同上

 overtime() {
      MessageBox.alert(
        "由於支付超時您的訂單已取消，退款已原路返回中，感謝您的理解。",
        {
          confirmButtonClass: "confirmButton",
          confirmButtonText: "我知道了"
        }
      ).then(action => {});
    },

展示效果如下

剛剛接觸vue   還有很多不懂  目前先這麼寫，如果有什麼問題，隨後更新。