Vue 全局属性配置

常见全局配置的属性/组件：请求api、封装的icon组件、elementUI Plus样式、时间格式化方法、国际化语言函数、自定义指令

关键语法

// 全局配置，可在模块函数中导出，也可直接在main.js中定义
app.config.globalProperties.$request = request; 

// 若全局配置又模块导出，需要在main.js中导入后挂载
installRequest(app)

全局配置的两种方法

1. 先在模块化中导出全局配置，再在main.js挂载

// filter.js 模块化内导出全局配置
export default (app) => {
  app.config.globalProperties.$filters = { dateFilter, relativeTime }
}


// main.js 中导入挂载
import installFilter from '@/filters'
installFilter(app)

2. 在main.js直接挂载全局配置

import filters '@/filters'
app.config.globalProperties.$filters = filters;

全局配置示例：

1.时间格式化函数的全局配置：

1.1 创建函数模块 filter.js

import dayjs from 'dayjs'
import rt from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import store from '@/store'

export const dateFilter = (val, format = 'YYYY-MM-DD') => {
  if (!isNaN(val)) {
    val = parseInt(val)
  }
  return dayjs(val).format(format)
}

// 加载相对时间插件
dayjs.extend(rt)
function relativeTime(val) {
  if (!isNaN(val)) {
    val = parseInt(val)
  }
  //  处理国际化
  return dayjs()
    .locale(store.getters.language === 'zh' ? 'zh-cn' : 'en')
    .to(dayjs(val))
}

export default (app) => {
  app.config.globalProperties.$filters = { dateFilter, relativeTime }
}

1.2 main.js 中全局配置

import { createApp } from 'vue'
import App from './App.vue'
import installFilter from '@/filters'
const app = createApp(App)
installFilter(app)
app.mount('#app')

1.3 组件内使用全局配置的属性

<template>
  <div class="article-ranking-container">
      <el-table ref="tableRef" :data="tableData" border>
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
        <!-- 无需引用或导入，直接$xxx使用 -->
          <template #default="{ row }" v-if="item.prop === 'publicDate'">
            {{ $filters.relativeTime(row.publicDate) }}
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

2. 自定义指令模块函数的全局配置

2.1 创建函数模块 directives.js、permission.js

// permission.js 自定义指令功能配置

import store from '@/store'

function checkPermission(el, binding) {
  const { value } = binding
  const points = store.getters.userInfo.permission.points
  console.log('points', points)
  if (value && value instanceof Array) {
    const hasPermission = points.some((point) => {
      return value.includes(point)
    })
    if (!hasPermission) {
      // 如果无法匹配，则表示当前用户无该指令，需要删除对应的功能按钮
      el.parentNode && el.parentNode.removeChild(el)
    }
  } else {
    // 抛出错误
    throw new Error('v-permission value is array inclued string')
  }
}

export default {
  // 在绑定元素的父组件被挂载后调用
  mounted(el, binding) {
    checkPermission(el, binding)
  },
  // 在包含组件的 VNode 及其子组件的 VNode 更新后调用
  update(el, binding) {
    checkPermission(el, binding)
  }
}

// 自定义工具函数模块 directive.js

// 局部打印插件
import print from 'vue3-print-nb'
// 权限控制之功能按钮自定义指令
import permission from './permission'
export default (app) => {
  app.use(print)
  app.directive('permission', permission)
}

2.2 main.js 中全局配置

···
import installDirective from '@/directives'
installDirective(app)
····

2.3 组件内使用全局配置的自定义指令

<template>
  <div class="user-manage-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          :label="$t('msg.excel.action')"
          fixed="right"
          width="250"
        >
          <!-- 自定义指令v-permission -->
          <template #default="{ row }">
            <el-button
              type="primary"
              size="mini"
              @click="onShowClick(row._id)"
              v-permission="['importUser']"
              >{{ $t('msg.excel.show') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>