vue 过滤器的使用方法 filter

filter.js内封装的工具类

/* eslint-disable */
import moment from 'moment';
import Vue from 'vue';
// eslint-disable-next-line
Date.prototype.Format = function(fmt) {
  //author: meizz
  var o = {
    'M+': this.getMonth() + 1, //月份
    'd+': this.getDate(), //日
    'h+': this.getHours(), //小时
    'm+': this.getMinutes(), //分
    's+': this.getSeconds(), //秒
    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds() //毫秒
  };
  // eslint-disable-next-line
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + '').substr(4 - RegExp.$1.length)
    );
  // eslint-disable-next-line
  for (var k in o)
    // eslint-disable-next-line
    if (new RegExp('(' + k + ')').test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
  return fmt;
};

const format = (time, f) => {
  return time ? moment(time).format(f) : '';
};

const toLabel1 = (id, arr) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].id == id) {
      return arr[i].name;
    }
  }
  return '';
};

const toLabels = (arr1, arr2) => {
  let text = [];
  if (!arr1) return [];

  for (let i of arr1) {
    for (let item of arr2) {
      if (i == item.id) {
        text.push(item.name);
        break;
      }
    }
  }

  return text.join();
};

const toLabel = (value, arr) => {
  if (!value) {
    return '';
  }

  if (arr.constructor !== Array) {
    return '';
  }
  // value-label
  if (value.constructor === Array) {
    if (!value.length) {
      return '';
    }

    let labels = '';
    for (let item of arr) {
      for (let val of value) {
        if (item.value == val) {
          labels += item.label + ' ';
          break;
        }
      }
    }
    return labels;
  } else {
    for (let item of arr) {
      if (item.value == value) {
        return item.label;
      }
    }

    return '';
  }
};
const insteadOfImg = url => {
  const imgurl = require('../assets/logo.png');
  if (!url) return imgurl;
  const postfix = ['jpg', 'png'];
  for (let i of postfix) {
    if (url.indexOf(i) > -1) return url;
  }
  return imgurl;
};

const toAbbrText = exp => {
  const abbrs = ['助', '初', '中', '高', '专'];
  if (!exp) return abbrs[0];
  if (exp <= 1) {
    return abbrs[0];
  } else if (exp > 1 && exp <= 1.5) {
    return abbrs[1];
  } else if (exp > 1.5 && exp <= 2) {
    return abbrs[2];
  } else if (exp > 2 && exp <= 3) {
    return abbrs[3];
  } else {
    return abbrs[4];
  }
};
const replaceName = name => {
  if (!name) return '';
  return name.substr(0, 1) + new Array(name.length).join('*');
};

export const getName = (obj = {}) => {
  return obj.nickname || obj.username || obj.realname || obj.phone;
};
export const getNameDesigner = (obj = {}) => {
  return (
    obj.designer_nickname ||
    obj.designer_username ||
    obj.designer_realname ||
    obj.designer_phone
  );
};
const getGender = (obj = {}) => {
  if (obj.gender == 0) {
    return '先生';
  } else {
    return '女士';
  }
};

const SKILLFULL_LIST_TEXT = (skilful, skillfulList = [], delimiter = ',') => {
  if (!skilful) {
    return;
  }
  var name = [];
  for (let v of skilful.split(',')) {
    for (let k = 0, len = skillfulList.length; k < len; k++) {
      if (skillfulList[k].id == v) {
        name.push(skillfulList[k].name);
      }
    }
  }
  return name.join(delimiter);
};

const randomPath = (name, size = '') => {
  const n = Math.floor(Math.random() * 5) + 1;
  return `http://${n}.img.dianjiangla.com/assets/${name}${size}`;
};

/*
 * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时：分钟：秒
 * 其中，年月日为全格式，例如 ： 2010-10-12 01:00:00
 * 返回精度为：秒，分，小时，天
 */
const getDateDiff = (startTime, endTime, diffType) => {
  //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
  startTime = startTime.replace(/-/g, '/');
  endTime = endTime.replace(/-/g, '/');
  //将计算间隔类性字符转换为小写
  diffType = diffType.toLowerCase();
  var sTime = new Date(startTime); //开始时间
  var eTime = new Date(endTime); //结束时间

  var _total = eTime.getTime() - sTime.getTime(); //total
  var _second = parseInt(1000); //second
  var _minute = parseInt(1000 * 60); //minute
  var _hour = parseInt(1000 * 3600); //hour
  var _day = parseInt(1000 * 3600 * 24); //day
  var _month = parseInt(1000 * 3600 * 24 * 30); //month

  var day = parseInt(_total / _day) || 0; //天
  var hour = parseInt((_total - day * _day) / _hour) || 0; //时
  var minute = parseInt((_total - day * _day - hour * _hour) / _minute) || 0; //分
  var second =
    parseInt(
      (_total - day * _day - hour * _hour - minute * _minute) / _second
    ) || 0; //秒

  //作为除数的数字
  var divNum = 1;
  switch (diffType) {
    case 'dhm':
      let value = '还有';
      if (eTime.getTime() - sTime.getTime() > 0) {
      } else {
        value = '已超时';
      }
      return (
        value +
        Math.abs(day) +
        ' 天 ' +
        Math.abs(hour) +
        ' 时 ' +
        Math.abs(minute) +
        ' 分 '
      );
    //   break;
    case 'second':
      divNum = _second;
      break;
    case 'minute':
      divNum = _minute;
      break;
    case 'hour':
      divNum = _hour;
      break;
    case 'day':
      divNum = _day;
      break;
    case 'month':
      divNum = _month;
      break;
    default:
      break;
  }

  return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(divNum)) || 0;
};
const getRank = i => {
  // 0 1 2 3 4
  let level = ['助理', '初级', '中级', '高级', '专家'];
  return level[i];
};
const toName = (ids, arr) => {
  let a = [];
  ids = (String(ids) && String(ids).split(',')) || [];
  for (let i = 0, length = arr.length; i < length; i++) {
    for (let j = 0, l = ids.length; j < l; j++) {
      if (ids[j] == arr[i].id) {
        a.push(arr[i].name);
      }
    }
  }
  return a.join();
};

Vue.filter('format', format);
Vue.filter('toLabel', toLabel);
Vue.filter('toLabels', toLabels);
Vue.filter('toLabel1', toLabel1);
Vue.filter('insteadOfImg', insteadOfImg);
Vue.filter('toAbbrText', toAbbrText);
Vue.filter('SKILLFULL_LIST_TEXT', SKILLFULL_LIST_TEXT);
Vue.filter('replaceName', replaceName);
Vue.filter('getName', getName);
Vue.filter('randomPath', randomPath);
Vue.filter('getDateDiff', getDateDiff);
Vue.filter('getRank', getRank);
Vue.filter('toName', toName);

页面操作

<template>
  <div>
      这里是过滤器   {{ 1523870249 | format}}
  </div>
</template>

main.js内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import api from './api'
import store from './store'
import moment from 'moment'
import utils from './utils'
import '@/filter'
import 'iview/dist/styles/iview.css'

Vue.config.productionTip = false

Vue.prototype.get = api.get
Vue.prototype.post = api.post
Vue.prototype.utils = utils
Vue.prototype.moment = moment
Vue.prototype.session = utils.session
Vue.prototype.cookie = utils.cookie
Vue.prototype.storeage = utils.storeage

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})