【vue】使用自定义指令实现时间戳格式化

时间戳的显示需求

在开发中，大多数情况下从服务器请求获取到的都是时间戳。

我们需要将时间戳转换成具体格式化的时间来展示。

在Vue2中可以通过过滤器（filter）来完成；

在Vue3中可以通过 计算属性（computed） 或者 自定义方法（methods） 来完成；

其实我们还可以通过一个自定义的指令来完成。

下面直接贴出部分代码参考：

这里实现一个可以自动对时间戳格式化的指令v-format-time。

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

上面是一个类似工具函数，可以引入其它自定义指令的封装，在main.js中我们只需要调用这个函数并且传入app实例即可。

import dayjs from 'dayjs';export default function(app) {app.directive("format-time", {created(el, bindings) {bindings.formatString = "YYYY-MM-DD HH:mm:ss";if (bindings.value) {bindings.formatString = bindings.value;}},mounted(el, bindings) {const textContent = el.textContent;let timestamp = parseInt(textContent);if (textContent.length === 10) {timestamp = timestamp * 1000}el.textContent = dayjs(timestamp).format(bindings.formatString);}})
}

在App.vue文件中测试：

<template><h2 v-format-time="'YYYY/MM/DD'">{{timestamp}}</h2>
</template><script>export default {setup() {const timestamp = 1624452193;return {timestamp}}}
</script>

补充：指令的参数和修饰符

 <button v-self:info.aaaa.bbbb="'ABC'" ></button>

info是参数的名称
aaa-bbb是修饰符的名称
ABC是传入参数的具体的值

以上都可以在生命周期函数中获取相应的数据。

注意：在Vue中，代码的复用和抽象主要还是通过组件；在某些情况下，对DOM元素进行底层操作就需要使用到自定义指令。

【vue】使用自定义指令实现时间戳格式化相关推荐

Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
VUE通过自定义指令，只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue directives自定义指令的使用
有的情况下,需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 自定义指令使用情景: 1.按钮级别权限的控制. 2.按钮的波纹动态效果. 3.一键copy的功能. 4.输入框自动聚焦. ...
Vue.js 自定义指令
简介除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D ...

【vue】使用自定义指令实现时间戳格式化

时间戳的显示需求

【vue】使用自定义指令实现时间戳格式化相关推荐

最新文章

热门文章