在项目中,许多地方会使用到类似的动画,所以我们封装起来会好点,我们先创建一个组件,用来设置它的动画效果,
<template>
<transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter">
<slot v-if="show"></slot>
</transition>
</template>
<script>
export default {
props:['show'],
methods:{
handleBeforeEnter:function(el){
el.style.color='red'
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color='green',
done()
},2000)
}
}
}
</script>
设置一个组件,动画效果用js来定义,我们接受来自父组件的参数(show),再来控制我们子组件的显示与隐藏。
我们在子组件中设置了插槽slot ,让父元素决定需要执行动画的dom元素。
此时我们来设置父组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
</ul>
<h2>Ecosystem</h2>
<child :show="show">
<div>show child</div>
</child>
<button @click="clickTr">点击切换</button>
</div>
</template>
<script>
import child from './child.vue' //引入子组件
export default {
name: 'HelloWorld',
data () {
return {
msg: 'write you first vue ',
show:true
}
},
methods:{
clickTr:function(){
this.show=!this.show;
}
},
components:{//注册组件
child,
}
}
</script>
我们需要在父组件中要引入子组件(from后面跟的是路径,你根据自己的文件位置填写路径和子组件名),然后我们的父组件需要注册组件 components引入,然后在父组件template中把子组件添加进去,在子组件中添加需要显示的元素;重点我们要在子组件中添加:show=“show” 这里是 :传递子组件的值(也就是子组件props接收的值)=“父组件的data的某属性”;在父组件中设置methods方法,用来控制样式的显示与隐藏,我们可以在下面定义一个按钮,绑定一个点击事件,来控制父组件的data的某属性的值;此时我们就拥有了一个封装的动画。
vue中我们会获取到后端传递过来的,多组嵌套值,这时候我们可以使用vue的递归组件来实现。
<template>
<div>
<div
class="item"
v-for="(item, index) of list"
:key="index"
>
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="item-chilren">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script>
我们在定义组件时填写的name名字就是我们可以递归复用的值。