[JavaScript知识库]Vue自定义指令-格式化日期

全局指令

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding，一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

自定义格式化日期指令

新建FormatDate.js

/**
 * 格式化timestamp成字符串
 * @param timestamp
 * @param fmt，格式，如yyyy-MM-dd
 */
 export function formatDate(timestamp, fmt='yyyy-MM-dd hh:mm:ss') {
  const date = new Date(timestamp - 0)
  // 替换年份
  if(/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substring(4 - RegExp.$1.length, 4));
  }
  let obj = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for(let k in obj) {
    if(new RegExp(`(${k})`).test(fmt)) {
      let str = obj[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
}
function padLeftZero(str) {
  return str.length === 1 ? '0' + str : str
}

const options = {
  bind(el, binding) {
    console.log(binding.arg)
    el.timestamp = el.innerHTML.trim()
    el.innerHTML = formatDate(el.timestamp, binding.arg)
  },
  inserted(el, binding) {
  },
  update(el, binding) {
  },
  componentUpdated(el, binding) {
  },
  unbind(el, binding) {
  }
}

export default options

Vue注册

main.js中

import FormatDateOptions from './directive/FormatDate'

Vue.directive('fmt-date', FormatDateOptions)

使用

使用动态指令参数，如下面的fmt定义在data中

<div v-fmt-date:[fmt]>{{date}}</div>


data() {
  return {
    fmt: 'yyyy/MM/dd hh:mm:ss',
    date: 1649839827071
  }
}

效果

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生