新年伊始,2月更文带你在技术写作之路「兔飞猛进」| 掘金日新计划

46 阅读1分钟

今天带来的是vue3.0的原型链挂载方法

1.封装一个common.js文件

// 时间戳转换function getTimeStr(date, fmt = "yyyy-m-d h:i:s") {    if (date) {        let timer = new Date(parseInt(date));        if (/(y+)/.test(fmt)) {            fmt = fmt.replace(RegExp.$1, (timer.getFullYear() + "").substr(4 - RegExp.$1.length))        }        let o = {            y: timer.getFullYear(),            m: timer.getMonth() + 1,            d: timer.getDate(),            h: timer.getHours(),//小时            i: timer.getMinutes(),//分钟            s: timer.getSeconds(),//秒            a: timer.getDay()//星期        }        if (o.m < 10) {            o.m = '0' + o.m        }        if (o.d < 10) {            o.d = '0' + o.d        }        if (o.i < 10) {            o.i = '0' + o.i        }        if (o.s < 10) {            o.s = '0' + o.s        }        if (o.h < 10) {            o.h = '0' + o.h        }        for (let k in o) {            if (new RegExp(`(${k})`).test(fmt)) {                let str = o[k] + ""                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))            }        }        return fmt    } else {        return ""    }}在下面输出一下
export default {
getTimeStr,}

2.在main.js里面全局引用它

// 挂载公共方法import common from "./common/js/common.js";

var app = createApp(App).use(store);app.use(Antd).use(router).component('IconSymbol', IconSymbol).mount('#app');// 时间戳转换app.config.globalProperties.getTimeStr = common.getTimeStr;

3.在页面中的使用:

结构中的使用:
<template>     {{ proxy.getTimeStr(record.updateTime) }}</template>在Vue3中,getCurrentInstance()可以用来获取当前组件实例
import { getCurrentInstance } from "vue";const { proxy } = getCurrentInstance();