vue项目中自定义filter过滤器以及自定义事件绑定

关于vue的过滤器的解释和使用可参看 vue.js官方文档，

关于vue的自定义事件可参看 vue.js官方文档

此处只是本人在开发过程中的一些记录，方便查阅，希望能给各位带来一些帮助！

首先在filters文件夹下创建index.js文件：

const dateFormat = (value, format) => {
  const date = new Date(value)
  const y = date.getFullYear()
  const m = date.getMonth() + 1
  const d = date.getDate()
  const h = date.getHours()
  const min = date.getMinutes()
  const s = date.getSeconds()

  if (format === undefined) {
    return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
  }
  if (format === 'yyyy-mm-dd hh:mm') {
    return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}`
  }
  if (format === 'yyyy-mm-dd') {
    return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
  }
  if (format === 'yyyy-mm') {
    return `${y}-${m < 10 ? '0' + m : m}`
  }
  if (format === 'mm-dd') {
    return ` ${m < 10 ? '0' + m : m}:${d < 10 ? '0' + d : d}`
  }
  if (format === 'yyyy') {
    return `${y}`
  }
  if (format === 'hh:mm:ss') {
    return ` ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
  }
  if (format === 'hh:mm') {
    return ` ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}`
  } else {
    return ''
  }
}

const dateStrFormat = (value, format) => {
  if (value === undefined) {
    return ''
  }
  if (format === undefined) {
    return value
  }
  if (format === 'yyyy-mm-dd hh:mm') {
    return value.substr(0, 16)
  }
  if (format === 'yyyy-mm-dd') {
    return value.substr(0, 10)
  }
  if (format === 'yyyy-mm') {
    return value.substr(0, 7)
  }
  if (format === 'mm-dd') {
    return value.substr(5, 5)
  }
  if (format === 'yyyy') {
    return value.substr(0, 4)
  }
  if (format === 'hh:mm:ss') {
    return value.substr(11, 8)
  }
  if (format === 'hh:mm') {
    return value.substr(11, 5)
  } else {
    return ''
  }
}

const subString = (value, len) => {
  if (value != '') {
    if (len === undefined) {
      return value.substr(0, 20)
    } else if (value.length > len) {
      return value.substr(0, len)
    } else {
      return value
    }
  } else {
    return ''
  }
}

// 截取当前数据到小数点后两位
const toFixed = (value, len) => {
  if (len !== undefined && (/(^[1-9]d*$)/.test(len) || len === 0)) {
    return parseFloat(value).toFixed(len)
  } else {
    return parseFloat(value).toFixed(2)
  }
}

/**
 * 将秒转换为 分:秒
 * s int 秒数
*/
const sToHs = (s) => {
  // 计算分钟
  // 算法：将秒数除以60，然后下舍入，既得到分钟数
  var h
  h = Math.floor(s / 60)
  // 计算秒
  // 算法：取得秒%60的余数，既得到秒数
  s = s % 60
  // 将变量转换为字符串
  h += ''
  s += ''
  // 如果只有一位数，前面增加一个0
  h = (h.length === 1) ? '0' + h : h
  s = (s.length === 1) ? '0' + s : s
  return h + '分' + s + '秒'
}

export default {
  dateStrFormat,
  dateFormat,
  subString,
  toFixed,
  sToHs
}

View Code

在全局js文件中引入过滤器以及自定义事件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import filters from './filters'
// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
import App from './App'
import store from './store'
import router from './router'

// 引入定义的全局filter
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))

// 自定义的点击事件  点击元素外部时触发的事件
Vue.directive('clickoutside', {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
})

// 添加日期获取工具
Vue.prototype.getNowFormatDate = function getFormatDate() {
  var date = new Date()
  var month = date.getMonth() + 1
  var strDate = date.getDate()
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = '0' + strDate
  }
  var currentDate = date.getFullYear() + '-' + month + '-' + strDate + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
  return currentDate
}

// 添加日期获取工具
Vue.prototype.getNowFormatDate = function getFormatDate() {
  var date = new Date()
  var month = date.getMonth() + 1
  var strDate = date.getDate()
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = '0' + strDate
  }
  var currentDate = date.getFullYear() + '-' + month + '-' + strDate + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
  return currentDate
}

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

View Code

应用主体 App.vue:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

View Code

vue的filter使用用途之一：

<span>{{ title|subString(20) }}</span>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，subString 过滤器函数将会收到 title 的值作为第一个参数。

vue自定义事件的使用：

clickoutside为自定义的事件名称，hideCMSearch为事件触发的函数

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！