vue插件和动画的使用

黄莲解读片
282 阅读4分钟

插件

插件通常是用来给 vue 提供扩展功能的一种方式

  • 给 Vue 添加属性和方法
  • 给 Vue 实例 添加属性和方法
  • 添加全局资源：指令、过滤器、组件等
  • 添加配置选项

安装插件

通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成

Vue.use(插件);

如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

实例

axios

cdn.bootcss.com/axios/0.19.…

function http(_Vue, options) {
  _Vue.prototype.$http = axios;
}

Vue.use(http);

// or

function http(_Vue, options) {
  _Vue.prototype.$http = adaptor.http;
}

Vue.use(http, {adaptor: axios});

new Vue({
  el: '#app',
  data: {
  },
  async created() {
    // let rs = await axios({
    //     method: 'post',
    //     url: 'https://api.apiopen.top/musicRankings'
    // });
    // console.log(rs);

    let rs = await this.$http({
      method: 'post',
      url: 'https://api.apiopen.top/musicRankings'
    });
    console.log(rs);
  }
});

修改 prototype 会修改整个 Vue 原型链

另外一种方式

function http(_Vue) {
  _Vue.mixin({
    beforeCreate() {
      if ( this.$options.adaptor ) {
        this.$http = this.$options.adaptor;
      }
      if ( this.$options.parent && this.$options.parent.$http ) {
        this.$http = this.$options.parent.$http;
      }
    }
  });
}

Vue.use(http);

new Vue({
  el: '#app',
  adaptor: axios,
  components: {
    'my-component': myComponent
  }
})

动画

在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理

CSS

通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
            transition: .5s all;
        }
        .js_animation_box.end {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <button id="js_animation_btn">原生动画</button>
    <div id="js_animation_box" class="js_animation_box"></div>
    <script>
        // 原生 + css
        let jsAnimationBtn = document.querySelector('#js_animation_btn');
        let jsAnimationBox = document.querySelector('#js_animation_box');

        jsAnimationBtn.onclick = function() {
            jsAnimationBox.classList.add('end');
        }
    </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <button id="js_animation_btn">原生动画</button>
    <div id="js_animation_box" class="js_animation_box"></div>
  	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
				// jq
        $('#js_animation_btn').on('click', function() {
            $('#js_animation_box').animate({
                width: 200,
                height: 200
            }, .5);
        });
    </script>
</body>
</html>

vue 中的动画处理

在 vue 中基本和上面的处理方式是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
            transition: .5s all;
        }
        .js_animation_box.end {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isEnd = !isEnd">vue动画</button>
        <div :class="['js_animation_box', isEnd ? 'end' : '']"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isEnd: false
            }
        });
    </script>
</body>
</html>

动画生命周期

vue 为元素和组件的几个特殊的情况提供了对应的处理方式

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点
transition 组件

通过 transition 组件包裹的元素或组件，会在上面定义的几个场景中触发过渡，并添加指定的 class 样式

过渡类名
  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

Transition Diagram

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .slide-fade-enter-active, .slide-fade-leave-active {
            transition: all 5s ease;
        }
        .slide-fade-enter {
            width: 0;
            height: 0;
        }
        .slide-fade-enter-to {
            width: 100px;
            height: 100px;
        }
        .slide-fade-leave {
          	/*可以和slide-fade-enter-to合并*/
            width: 100px;
            height: 100px;
        }
        .slide-fade-leave-to {
          	/*可以和slide-fade-enter合并*/
            width: 0;
            height: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">vue动画</button>
        <transition name="slide-fade">
            <div v-if="isShow" class="js_animation_box"></div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>
</body>
</html>
avatar
文章
阅读
粉丝