基于vue的酒店时间选择
VueTimeRange (VueTimeRange)
Time Range Picker Based On Buefy And Vue.
基于Buefy和Vue的时间范围选择器。
![TimeRangeQuick](https://i-blog.csdnimg.cn/blog_migrate/5a21c9e254f40dfc60be5e730a5c43b9.png)
![TimeRangeAbsolute](https://i-blog.csdnimg.cn/blog_migrate/aff52ccfaa8e271076252fd3d16af06b.png)
环境 (Environment)
vue 2.5.13
vue 2.5.13
buefy 0.6.3
buefy 0.6.3
安装 (Installation)
npm i -S vue-time-range
用法 (Usage)
main.js
main.js
import Vue from 'vue';
import Vuex from 'vuex';
import TimeRange from 'vue-time-range';
import Buefy from 'buefy';
import 'buefy/lib/buefy.min.css';
Vue.use(Vuex);
Vue.use(Buefy);
const store = new Vuex.Store();
Vue.use(TimeRange, {
store
});
new Vue({
store,
//...
});
index.html
index.html
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
template
template
<time-range label-panel="TimeRange" label-start="From" label-end="To" :auto-fold="true" @time-range-change="(n, o) => yourMethod(n, o)" @tag-click="yourMethod"></time-range>
商店 (Store)
state
state
this.$store.state.TimeRange.dateTimeStart
this.$store.state.TimeRange.dateTimeEnd
mutations
mutations
this.$store.commit('TimeRange/EDIT_DATE_TIME_START', new Date())
this.$store.commit('TimeRange/EDIT_DATE_TIME_END', new Date())
翻译自: https://vuejsexamples.com/time-range-picker-based-on-buefy-and-vue/
基于vue的酒店时间选择