# vue滑動選擇器(一鍵開啟時間選擇器)(移動端和PC端都能使用)?
### 先來張效果圖
安裝 npm install time_check_jiangji
引入 import Time from 'time_check_jiangji'
## 直接上干貨，demo
```javascript
<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>
```
下面再來一個說明
```javascript
@click="clickFn"
是點擊確認按鈕的觸發(fā)的函數 接受一個參數(數組類型)，是當前的值
(例如[2019, 6, 5, "上午", "隨便2"])
:cancleFn="cancleFn"? (特別注意，是:cancleFn不是@cancleFn，是: 不是@)
是點擊取消按鈕觸發(fā)的函數，不傳則不顯示取消按鈕(非必傳)
: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
