vue3封装自定义工具函数类,引入全局变量中

如:封装处理时间戳函数的filetrTimes 函数

工具类-filters.ts:

/**
 * 封装自定义的工具类
 */
//过滤数据,比如表格数据用有时间戳的,需要序列化成 dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00:17:56
//使用dayjs工具-专门处理时间的 npm install dayjs --save 工具网站:https://dayjs.fenxianglu.cn/
const dayjs=require('dayjs')
/**
 * 封装自定义的时间戳转对应格式的函数
 * @param val 时间戳转 
 * @param format 格式 YYYY-MM-DD HH:mm:ss
 * 如: dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00:17:56
 */
const filetrTimes =(val: number,format='YYYY-MM-DD HH:mm:ss')=>{
    if(!isNull(val)){
        return dayjs(val).format(format)
    }else{
        return ''
    }
}
//定义判空函数
export const isNull=(date:any)=>{
    if(!date) return true
    if(JSON.stringify(date)==='{}') return true
    if(JSON.stringify(date)==='[]') return true
}
/**
 * 将封装的自定义filetrTimes函数注入到全局变量---然后再main.ts引入这个
 * 使用default表示这个js的默认一个函数
 * 如何使用:
 *     在需要使用的直接使用: $filters.filetrTimes(时间戳的值)
 *     在html标签使用直接使用: {{ $filters.filetrTimes(时间戳的值) }}
 */
export default(app:any)=>{
    //使用 app.config.globalProperties 设置filetrTimes到全局去
    app.config.globalProperties.$filters={
        filetrTimes
    }
}

/**
 * 定义测试方法
 */
export const text= (aaa:any) => {
    return aaa;
}

注入到全局app中去

main.ts添加

//引入自定义封装的函数,在全局使用
import filters from './utils/filters';


const app = createApp(App)

//注入自定义封装的函数,在全局使用
filters(app)

app.mount('#app')

使用:

主要是两种使用方式:

 *     在需要使用的直接使用: $filters.filetrTimes(时间戳的值)
 *     在html标签使用直接使用: {{ $filters.filetrTimes(时间戳的值) }}

在组件中使用:

在js代码中使用方式一:

<script lang="ts" setup>

import { ref, reactive,getCurrentInstance } from "vue";
 // @ts-ignore
const { proxy } = getCurrentInstance();

//使用
console.log( proxy.$filters.filetrTimes(1318781876406));
</script>

在js代码中使用方式二(单独只是引用单函数):

<script lang="ts" setup>
//在js代码单独引入
import { text } from '@/utils/filters'
//js代码使用就更简单了,执行text函数
console.log(text(111))
</script>


 <!-- 测试使用单独在vue组件-标签使用函数的自定义函数 -->
    <template  v-if="item.prop=='phonenumber'" >
          {{ text(111) }}
    </template>