vue 做一个带进度动画的下载按钮

game.gif

进度通过VUEX全局控制，就算切换页面你的下载进度也不会丢失并且在其他页面也能通过btn按钮看到下载进度

调用方式

vuex

state：{
  plan: {},
}，
getters:{
  /**
         * 下载进度
         * @param state
         */
        getPlan: state => {
            return state.plan
        },
},
mutations:{
   setPlan(state, plan) {
            state.plan = JSON.parse(plan);
        },
/**
         * 停止进度条
         * @param state
         */
        stopPlan(state) {
            window.clearInterval(intervalID)
            intervalID = undefined
        },
},
actions:{
/* 开始获取进度
         * @param commit
         */
        actionPlan({
            state,
            commit
        }) {
            if (!intervalID) {
                intervalID = setInterval(function () {
                    AppTool.getPlan().then(res => {
                        console.log("定时器")
                        commit("setPlan", res)
                        // console.log(state.plan)
                    })
                }, 500)
            }

        },
}
         

最终实现效果：
宽高适应，不同状态时文字变化，按钮颜色外部传入，按钮渐变色，下载完成时会有回调