vue的动画封装，vue的递归组件

在项目中，许多地方会使用到类似的动画，所以我们封装起来会好点，我们先创建一个组件，用来设置它的动画效果，

<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><divclass="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名字就是我们可以递归复用的值。

vue的动画封装，vue的递归组件相关推荐

hide show vue 动画_（Vue动效）7.Vue中动画封装
关键词:动画封装--进行可复用一.如何封装? 1.使用:局部组件传递数据+局部组件中使用JS动画 2.原理:将动画效果完全第封装在一个名为<fade>的组件中,今后如要复用,只需要复制有 ...
vue树形权限菜单_Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
vue树形权限菜单_Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. main.js 作为入口: import Vue from 'vue' import main from './components/ ...
VUE中简单封装二次确认组件
如何快速封装简单二次确认组件? 一.首先在src文件夹内的components文件中创建一个secn-conf.vue 二 .在secn-conf.vue页面中将弹出层.提示消息等样式写好三 .在p ...
Vue动态查询条件-Vue动态查询规则-Vue多条件分组组合查询-递归组件(一):前端
先看最终的效果: 最近项目上有一个需求,VUE前端要实现动态查询条件组件,后端就能够动态组装SQL. 要模仿人家Azure Devops的查询功能,我丢,Azure Devops是人家微软开发的个东西 ...
vue动画、vue位移动画、vue列表动画
1.vue动画 1.1 vue动画设置把需要显示隐藏做动画的标签放入transition组件中作为子标签注意:transition标签要求仅有一个子标签,多余的不会渲染,如果需要在一个组件中实现多 ...
vue 如何开发封装自己的公共组件库，并发布到 npm 上
一.全局安装 vue-cli 脚手架,使用 vue init webpack-simple yyl-npm-practice 初始化项目初始化项目后 npm install ; npm run de ...
基于vue和elementUI封装框选表格组件
前言:主要是 table 表格框选功能实现功能如下: 表格框选功能右键操作功能(删除.查看.编辑) 分页功能表头分类筛选功能回显功能(显示默认选中数据) 排序功能行禁用不可选功能不说废话, ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...

vue的动画封装，vue的递归组件

vue的动画封装，vue的递归组件相关推荐

最新文章

热门文章