支持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" />