vue 模块分包
- copote-ui\src\api\trafficData api 调用
- views\trafficData\trafficStatistics\index.vue 视图
vue 全局挂载组件

<template slot="left">
<el-input v-model="queryParams.projectName" clearable placeholder="请输入申请单编号"></el-input>
<el-select v-model="queryParams.cityOrgCode" placeholder="请选择业务分类" clearable @change="handleDistrictCount">
<el-option v-for="item in cityCountList"
:key="item.cityOrgCode" :label="item.cityOrgName" :value="item.cityOrgCode"></el-option>
</el-select>
</template>
<template slot="right">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['visit:project:add']">新增</el-button>
</template>
export default {
name: 'CustomFilterButton',
props:{
isShow:{
type:Boolean,
default:true
}
},
data() {
return {
}
},
methods: {
querySubmit() {
this.$emit('submit')
},
queryReset() {
this.$emit('reset')
}
}
}
.common-filter{
margin-bottom: 10px;
display:flex;
justify-content: space-between;
.el-input, .el-select,.el-cascader{
width:198px !important;
margin-right: 6px;
margin-bottom: 5px;
}
}
vuex store 使用场景
- 在不同路由中使用同一个会改编的参数,也就是需要一个全局参数
- 为了解决不同模块命名冲突的问题,将不同模块的做es6 导出时 namespaced:true
- store 声明 命名空间冲突问题
- 退出系统 跳转到登录页: this.$store.dispatch
- 登录系统 写缓存: this.$store.commit
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
user,
tagsView,
permission,
settings
},
getters
})
export default store
vuex dispatch/commit 调度/提交
- dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据
- commit:同步操作,数据提交至 mutations ,可用于登录成功后读取用户信息写到缓存里
vue 自定义指令 common / vue 指令大全
- bind 只调用一次,指令第一次绑定到元素时调用,可进行数据初始化设置
- inserted 被绑定元素插入父节点时调用
- update 所在组件的 VNode 更新时调用
- unbind 指令与元素解绑时调用
- 使用场景: 权限判断、按钮是否可见 传入的值和 公共路由里面的权限值做匹配
import store from '@/store'
export default {
inserted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`请设置操作权限标签值`)
}
}
}
import hasRole from './hasRole'
import hasPermi from './hasPermi'
const install = function(Vue) {
Vue.directive('hasRole', hasRole)
Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
window['hasRole'] = hasRole
window['hasPermi'] = hasPermi
Vue.use(install);
}
export default install