2020-11-27【vue 项目实战】

vue 模块分包

• copote-ui\src\api\trafficData api 调用
• views\trafficData\trafficStatistics\index.vue 视图

vue 全局挂载组件

• 查询
• 重置
• 接口调用权限

<!--<CustomFilterButton ref="commonFilter" @submit="queryList" @reset="resetQuery"></CustomFilterButton>-->
<template slot="left">
		<!--input  text  默认   number-->
        <el-input v-model="queryParams.projectName" clearable placeholder="请输入申请单编号"></el-input>
        <!--select > option -->
        <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'
// 其他地方定义的 store

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)

//  vuex  stroe  语法
//  state:{} //    全局参数
// mutations:{} //  set 方法 // this.$store.commit('SET_MODULE_NAME',response.data.moduleName)
/* actions:{} //  api  调用区 this.$store.dispatch('settings/changeSetting', {}) */
//  modules:{} //  提前声明其他store文件在这引入
// getters:{} //  get 方法

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 指令与元素解绑时调用
• 使用场景： 权限判断、按钮是否可见 传入的值和 公共路由里面的权限值做匹配

 /**
 * 操作权限处理
 * Copyright (c) 2020 copote
 */
import store from '@/store'

//  el:指令所绑定的元素，可以用来直接操作 DOM 
//  binding:{name:'',value:'',oldValue:'',expression:'表达式'}
//  v-my-directive:foo  参数
//  vnode:指令所绑定的元素，可以用来直接操作 DOM 

export default {
  inserted(el, binding, vnode) {
    const { value } = binding  //  es6解构关键字  const value = binding.value
	//    const { oldValue } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

	  //  返回  true/false
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el) //   操作权限： 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); // eslint-disable-line
}

export default install