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   还有很多不懂  目前先这么写，如果有什么问题，随后更新。