vue3以插件的方式封装公共方法

七月上_tao

已于 2024-07-04 11:56:26 修改

阅读量322

点赞数 8

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2024-07-04 11:53:12 首次发布

本文链接：https://blog.csdn.net/qi_qi_ai/article/details/140175600

版权

vue3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue3以插件的方式封装公共方法

首先在plugins文件下新建一个helper.js文件，

export const helper = {}
// 深拷贝
helper.clone = (origin) => {
    return JSON.parse(JSON.stringify(origin))
}
helper.formatTime = (dateTime) => {
    if (!dateTime) {
        return '0-0-0 0:0:0';
    }
    let date = new Date(dateTime);//时间戳为10位也就是秒需*1000，时间戳为13位也就是毫秒的话不需乘1000
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
}
export const setupHelper = (app) => {
    app.config.globalProperties.$h = helper
}

在main.js中

import { setupHelper } from './plugins/helper'
const app = createApp(App)
setupHelper(app)
app.mount('#app')

这样就可以在vue页面访问了

<template>
	     <el-table-column property="applyTime" label="申请时间" align="center" sortable  width="180" >
              <template #default="scope">
                {{ $h.format(scope.row.applyTime) }}
              </template>
            </el-table-column>
</template>
<script>
	let preTime=Date.now()
	let time=this.$h.formatTime (preTime)
</script>