vue-cli3使用vue-progressbar
程序员文章站
2022-09-30 23:02:05
vue-cli3使用vue-progressbar
yarn add vue-progressbar --save
或者
npm i vue-progressbar --save...
vue-cli3使用vue-progressbar
yarn add vue-progressbar --save 或者 npm i vue-progressbar --save
在main.js中引入
import vueprogressbar from 'vue-progressbar' vue.use(vueprogressbar, { color: '#1890ff', // 进度条颜色 failedcolor: 'red', // 失败显示的颜色 height: '2px' // 进度条高度 })在vue中使用
若想在http请求中也使用progressbar,需要在main.js改东西<script> export default { name: 'app', created () { this.$progress.start() this.$router.beforeeach((to, from, next) => { if (to.meta.progress !== undefined) { let meta = to.meta.progress this.$progress.parsemeta(meta) } // start the progress bar this.$progress.start() // continue to next page next() }) this.$router.aftereach((to, from) => { // finish the progress bar this.$progress.finish() }) } } </script>
//变动前 new vue({ router, render: h => h(app) }).$mount('#app') // 变动后 export default new vue({ ...app, router, render: h => h(app) }).$mount('#app') // 在封装好的http请求页面中导入main.js,此处以axios为例: import axios from 'axios' import qs from 'qs' import app from './main' const axios = axios.create({ baseurl: '/api', timeout: 10000, responsetype: "json", withcredentials: true, // 是否允许带cookie这些 headers: { "content-type": "application/x-www-form-urlencoded;charset=utf-8" } }); //post传参序列化(添加请求拦截器) axios.interceptors.request.use( config => { // 在发送请求之前开始进度条 app.$progress.start(); // for every request start the progress if (config.method === "post") { // 序列化 config.data = qs.stringify(config.data); // 温馨提示,若是贵公司的提交能直接接受json 格式,可以不用 qs 来序列化的 } return config; }, error => { app.$progress.fail(); //结束进度条 return promise.reject(error.data.error.message); } ); //返回状态判断(添加响应拦截器) axios.interceptors.response.use(res => { app.$progress.finish(); // 结束进度条 return res.data; }, error => { // 返回 response 里的错误信息 app.$progress.fail(); //错误进度条 let errorinfo = error.data.error error.data.error.message : error.data; return promise.reject(errorinfo); } );