vue3自定义指令 时间格式化指令

利用自定义指令 实现一个简单的 时间格式化指令

1、建立一个directives目录，利用index全部导出，主要逻辑在 format-time.js中

2、main.js中用

import {
	createApp
} from 'vue';
import App from './App.vue';
//引用
import registerDirectives from './directives/index.js';
const app = createApp(App);
//把app传过去
registerDirectives(app);

app.mount('#app');

3、建立一个index.is

import registerFormatTime from './format-time.js';
export default function registerDirectives(app){
	registerFormatTime(app);
}

4、建立一个 format-time.js

//npm install dayjs  下载
import dayjs from "dayjs";
export default function(app){
//设置默认值
	let  formatString='YYYY-MM-DD HH:mm:ss';
	app.directive("format-time",{
		created(el,bindings){
			if(bindings.value){
				formatString=bindings.value;
			}
		},
		mounted(el){
			let textContent=parseInt(el.textContent);
			if(textContent.length===10){
				textContent=textContent*1000;
			}
			el.textContent=dayjs(textContent).format(formatString)
		}
	})	
}

5、在页面中使用

<template>

	<h2 v-format-time="'YYYY/MM/DD'">
		{{ timestamp }}
	</h2>
</template>

<script>
import {ref} from 'vue';
	export default {
		setup() {
			let timestamp=ref(1678177216);
			return{
				timestamp
			}
		}
	}
</script>

<style>

</style>