魏晓南,成都猫咪领养,跨时代牌具
yarn add vue-progressbar --save 或者 npm i vue-progressbar --save
我要评论
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);
}
);
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
网友评论