在 Vue.js 中超级轻松地调整属性

因此,如果你已经阅读了我们在 Vue.js 中的 tweening 属性(https://andsky.com/tech/tutorials/vuejs-tween-values-tweenjs),你可能已经注意到,在 Vue.js 中有大量的代码,这不是一个超简单的事情,要在自己的项目中撕裂和散布,所以如果有办法抽象它,所以你几乎不需要写更多的代码,而不是使用 CSS 过渡?好吧, Luke Chinworth正在思考同样的事情,并提出了 vue-mixin-tween)。

安装

1# Yarn
2$ yarn vue-mixin-tween
3# NPM
4$ npm install vue-mixin-tween --save

使用

继续,将其直接扔到任何有数字属性的旧组件中。混合将基于您传输的属性名称创建一个新的反应性属性.例如:myProp变成myPropTween,每次myProp更新都会更新。

 1<template>
 2  <div>
 3    <button @click="addAlligators">Add Some Alligators</button>
 4    <h2>Number of Alligators: {{ numberOfAlligators }}</h2>
 5    <!-- You may want to Math.floor() the value first as it is a float. -->
 6    <h2>Number of Alligators: (Tweened) {{ numberOfAlligatorsTween }}</h2>
 7  </div>
 8</template>
 9
10<script>
11import VueMixinTween from 'vue-mixin-tween';
12
13export default {
14  data() {
15    return {
16      numberOfAlligators: 0
17    }
18  },
19
20  mixins: [
21    // The only required argument is the name of the property to tween.
22    // The default duration is 500 milliseconds.
23    // The default timing function is TWEEN.Easing.Quadratic.Out
24    // We're using a "custom" linear timing function here.
25    VueMixinTween('numberOfAlligators', 5000, (pos) => pos)
26  ],
27
28  methods: {
29    addAlligators() {
30      this.numberOfAlligators = 500;
31    }
32  }
33}
34</script>

它很简单,可以定制持续时间甚至时间函数,每组件的代码要比手动更少。