时间插件

src/common/PickSlide.vue

@@ -0,0 +1,148 @@
+<template>
+  <portal to="notification-outlet">
+    <div v-if="show" class="swipper-content">
+      <div class="swipper-wrapper">
+        <swiper ref="mySwiper1">
+          <swiper-slide v-for="(item,i) in num" :key="i+'fst'">{{item}}</swiper-slide>
+        </swiper>
+        <swiper ref="mySwiper2">
+          <swiper-slide v-for="(item,i) in num" :key="i+'sec'">{{item}}</swiper-slide>
+        </swiper>
+        <swiper ref="mySwiper3">
+          <swiper-slide v-for="(item,i) in data" :key="i+'trd'">{{item}}</swiper-slide>
+        </swiper>
+        <div class="lineT"></div>
+        <div class="lineB"></div>
+        <div class="confBtn">
+          <p class="tip" style="display: none;">请选择正确的时间</p>
+          <p class="btnS">确认</p>
+        </div>
+      </div>
+      <div class="mask" :styke="{'z-index':'999'}" v-if="show"></div>
+    </div>
+  </portal>
+</template>
+
+<script>
+  export default {
+    name: 'carrousel',
+    props:['show'],
+    data() {
+      return {
+        num : [0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9],
+        data:['分钟', '小时', '天', '周', '月','年','分钟', '小时', '天', '周', '月','年','分钟', '小时', '天', '周', '月','年','分钟', '小时', '天', '周', '月','年']
+      }
+    },
+    computed: {
+      swiper1() {
+        setTimeout(()=>{
+          return this.$refs.mySwiper1.swiper
+        },0)
+      },
+      swiper2() {
+        setTimeout(()=>{
+          return this.$refs.mySwiper2.swiper
+        },0)
+      },
+      swiper3() {
+        setTimeout(()=>{
+          return this.$refs.mySwiper3.swiper
+        },0)
+      }
+    },
+    mounted() {
+      // this.swiper1 = new Swiper( this.$refs.mySwiper1, {
+      //   sliderMove: function(swiper){
+      //     console.log(this.swiper1.activeIndex)
+      //   }
+      // })
+      setTimeout(()=>{
+        console.log(this.swiper1)
+        this.swiper1.on('sliderMove',()=>{
+          console.log(this.swiper1.activeIndex)
+        })
+        this.swiper2.on('sliderMove',()=>{
+          console.log(this.swiper2.activeIndex)
+        })
+        this.swiper3.on('sliderMove',()=>{
+          console.log(this.swiper3.activeIndex)
+        })
+        // this.swiper.slideTo(3, 1000, false)
+
+      },400)
+    },
+    methods:{
+      onChange(){
+        
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+@import '../less/base.less';
+.swiper-slide {
+  background-color: #fff;
+  height: 44px;
+  line-height: 44px;
+}
+.swiper-container {
+  height: 132px;
+  float: left;
+  width: 2.1rem;
+  text-align: center;
+}
+.swipper-wrapper {
+  font-size: .32rem;
+  height: 227px;
+  width: 6.3rem;
+  // overflow: hidden;
+  background-color: #ffffff;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  padding-top: 25px;
+  box-sizing: border-box;
+  border-radius: 0.2rem;
+  z-index: 1000;
+  .lineT {
+    height: 1px;
+    background-color: #f5f5f5;
+    position: absolute;
+    top: 2.1rem;
+  }
+  .lineB {
+    height: 1px;
+    background-color: #f5f5f5;
+    position: absolute;
+    top: 4.2rem;
+  }
+  .confBtn {
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    border-top: 1px solid #ebedf0;
+    margin-top: 25px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    .btnS {
+      color: #6678FF;
+    }
+    .tip {
+      position: absolute;
+      top: -22px;
+      font-size: 0.24rem;
+      color: red;
+      line-height: 20px;
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+.swipper-content {
+  .mask{
+    z-index: 999;
+  }
+}
+</style>