vue filter(过滤器)全局用法(时间、算法、保留小数）

一、新建一个filters.js文件

import { JSMul } from './JSOperation.js'
const filters = {
  // 时间转换
  $timeConvers: function (timestamp, option) {
    if (!timestamp) return 0
    var date = new Date(Number(timestamp))
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var fmonth = month > 9 ? month : '0' + month
    var day = date.getDate()
    var fday = day > 9 ? day : '0' + day
    var hour = function () {
      return date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    }
    var minute = function () {
      return date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    }
    var second = function () {
      return date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    }
    // 获取 年月日
    if (option === 'YY-MM-DD') return ' ' + year + '-' + fmonth + '-' + fday
    // 获取年月
    if (option === 'YY-MM') return ' ' + year + '-' + month
    //  获取月日
    if (option === 'MM-DD') return month + '月' + day + '日'
    if (option === 'MM-DD-down') return month + '月' + fday + '日' + hour() + ':' + minute() + ':' + second() + '结束'
    if (option === 'mm-dd') return month + '-' + day
    if (option === 'mm-dd hh-mm-ss') return month + '-' + day + ' ' + hour() + ':' + minute() + ':' + second()
    // 获取年
    if (option === 'YY') return ' ' + year
    // 获取月
    if (option === 'MM') return ' ' + month
    // 获取日
    if (option === 'DD') return ' ' + day
    // 获取昨天
    if (option === 'yesterday') return ' ' + day - 1
    // 获取时分秒
    if (option === 'hh-mm-ss') return ' ' + hour() + ':' + minute() + ':' + second()
    // 获取时分
    if (option === 'hh-mm') return ' ' + hour() + ':' + minute()
    // 获取分秒
    if (option === 'mm-ss') return minute() + ':' + second()
    // 获取分
    if (option === 'mm') return minute()
    // 获取秒
    if (option === 'ss') return second()
    // 默认时分秒年月日
    return year + '-' + month + '-' + day + ' ' + hour() + ':' + minute() + ':' + second()
  },

  // 保留小数位
  $toFixed: function (val, acc) {
    let num = parseFloat(val)
    if (isNaN(num)) {
      num = 0
    }
    let accuracy = parseInt(acc)
    if (isNaN(accuracy) || accuracy < 0 || accuracy > 10) {
      accuracy = 2
    }
    return num.toFixed(accuracy)
  },
  // 乘法
  $JSMul: function JSMul (a, b) {
    if (!a || !b) {
      return 0
    }
    let c = 0
    const d = a.toString()
    const e = b.toString()
    try {
      if (d.split('.')[1]) {
        c += d.split('.')[1].length
      }
    } catch (f) {
      console.log(f)
    }
    try {
      if (e.split('.')[1]) {
        c += e.split('.')[1].length
      }
    } catch (f) {
      console.log(f)
    }
    const result =
        (Number(d.replace('.', '')) * Number(e.replace('.', ''))) / Math.pow(10, c)
    return result
  },

  // 除法
  $JSDiv: (a, b) => {
    if (!a || !b) {
      return 0
    }
    let e = 0
    let f = 0
    try {
      if (a.toString().split('.')[1]) {
        e = a.toString().split('.')[1].length
      }
    } catch (g) {
      console.log(g)
    }
    try {
      if (b.toString().split('.')[1]) {
        f = b.toString().split('.')[1].length
      }
    } catch (g) {
      console.log(g)
    }
    const result = JSMul(
      Number(a.toString().replace('.', '')) /
        Number(b.toString().replace('.', '')),
      Math.pow(10, f - e)
    )
    return result
  },

  // 加法
  $JSAdd: (a, b) => {
    if (!a || !b) {
      return a + b
    }
    let c, d
    try {
      c = a.toString().split('.')[1].length
    } catch (f) {
      c = 0
    }
    try {
      d = b.toString().split('.')[1].length
    } catch (f) {
      d = 0
    }
    const h = Math.pow(10, Math.max(c, d))
    return (JSMul(a, h) + JSMul(b, h)) / h
  },

  // 减法
  $JSSub: (a, b) => {
    if (!a || !b) {
      return a - b
    }
    let c, d
    try {
      c = a.toString().split('.')[1].length
    } catch (f) {
      c = 0
    }
    try {
      d = b.toString().split('.')[1].length
    } catch (f) {
      d = 0
    }
    const h = Math.pow(10, Math.max(c, d))
    return (JSMul(a, h) - JSMul(b, h)) / h
  }

}

export default (Vue) => {
  Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
  })
}

二、JSOperation.js文件

// 加法
export function JSAdd (a, b) {
  if (!a || !b) {
    return a + b
  }
  let c, d
  try {
    c = a.toString().split('.')[1].length
  } catch (f) {
    c = 0
  }
  try {
    d = b.toString().split('.')[1].length
  } catch (f) {
    d = 0
  }
  const h = Math.pow(10, Math.max(c, d))
  return (JSMul(a, h) + JSMul(b, h)) / h
}

// 减法
export function JSSub (a, b) {
  if (!a || !b) {
    return a - b
  }
  let c, d
  try {
    c = a.toString().split('.')[1].length
  } catch (f) {
    c = 0
  }
  try {
    d = b.toString().split('.')[1].length
  } catch (f) {
    d = 0
  }
  const h = Math.pow(10, Math.max(c, d))
  return (JSMul(a, h) - JSMul(b, h)) / h
}

// 乘法
export function JSMul (a, b) {
  if (!a || !b) {
    return 0
  }
  let c = 0
  const d = a.toString()
  const e = b.toString()
  try {
    if (d.split('.')[1]) {
      c += d.split('.')[1].length
    }
  } catch (f) {
    console.log(f)
  }
  try {
    if (e.split('.')[1]) {
      c += e.split('.')[1].length
    }
  } catch (f) {
    console.log(f)
  }
  const result =
      (Number(d.replace('.', '')) * Number(e.replace('.', ''))) / Math.pow(10, c)
  return result
}

// 除法
export function JSDiv (a, b) {
  if (!a || !b) {
    return 0
  }
  let e = 0
  let f = 0
  try {
    if (a.toString().split('.')[1]) {
      e = a.toString().split('.')[1].length
    }
  } catch (g) {
    console.log(g)
  }
  try {
    if (b.toString().split('.')[1]) {
      f = b.toString().split('.')[1].length
    }
  } catch (g) {
    console.log(g)
  }
  const result = JSMul(
    Number(a.toString().replace('.', '')) /
        Number(b.toString().replace('.', '')),
    Math.pow(10, f - e)
  )
  return result
}

三、在mian.js或者inde.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import filters from './utils/filters.js'
filters(Vue)

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

四、在页面中使用

<el-table
	stripe
    border
    :data="tableData"
>
	<el-table-column
 		align="center"
		label="配送时间"
 	>
		<template slot-scope="scope">
			{{ scope.row.deliverDate | $timeConvers }}
			<!-- {{ scope.row.deliverDate | $timeConvers(YY-MM-DD) }} -->
		</template>
 	</el-table-column>
 	<el-table-column
		align="center"
		label="价格"
 	 >
		<template slot-scope="scope">
			{{ scope.row.price | $JSDiv(100) }}
		</template>
	</el-table-column>
</el-table>