vue-progressbar使用
参考文献:https://github.com/hilongjw/vue-progressbarmain.jsimport Vue from 'vue';import router from './router'import App from './App.vue';import store from './store'// 导入 table 和 分页组件import { ...
·
参考文献:
https://github.com/hilongjw/vue-progressbar
main.js
import Vue from 'vue';
import router from './router'
import App from './App.vue';
import store from './store'
// 导入 table 和 分页组件
import { VTable, VPagination } from 'vue-easytable'
//vue-js-modal
import VModal from 'vue-js-modal'
//vuejs-dialog
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
import 'vuejs-dialog/dist/vuejs-dialog.min.css';
//vue-progressbar
import VueProgressBar from 'vue-progressbar'
// 注册到全局
Vue.component(VTable.name, VTable);
Vue.component(VPagination.name, VPagination);
//vue-js-modal
Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });
//vuejs-dialog Tell Vue to install the plugin.
Vue.use(VuejsDialog);
console.log(VuejsDialogMixin);
//vue-progressbar
const options = {
//color: '#bffaf3',
//failedColor: '#874b4b',
thickness: '5px',
transition: {
speed: '0.2s',
opacity: '0.6s',
termination: 300
},
autoRevert: true,
location: 'top',
inverse: false
}
Vue.use(VueProgressBar, options);
Vue.config.productionTip = true;
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
var app = new Vue({
router: router,
store,
render: h => h(App)
}).$mount('#app');
export default app;
App.vue
<template>
<div id="app">
<div v-if="hasAccess" id="nav"></div>
<router-link to="/">Home</router-link> |
<router-link to="/protected">Protected</router-link>
<router-view/>
<vue-progress-bar></vue-progress-bar>
</div>
</template>
<script>
import {
mapGetters
} from 'vuex'
export default {
name: 'App',
computed: {
...mapGetters('oidcStore', [
'oidcIsAuthenticated'
]),
hasAccess: function() {
return this.oidcIsAuthenticated || this.$route.meta.isPublic
}
},
methods: {
userLoaded: function(e) {
console.log('I am listening to the user loaded event in vuex-oidc', e.detail)
},
oidcError: function(e) {
console.log('I am listening to the oidc error event in vuex-oidc', e.detail)
}
},
mounted() {
window.addEventListener('vuexoidc:userLoaded', this.userLoaded)
window.addEventListener('vuexoidc:oidcError', this.oidcError)
},
destroyed() {
window.removeEventListener('vuexoidc:userLoaded', this.userLoaded)
window.removeEventListener('vuexoidc:oidcError', this.oidcError)
}
}
</script>
<style>
</style>
axios.js
import Vue from 'vue';
import axios from 'axios';
import store from '../store';
import app from '../main'; // import the instance
Vue.prototype.$axios = axios
axios.defaults.baseURL = process.env.VUE_APP_API_BaseUrl;
axios.defaults.headers.common['Authorization'] = "Bearer " + store.state.oidcStore.access_token;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
config.headers.Authorization = "Bearer " + store.state.oidcStore.access_token;
console.info(config);
app.$Progress.start();
return config;
}, function(error) {
app.$Progress.fail();
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function(response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
app.$Progress.finish();
return response;
}, function(error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
app.$Progress.fail();
return Promise.reject(error);
});
export default axios
运行效果:
更多推荐
已为社区贡献8条内容
所有评论(0)