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

忘是亡心i 2022-11-07 13:11 142阅读 0赞

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

一. 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

![2021031211095656.png][]

// 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

![20210312111545192.png][]

// Register global filter functions
    import * as filters from '@/filters'
    
    Object.keys(filters).forEach((key) => {
      Vue.filter(key, (filters as { [key: string ]: Function })[key])
    })
    
    // 使用
    <omp-switch
      @change="switchChange"
      switchClass="open-class"
      :switchState="formModel.state | isAvailableStateFilter">
    </omp-switch>

四. types

![20210312111812524.png][]

到此，utils、directives、filters、types-文章结束，原创不易，感谢浏览！

[2021031211095656.png]: /images/20221023/0e0fd85b2a1f486fa6d0eeaaeebffe22.png
[20210312111545192.png]: /images/20221023/5c02788d4e3748a4a071f497f30937ab.png
[20210312111812524.png]: /images/20221023/3741976b2d7f49cb9e1778ed15a2693b.png