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

# 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="['201268', '2019610']" :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) {

      consolelog(e)

      thistimeShow = false

    },

    cancleFn () {

      consolelog('取消')

      thistimeShow = false

    }

  }

};

</script>

```

下面再来一个说明

```javascript

@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="['20166-8', '2019-610']" (日期用逗号()或者一杠(-)隔开都行)

arrayFirstdayAndLastday是一维数组，数组长度必须是2，数组长度必须是2，数组长度必须是2

第一项是最早的显示时间，第二项是最晚的显示时间

['201668', '2019610'] 那么最早显示时间是2016年6月8号，最晚时间是2019年6月10号

:stylBtn="{'color': '#00ffff'}"

是按钮这一栏的行内样式

```

附上github地址 >

通过vuejs filter实现将时间戳转换为自定义标准时间格式方法如下：

<!-- js代码 -->

$()ready(function() {

<!-- 自定义filter名称为'time' -->

Vuefilter('time',

<!-- value 格式为13位unix时间戳 -->

<!-- 10位unix时间戳可通过value1000转换为13位格式 -->

function(value) {

var date = new Date(value);

Y = dategetFullYear(),

m = dategetMonth() + 1,

d = dategetDate(),

H = dategetHours(),

i = dategetMinutes(),

s = dategetSeconds();

if (m < 10) {

m = '0' + m;

}

if (d < 10) {

d = '0' + d;

}

if (H < 10) {

H = '0' + H;

}

if (i < 10) {

i = '0' + i;

}

if (s < 10) {

s = '0' + s;

}

<!-- 获取时间格式 2017-01-03 10:13:48 -->

// var t = Y+'-'+m+'-'+d+' '+H+':'+i+':'+s;

<!-- 获取时间格式 2017-01-03 -->

var t = Y + '-' + m + '-' + d;

return t;

});)

};

<!-- html代码 -->

<!-- 在需要转换格式的位置使用名为time的vuejs filter -->

<td>{{tab2fb1 | time}}</td>

以上就是关于vue滑动选择器(一键开启时间选择器)全部的内容，包括:vue滑动选择器(一键开启时间选择器)、vue实现每日阅读时间、vue.js怎样将时间戳转化为日期格式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！