网站开发用什么简单,门户网站名词解释,深圳知名包装设计公司,cms页面一、proxy方式
1.封装日期选择工具函数#xff1a;
在untils文件夹下新建index.ts,并导出工具函数
/*** 获取不同类型日期* param#xff1a;类型 dateVal: 是否指定*/
export function getSystemDate(param: any, dateVal: any) {let systemDate dateVal ? new Date(da…
一、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部分代码
templatedivel-date-pickerv-modelplantInfo.gridDatetypedateplaceholder选择日期:disabled-datedisabledDate:shortcutsshortcutsformatYYYY-MM-DDstylewidth: 100%//div
/template
script 中代码
script setup langts namesite
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 refPlantInfo({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 --
templatedivbutton clickuseUtility使用工具函数/button/div
/templatescript langts
import { defineComponent, inject } from vue;export default defineComponent({setup() {// 注入工具函数const myUtility inject() void(myUtility);const useUtility () {// 使用工具函数myUtility();};return {useUtility};}
});
/script
