怎么用vue轮播组件实现$children和$children

这篇文章主要介绍了怎么用vue轮播组件实现$children和$children的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用vue轮播组件实现$children和$children文章都会有所收获，下面我们一起来看看吧。

一、知识点涉及

1、vue组件化开发

2、vue组件嵌套组，就是两个组件相互耦合，然后必须配合使用的那种。参考elementUI里面的表单组件（分为from组件，item组件）或者轮播组件。

vue的 $children和 $parent

3、css动画和形变

二、开始写组件

1、先写你的框，主组件

这个是容器，负责组件定位和组件的整体运作的

html部分

<div @mouseenter.stop="handleMouseEnter" @mouseleave.stop="handleMouseLeave" class="dht-swiper-side" :> <slot></slot></div>

主要两个鼠标事件： mouseenter和 mouseleave

第一个就是鼠标在元素上负责停止定时器，第二个就是鼠标离开重启定时器

对应的props和监听

props: { // 时间间隔 interval: {  type: Number,  default: 8000 }, //是否自动播放 autoplay: {  type: Boolean,  default: true }, zIndex: {  type: Number,  default: 2000 }, // x轴变化 axisx: {  type: Number,  default: 1000 }},watch: { autoplay(val) {  val ? this.startTimer() : this.stopTimer(); }},data() { return {  // 计时器  timer: "",  //子元素  items: [],  // 当前显示的元素  active: 0 };},

2、写你的子组件

这里必须跳跃一下，为什么呢？

因为：主组件主要负责动画运作和容器的作用。定义好你要的参数之后，其实主组件你直接看代码是不不符合编写逻辑的

有了主组件之后，我需要有子元素才能动起来，所以先把子元素加载进来

html部分

<div class="dht-swiper-side-item" :> <slot></slot></div>

js核心部分

created() { //元素创建和需要更新父元素属性 this.$parent && this.$parent.updateItems();},beforeMount() {},mounted() {},destroyed() { //元素销毁和需要更新父元素属性 this.$parent && this.$parent.updateItems();},

这里主要是创建元素的时候需要把元素加入主组件的items中，销毁的时候同样进行更新

主组件的更新代码

// 更新元素updateItems() { this.items = this.$children.filter(  // 更新元素需要确认为指定的子元素  child => child.$options.name === "dhtSwiperSideItem" );},

css核心部分

css部分主要是定义动画效果，和基础css，主要是看动画部分

.dht-swiper-side-item { position: absolute; transition: all 1s ease; transform: translateX(1000px); // 抖动动画 @keyframes mymove {  0% {   left: 0;  }  50% {   left: 15px;  }  100% {   left: 0;  } }}

3、一般弹窗动画之类的编写原理讲解

1、不能用display：none，因为那样元素是直接显示出来的，动画是无法有的。

2、举例：下方弹窗划出

其实在写这些弹窗的时候元素已经在页面上面加载好了，只是被我们隐藏到显示器之外了。

所以我们要做的是在点击显示的时候把元素位移回来

3、所以其实页面上基本的动画都是先放在你看不到的地方，然后再通过 transform

形变css给移动回来的。我这次的组件也是一样的。

4、主组件操作

1、回顾一下，刚才我们先写了主组件，主组件加载子组件，子组件会调用主组件函数，让主组件去更新自己的items，提前存好。方便使用

2、既然我们主组件拿到了子组件了，那么就可以直接操作子组件进行操作，其实核心原理在于主组件之间操作子组件。

3、定时器部分

//开始计时器startTimer() { //预先执行一次，保证不会出现第一次运行延迟双倍实际 this.play(); // 拦截处理 if (this.interval <= 0 || !this.autoplay || this.timer) return; this.timer = setInterval(() => {  this.play(); }, this.interval);},

这块其实没啥，除了预先的拦截剩下的就是启动定时器，然后运行动画播放函数

4、核心播放函数部分

//播放实际运行函数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;}

这个其实很简单，每次运行的时候处理一下数据，拿到当前要运行的子元素id和老的元素，当前的展示，老的移动回去。最后记录一下新的id

这里有一个坑点：就是animation部分，记得运行2次，不然只是一次会导致下面的元素看不到抖动效果。原因是在移动的时候就抖动完毕了。

5、主组件css部分

.dht-swiper-side { position: absolute; z-index: 2000; right: 0; display: flex; flex-flow: row; width: 100%;}

三、组件文档

四、个人组件效果展示

<dht-swiper-side class="main"> <dht-swiper-side-item>  <div class="item">我是组件1</div> </dht-swiper-side-item> <dht-swiper-side-item>  <div class="item">我是组件2</div> </dht-swiper-side-item> <dht-swiper-side-item>  <div class="item">我是组件3</div> </dht-swiper-side-item> <dht-swiper-side-item>  <div class="item">我是组件4</div> </dht-swiper-side-item></dht-swiper-side>.main { width: 500px; .item {  width: 100px;  height: 100px;  background: #009966;  border: #409eff 1px solid;  text-align: center;  line-height: 100px; }}

主组件全部代码

<template> <div  @mouseenter.stop="handleMouseEnter"  @mouseleave.stop="handleMouseLeave"  class="dht-swiper-side"  : >  <slot></slot> </div></template><script>export default { name: "dhtSwiperSide", props: {  // 时间间隔  interval: {   type: Number,   default: 8000  },  //是否自动播放  autoplay: {   type: Boolean,   default: true  },  zIndex: {   type: Number,   default: 2000  },  // x轴变化  axisx: {   type: Number,   default: 1000  } }, watch: {  autoplay(val) {   val ? this.startTimer() : this.stopTimer();  } }, data() {  return {   // 计时器   timer: "",   //子元素   items: [],   // 当前显示的元素   active: 0  }; }, beforeCreate() {}, created() {  this.$nextTick(() => {   this.updateItems();   this.startTimer();   this.$children[0].show = true;  }); }, beforeMount() {}, mounted() {}, destroyed() {  clearInterval(this.timer); }, methods: {  handleMouseEnter() {   this.stopTimer();  },  handleMouseLeave() {   this.startTimer();  },  //开始计时器  startTimer() {   //预先执行一次，保证不会出现第一次运行延迟双倍实际   this.play();   // 拦截处理   if (this.interval <= 0 || !this.autoplay || this.timer) return;   this.timer = setInterval(() => {    this.play();   }, this.interval);  },  // 停止计时器  stopTimer() {   clearInterval(this.timer);  },  // 更新元素  updateItems() {   this.items = this.$children.filter(    // 更新元素需要确认为指定的子元素    child => child.$options.name === "dhtSwiperSideItem"   );  },  //播放实际运行函数  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" :>  <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>

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于“怎么用vue轮播组件实现$children和$children”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用vue轮播组件实现$children和$children”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。