为了提升用户体验和减轻服务端压力，前端请求接口的时候会启用loading，常见的loading都是旋转的圈圈。但工作中也会遇到加载loading要展示自定义文字，所以自己封装了一个基于svg的vue-text-loading。
只要传入相应的文字已经动画的颜色，就可以出现文字闪烁的loading：
线上demo：danacm.github.io/vue-text-lo…
使用步骤：
安装：
npm install --save vue-text-loading
使用：
<template>
<text-loading
:height="height"
:width="width"
:animate-time="animateTime"
:start-color="startColor"
:stop-color="stopColor"
:inner-text-color="innerTextColor"
:timing-func="timingFunc"
:showText="showTxt"
:text="text"
:animateDirection="animateDirection"
></text-loading>
</template>
<script>
import ProgressBar from "vue-text-loading";
export default {
data() {
return {
animateTime: 5,
height: 300,
width: 300,
text: "github",
animateDirection: "right",
startColor: "#bbff42",
stopColor: "#0413dc",
innerTextColor: "#ccc",
timingFunc: "linear",
showTxt: false
};
},
components: {
ProgressBar
},
methods: {
showLoading() {
this.showTxt = true;
const duration = (this.animateTime * 3 + 2) * 1000;
setTimeout(() => {
this.showTxt = false;
}, duration);
}
}
};
</script>
结果：
