vue滑动选择器(一键开启时间选择器)

vue滑动选择器(一键开启时间选择器)

一个vue的滑动选择器(移动端和PC端都能使用)

先来张效果图

安装 npm install time_check_jiangji

引入 import Time from ‘time_check_jiangji’

直接上干货，demo

<template>
  <div class="App">
    <div @click="timeShow = true">点击显示Time组件</div>
    <Time v-if="timeShow" :cancleFn="cancleFn" :time="true" :defaultValue="[2019, 6, 5, '上午', '随便2']"  :arr="[['上午', '下午'], ['随便1', '随便2']]" @click="clickFn" :arrayFirstdayAndLastday="['2012.6.8', '2019.6.10']" :stylBtn="{'color': '#00ffff'}" />
  </div>
</template>

<script>
import Time from 'time_check_jiangji'
export default {
  name: 'App',
  components: {
    Time
  },
  data() {
    return {
      timeShow: true
    };
  },
  methods: {
    clickFn (e) {
      console.log(e)
      this.timeShow = false
    },
    cancleFn () {
      console.log('取消')
      this.timeShow = false
    }
  }
};
</script>

下面再来一个说明

@click="clickFn"
是点击确认按钮的触发的函数 接受一个参数(数组类型)，是当前的值
(例如[2019, 6, 5, "上午", "随便2"])

:cancleFn="cancleFn"  (特别注意，是:cancleFn不是@cancleFn，是: 不是@)
是点击取消按钮触发的函数，不传则不显示取消按钮(非必传)

:defaultValue="[2019, 6, 5, "上午", "随便2"]"
是回显值(一维数组，非必传，传了能回显)  数据类型注意要对应上

:time="true"
开启年月日的时间选择模式(只能选择三年内的日期，非必传)

:arr="[['上午', '下午'], ['随便1', '随便2']]"
传入二维数组(非必传)
如果:time="true" 那么前三列是时间(年月日)，第四列是['上午', '下午']，第五列是['随便1', '随便2']
如果:time="false"或者未传， 第1列是['上午', '下午']，第2列是['随便1', '随便2']

:arrayFirstdayAndLastday="['2016.6-8', '2019-6.10']" (日期用逗号(.)或者一杠(-)隔开都行)
arrayFirstdayAndLastday是一维数组，数组长度必须是2，数组长度必须是2，数组长度必须是2
第一项是最早的显示时间，第二项是最晚的显示时间
['2016.6.8', '2019.6.10'] 那么最早显示时间是2016年6月8号，最晚时间是2019年6月10号

:stylBtn="{'color': '#00ffff'}"
是按钮这一栏的行内样式

附上github地址 https://github.com/jiangji1/time_check_jiangji