vue2.x搭建saas项目系列之九：utils、directives、filters、types

最新推荐文章于 2025-04-30 07:00:00 发布

原创

最新推荐文章于 2025-04-30 07:00:00 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #saas #项目架构

本文介绍了如何在Vue项目中全局注册和使用工具函数、自定义指令和过滤器的方法，并提供了具体的实现代码与使用示例。

此篇幅主要介绍、我们是如何全局管理及使用工具类相关，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代

一. utils

// 注册 自定义工具函数
import * as ompUtils from '@/utils/utils'
// Register global utils functions
Vue.prototype.$ompUtils = ompUtils 
declare module 'vue/types/vue' {
  interface Vue {
    $ompUtils: any
  }
}

// 使用
this.$fmOmpUtils.getSessionStorage('')

二. directives

// Register global directives
import * as directives from '@/directives'

Object.keys(directives).forEach((key) => {
  Vue.directive(key, (directives as { [key: string ]: DirectiveOptions })[key])
})

// 使用
<el-button
  v-clipboard:copy="https://"
  v-clipboard:success="clipboardSuccess"
  type="primary">
  复制链接
</el-button>

三.filters