很多项目中都会用到时间选择。下面列子中我写了一个实例
demo下载地址:https://download.csdn.net/download/zxd1314520/10634016
首先上效果图:
1.先引入 cnpm install vue-date-time-m --save
2.在main.js里引入
import dateTime from 'vue-date-time-m';
Vue.component('data-time', dateTime);
3.在template
<div class="my-content-list" @click="show">
<div class="date-time-input" >现在时间 {{msg}}</div>
</div>
<date-time ref="dateTime"
@confirm="select"
format="yyyy年MM月dd日 hh小时mm分">
<div slot="prevMonth"> <i>-</i> </div>
<div slot="nextMonth"> <i>+</i> </div>
</date-time>
4.在所需要的script里面 必须绑定点击事件
<script>
import DateTime from 'vue-date-time-m'
export default {
components: {
DateTime
},
data() {
return {
msg: '',
count: 0,
isLoading: false,
}
},
methods: {
show() {
this.$refs.dateTime.show()
},
// 日期组件回调
select(val) {
this.msg = val
},
},
}
</script>
5.根据项目要求 我修改了时间选择的主题颜色
css
.van-dialog__confirm,.van-dialog__confirm:active {
color: #FF6600
}
.d-date-time-header,.d-date-time-bg{
background: #FF6600!important;
}
.d-date-time-button a{
color: #FF6600!important;
}
一个好看使用的时间选择就写完了。
还有其他如果你需要可以一起讨论。