版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mhlghy/article/details/80269774
Mint ui 是什么?
简单来说,它就是基于 Vue.js 的移动端组件库
在实际项目开发过程中,我们往往需要借助一些组件来提高我们的开发效率,如pc端的Element、iView,移动端的Mint UI等。
下面看一下Mint UI 的DatetimePicker用法
<template>
<!--日期选择器-->
<mt-datetime-picker
type="date"
ref="picker"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
:startDate="startDate"
>
</mt-datetime-picker>
<!--时间选择器-->
<!-- <mt-datetime-picker
type="time"
ref="picker"
@confirm="handleConfirm">
</mt-datetime-picker> -->
<!--日期时间选择器-->
<!-- <mt-datetime-picker
ref="picker"
type="datetime"
@confirm="handleConfirm">
</mt-datetime-picker> -->
</div>
</div>
</div>
</template>
<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 {
dateTime: '',
startDate: new Date()
}
},
methods: {
openPicker () {
this.$refs.picker.open()
},
handleConfirm (data) {
let date = moment(data).format('YYYY.MM.DD')
this.dateTime = date
}
}
}
</script>
moment:用于格式化时间