vue轮播组件实现$children和$parent 附带好用的gif录制工具

//播放实际运行函数
play() {
let len = this.items.length - 1;
let now = this.active > len ? 0 : this.active;
let old = this.active - 1 < 0 ? 0 : this.active - 1;
//console.log("当前", now, "老的", old);
//关闭老元素
this.items[old].show = false;
this.items[old].itemStyle = {
transition: "all 1.5s ease",
transform: `translateX(${this.axisx}px)`
};
//显示新元素
this.items[now].show = true;
this.items[now].itemStyle = {
transition: "all 1.5s ease",
transform: "translateX(0)",
animation: "mymove 1.5s 2"
};
//记录数据
this.active = now + 1;
}
}
};
</script>

<style lang="scss">
.dht-swiper-side {
position: absolute;
z-index: 2000;
right: 0;
display: flex;
flex-flow: row;
width: 100%;
}
</style>

子组件全部代码

<template>
 <div class="dht-swiper-side-item" :style="itemStyle">
  <slot></slot>
 </div>
</template>
<script>
export default {
 name: "dhtSwiperSideItem",
 data() {
  return {
   show: false,
   defaultStyle: {},
   itemStyle: {}
  };
 },
 watch: {},
 beforeCreate() {},
 created() {
  //元素创建和需要更新父元素属性
  this.$parent && this.$parent.updateItems();
 },
 beforeMount() {},
 mounted() {},
 destroyed() {
  //元素销毁和需要更新父元素属性
  this.$parent && this.$parent.updateItems();
 },
 methods: {}
};
</script>
<style lang="scss">
.dht-swiper-side-item {
 position: absolute;
 transition: all 1s ease;
 transform: translateX(1000px);
 // 抖动动画
 @keyframes mymove {
  0% {
   left: 0;
  }
  50% {
   left: 15px;
  }
  100% {
   left: 0;
  }
 }
}
</style>

致谢

感谢elementUI开源代码，本组件有部分是直接拷贝的elementUI的Carousel的代码。

总结

以上所述是小编给大家介绍的vue轮播组件实现$children和$parent 附带好用的gif录制工具,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！