Vue 3 + TypeScript 项目中全局挂载并使用工具函数

一、proxy方式

1.封装日期选择工具函数：

在untils文件夹下新建index.ts,并导出工具函数

/*** 获取不同类型日期* param：类型 dateVal: 是否指定*/
export function getSystemDate(param: any, dateVal: any) {let systemDate = dateVal ? new Date(dateVal) : new Date(),year = systemDate.getFullYear(),month = systemDate.getMonth() + 1,date = systemDate.getDate(),hours = systemDate.getHours(),minutes = systemDate.getMinutes(),seconds = systemDate.getDate(),milliseconds = systemDate.getMilliseconds();month = month < 10 ? "0" + month : month;date = date < 10 ? "0" + date : date;hours = hours < 10 ? "0" + hours : hours;minutes = minutes < 10 ? "0" + minutes : minutes;seconds = seconds < 10 ? "0" + seconds : seconds;if (param == 0) {return year + "-" + month + "-" + date;} else if (param == 1) {return year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;} else if (param == 2) {return year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds + "." + milliseconds;} else if (param == 3) {return year + "-" + month;} else if (param == 4) {return year;}
}

2.引入并挂载到全局

在main.ts中，引入后挂载

import { App, createApp } from "vue";
import App from "./App.vue";import { getSystemDate } from "@/utils/index"; //引入全局使用的方法const app = createApp(App);app.config.globalProperties.$getSystemDate = getSystemDate; //挂载到全局app.mount("#app");

注意：

        1.vue3中挂载实例要用app.config.globalProperties.$方法，而vue2中挂载实例是Vue.prototype.$方法；

3.在页面中按需调用

template部分代码：

<template><div><el-date-pickerv-model="plantInfo.gridDate"type="date"placeholder="选择日期":disabled-date="disabledDate":shortcuts="shortcuts"format="YYYY-MM-DD"style="width: 100%"/></div>
</template>

script 中代码：

<script setup lang="ts" name="site">
import { ref, reactive, getCurrentInstance } from "vue";// proxy相当于 vue2的this，从getCurrentInstance 实例中获取，proxy对象
const { proxy } = getCurrentInstance();interface PlantInfo {plantName: any;plantScale: any;sysuserid: any;userDepid: any;gridDate: any;plantNetType: any;voltageLevel: any;prjAddr: any;longitude: any;moduleManufacturer: any;componentBrand: any;componentModel: any;workHours: any;plantStatus: any;roofPitch: any;orientation: any;plantShip: any;plantType: any;streetAddress: any;plantSummary: any;plantImageUrl: any;plantInvestor: any;
}const plantInfo = ref<PlantInfo>({plantName: "",plantScale: "",sysuserid: "",userDepid: "",gridDate: proxy.$getSystemDate(0),plantNetType: "",voltageLevel: "",prjAddr: "",longitude: "",moduleManufacturer: "",componentBrand: "",componentModel: "",workHours: "",plantStatus: "",roofPitch: "",orientation: "",plantShip: "",plantType: "",streetAddress: "",plantSummary: "",plantImageUrl: "",plantInvestor: ""
});const disabledDate = (time: Date) => {return time.getTime() > Date.now();
};
// 快速日期选择属性
const shortcuts = [{text: "今天",value: new Date()},{text: "昨天",value: () => {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);return date;}},{text: "一周前",value: () => {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);return date;}}
];
</script>

二、provide方式

        在Vue 3 + TypeScript 中挂载并使用一个全局的工具函数，你可以通过 Vue 实例的 provide 和 inject 方法来实现。具体步骤如下：

1.创建工具函数： 首先，创建你的工具函数。

// utils.ts
export function myUtilityFunction(): void {// Your utility function logic here
}

2.在主入口文件中挂载工具函数： 在 Vue 的主入口文件中，将工具函数通过 provide 方法挂载到全局。

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { myUtilityFunction } from './utils';const app = createApp(App);// 将工具函数挂载到全局
app.provide('myUtility', myUtilityFunction);app.mount('#app');

3.在组件中使用工具函数： 在需要使用工具函数的组件中，通过 inject 方法注入并使用该函数。

<!-- MyComponent.vue -->
<template><div><button @click="useUtility">使用工具函数</button></div>
</template><script lang="ts">
import { defineComponent, inject } from 'vue';export default defineComponent({setup() {// 注入工具函数const myUtility = inject<() => void>('myUtility');const useUtility = () => {// 使用工具函数myUtility();};return {useUtility};}
});
</script>