Vue 动态组件动画插件

Posted zhaopengcheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 动态组件动画插件相关的知识,希望对你有一定的参考价值。

1 动态组件

①简单来说:

就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。

②动态切换:

在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;

改变挂载的组件,只需要修改is指令的值即可。

示例代码:

技术分享图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 动态组件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button @click=toShow>点击显示子组件</button>
    <component v-bind:is="which_to_show"></component>
</div>
 
<script>
 
// 创建根实例
new Vue({
  el: #app,
  data:{
      which_to_show:first
  },
    methods:{
        toShow:function(){
            var arr = ["first","second","third"];
            var index = arr.indexOf(this.which_to_show);
            if(index<2){
                this.which_to_show = arr[index+1];
            }else{
                this.which_to_show = arr[0];
            }
        }
    },
    components:{
        first:{
            template:<div>这是子组件1<div>
        },
        second:{
            template:<div>这是子组件2<div>
        },
        third:{
            template:<div>这是子组件3<div>
        },
    }
})
</script>
</body>
</html>
View Code

 

 

2 过渡效果:vue 有两种实现动画的效果。1)CSS动画  2)JS 实现。 关键标签:<transition>,<v-if>,<v-show> 属性: mode="out-in" 或者 mode="in-out"

过渡会经过几个状态

技术分享图片

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter

 

2.1 自定义过渡类名,对于使用第三方 CSS 动画库非常方便。比如:Animate.css

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

示例:

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

 

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反,我们只需要使用动态组件

 

 3 vue 使用插件

1)使用 npm 命令 install 插件,在项目目录里进行操作。

cnpm install  vue-router --save  //save 表示将对应的插件写到配置文件中 project.json

2)在根组件文件中(main.js)中导入,使用方法

// 导入到根组件中
import VueRouter from ""


// 通过全局方法 Vue.use() 使用插件:
Vue.use(VueRouter)

 

以上是关于Vue 动态组件动画插件的主要内容,如果未能解决你的问题,请参考以下文章

vue里面可以动态加载touchspin插件吗

vscode代码片段生成vue模板

Vue显示和隐藏的过渡动画

vue 动画

vue基础-异步组件&动画

vue.draggable拖拽组件中用transition-group包裹拖拽组件了,拖拽还是没有动画?