bind(el, binding) {
el.style.color = '#42E5D3';
}
}),
Vue.directive('theme',function(el){
el.style.color = '#42E5D3'
el.style.background = '#f6f6f6'
}),
// 图片未加载完之前先用随机背景色占位
Vue.directive('img', {
inserted:function (el, binding) {
var color = Math.floor(Math.random()*1000000);
el.style.backgroundColor = "#" + color;
var img = new Image();
img.src = binding.value;
img.onload = function(){
el.style.backgroundImage = 'url('+ binding.value +')'
}
}
})
}
export default mydirective;
在main.js中引入
//自定义全局指令
import directive from '@/components/common/directive'
Vue.use(directive)store 模块化管理
store模块化管理主要是满足不同开发人员的需求、避免使用单一store文件导致命名冲突。同时在main里定义了统一的模块文件满足大多数项目开发的场景需求。
文件所属store>main.js
import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'
import Axios from 'axios'
import createPersistedState from 'vuex-persistedstate'import baseInfo_store from './baseInfo'
Vue.use(Vuex)
const store = new Vuex.Store({
// 用不同的模块管理vuex存储数据
modules: {
baseInfoStore: baseInfo_store, //userInfo模块
},
plugins: [createPersistedState({
storage: window.sessionStorage
})]})
//切换页面一般需要的loading动画状态
store.registerModule('pageSwitch', {
state: {
isLoading: false
},
mutations: {
updateLoadingStatus (state, payload) {
state.isLoading = payload.isLoading
}
}
})
//切换路由的同时切换title
router.beforeEach(function (to, from, next) {
if(to.meta.title){
document.title = to.meta.title
}
store.commit('updateLoadingStatus', {isLoading: true})
next()
})
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
//ajax请求的动画状态
store.registerModule('ajaxSwitch', {
state: {
ajaxIsLoading: false,
ajaxIsPrompt: false,
},
mutations: {
ajaxStar (state) {
state.ajaxIsLoading = true
},
ajaxEnd (state) {
state.ajaxIsLoading = false
},
ajaxPromptShow (state) {
state.ajaxIsPrompt = true
},
ajaxPromptHide (state) {
state.ajaxIsPrompt = false
}
},
getter : {
ajaxIsLoading: state => state.ajaxIsLoading
}
})
//请求拦截
Axios.interceptors.request.use(config => {
store.commit('ajaxStar')
return config;
})
//响应拦截
Axios.interceptors.response.use(config => {
