time-line-big-screen v0.0.9
支持props 支持ref 支持bus
安装
npm install vue-slider-component
引入
import VueSlider from 'vue-slider-component' import 'vue-slider-component/theme/default.css' app.component('VueSlider',VueSlider);
局部引入
import VueSlider from 'vue-slider-component' import 'vue-slider-component/theme/default.css'
vue文件中 components: { ... VueSlider ... },
单日时间线类型单选
<TimeLine ref="timeLineRef" :label-list="{label:'全部',value:'0'},{label:'居住',value:'1'}" :current-date=" dayjs().format('YYYY-MM-DD')" type="date" :timeRange="dayjs().format('HH:00')" @change="(data)=>{ debugger }" />
单日时间线双选类型
<TimeLine ref="timeLineRef" :label-list="{label:'全部',value:'0'},{label:'居住',value:'1'}" :current-date="dayjs().format('YYYY-MM-DD')" type="date" :double="true" :timeRange="dayjs().format('HH:00'),dayjs().format('HH:00')" @change="(data)=>{}" />
多日时间线类型
<TimeLine ref="timeLineRef" :label-list=" { value: 1, label: '公共类' }, { value: 2, label: '公共类2' } " :current-date=" dayjs().subtract(30,'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD') " :double="false" @change="handleTimeLineChange" type="range" />
多日时间线双选类型
<TimeLine ref="timeLineRef" :label-list=" { value: 1, label: '公共类' }, { value: 2, label: '公共类2' } " :current-date=" dayjs().subtract(30,'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD') " :double="true" @change="handleTimeLineChange" type="range" />