Shulou(Shulou.com)05/31 Report--

This article mainly introduces the vue carousel component how to achieve $children and $parent related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this vue carousel component how to achieve $children and $parent article will have a harvest, let's take a look.

First, knowledge points are involved

1. Vue component-based development

2. The nesting group of vue components is the kind in which two components are coupled to each other and must then be used together. Refer to the form component in elementUI (divided into from component, item component) or carousel component.

$children and $parent of vue

3. Css animation and deformation

Start writing components

1. Write your box first, the main component

This is the container, which is responsible for the positioning and overall operation of the components.

Html part

Two main mouse events: mouseenter and mouseleave

The first is that the mouse is responsible for stopping the timer on the element, and the second is that the mouse leaves and restarts the timer.

Corresponding props and monitoring

Props: {/ / interval interval: {type: Number, default: 8000}, / / whether to automatically play autoplay: {type: Boolean, default: true}, zIndex: {type: Number, default: 2000}, / / x axis change axisx: {type: Number, default: 1000}}, watch: {autoplay (val) {val? This.startTimer (): this.stopTimer ();}}, data () {return {/ / timer timer: ", / / child element items: [], / / currently displayed element active: 0};}

Just take a look. There's nothing more to say. I feel pretty clear.

2. Write your subcomponents

There has to be a jump here. Why?

Because: the main component is mainly responsible for the operation of animation and the role of containers. After defining the parameters you want, it is not against the writing logic for you to look at the code directly from the main component.

After I have the main component, I need to have child elements to move, so load the child elements in first

Html part

Core part of js

Created () {/ / element creation and need to update parent element attributes this.$parent & & this.$parent.updateItems ();}, beforeMount () {}, mounted () {}, destroyed () {/ / element destruction and need to update parent element attributes this.$parent & & this.$parent.updateItems ();}

Here, you need to add the element to the items of the main component when you create the element, and update it when you destroy it.

Update code for the main component

/ / update element updateItems () {this.items = this.$children.filter (/ / the update element needs to be confirmed as the specified child element child = > child.$options.name = = "dhtSwiperSideItem");}

Core part of css

The css part mainly defines the animation effect, and the basic css, mainly looks at the animation part.

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

3. Explain the compiling principle of general pop-up window animation.

1. You can't use display:none, because that element is displayed directly, and animation is impossible.

2. For example, draw the bottom pop-up window.

In fact, when writing these pop-up windows, the elements have already been loaded on the page, but we have hidden them outside the display.

So what we need to do is to shift the element back when we click on the display.

3. So in fact, the basic animations on the page are first put where you can't see them, and then go through transform

The deformable css was moved back. My components are the same this time.

4. Operation of the main component

1. In retrospect, we first wrote the main component. The main component loads the sub-component, and the sub-component will call the main component function to let the main component update its own items and store it in advance. Easy to use

2. Now that our main component has got the sub-components, we can operate the sub-components directly. In fact, the core principle is to operate the sub-components between the main components. I read the walking lantern part of the elementUI source code, which is more complicated than mine. )

3. Timer part

/ / start timer startTimer () {/ / pre-executed once to ensure that the first run delay will not be double the actual this.play (); / / intercept processing if (this.interval {this.play ();}, this.interval);}

This piece is actually nothing, except for the pre-interception, all that is left is to start the timer and then run the animation playback function.

4. Core playback function part

/ / play the actual running function 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侧边轮播组件intervalNumber5000时间间隔，默认5秒转换一次必须给该组件指定宽度，否则无法正常显示。内部子元素展示做最侧位置主要由该组件的宽度定义autoplayBooleanTRUE是否自动播放，咱不支持false zIndexNumber2000组件层级 axisxNumber1000隐藏的子元素位置，px单位，默认1000。当内部元素宽度过大时可以调节该参数 dht-swiper-side-itemdht-swiper-side dht-swiper-side的子组件，用于存放内容四、个人组件效果展示 我是组件1 我是组件2 我是组件3 我是组件4 .main { width: 500px; .item { width: 100px; height: 100px; background: #009966; border: #409eff 1px solid; text-align: center; line-height: 100px; }} 主组件全部代码 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 () }, / / start timer startTimer () {/ / pre-executed once to ensure that the first run delay will not be double the actual this.play (); / / intercept processing if (this.interval {this.play ();}, this.interval);}, / / stop timer stopTimer () {clearInterval (this.timer) }, / / update element updateItems () {this.items = this.$children.filter (/ / update element needs to be confirmed as the specified child element child = > child.$options.name = "dhtSwiperSideItem");}, / / play the actual running function 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 ("current", now, "old", old); / / close the old element this.items.show = false; this.items.itemStyle = {transition: "all 1.5s ease", transform: `translateX (${this.axisx} px) `}; / / display the new element this.items.show = true ItemStyle = {transition: "all 1.5s ease", transform: "translateX (0)", animation: "mymove 1.5s 2"}; / / record data this.active = now + 1;}}; .dht-swiper-side {position: absolute; z-index: 2000; right: 0; display: flex; flex-flow: row; width: 100%;}

All the code of the subcomponent

Export default {name: "dhtSwiperSideItem", data () {return {show: false, defaultStyle: {}, itemStyle: {};}, watch: {}, beforeCreate () {}, created () {/ / element creation and need to update parent element attribute this.$parent & & this.$parent.updateItems () }, beforeMount () {}, mounted () {}, destroyed () {/ / element destruction and need to update parent element attributes this.$parent & & this.$parent.updateItems ();}, methods: {}}; .dht-swiper-side-item {position: absolute; transition: all 1s ease; transform: translateX (1000px); / / jitter animation @ keyframes mymove {0% {left: 0;} 50% {left: 15px } 100% {left: 0;} this is the end of the article on "how to implement $children and $parent for vue Carousel components". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to realize $children and $parent" of vue carousel components. If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.