vue常用フィルタ

15025 ワード

次のフィルタにfilterが1つ存在する.js中全局出力(以下のフィルタはオリジナルではなく、オリジナルのお姉さんに感謝)
import Vue from 'vue'
//     
Vue.filter('fourSpace',function(val){
  if(val){
    return val.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
  }
});
//    
Vue.filter('noGap',function (value) {
  var str = trim(value);
  return str
});
//      
Vue.filter('dateformat', function (value, fmt) {
  var fmt = 'yyyy-MM-dd hh:mm:ss';//         
  function format(value, fmt) {
    var date = new Date(value);
    var o = {
      "M+": date.getMonth() + 1, //  
      "d+": date.getDate(), // 
      "h+": date.getHours(), //  
      "m+": date.getMinutes(), // 
      "s+": date.getSeconds(), // 
      "w+": date.getDay(), //  
      "q+": Math.floor((date.getMonth() + 3) / 3), //  
      "S": date.getMilliseconds() //  
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o) {
      if(k === 'w+') {
        if(o[k] === 0) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 1) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 2) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 3) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 4) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 5) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 6) {
          fmt = fmt.replace('w', '  ');
        }
      }else 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;
  }
  if(value) {
    value = format(value, fmt);
  }
  return value;
});
//      ,      ,        
Vue.filter('applyTime', function (value, fmt) {
  var fmt = 'yyyyMMddhhmmss';
  function format(value, fmt) {
    var date = new Date(value);
    var o = {
      "M+": date.getMonth() + 1, //  
      "d+": date.getDate(), // 
      "h+": date.getHours(), //  
      "m+": date.getMinutes(), // 
      "s+": date.getSeconds(), // 
      "w+": date.getDay(), //  
      "q+": Math.floor((date.getMonth() + 3) / 3), //  
      "S": date.getMilliseconds() //  
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o) {
      if(k === 'w+') {
        if(o[k] === 0) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 1) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 2) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 3) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 4) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 5) {
          fmt = fmt.replace('w', '  ');
        }else if(o[k] === 6) {
          fmt = fmt.replace('w', '  ');
        }
      }else 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;
  }
  if(value) {
    value = format(value, fmt);
  }
  return value;
});
//       ,       
Vue.filter('money', function(val) {
  val = val.toString().replace(/\$|\,/g,'');
  if(isNaN(val)) {
    val = "0";
  }
  let sign = (val == (val = Math.abs(val)));
  val = Math.floor(val*100+0.50000000001);
  let cents = val%100;
  val = Math.floor(val/100).toString();
  if(cents<10) {
    cents = "0" + cents
  }
  for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
    val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
  }

  return (((sign)?'':'-') + val + '.' + cents);
})
//      ,188****7983
Vue.filter('telFormat',function(val){
  if(val){
    return val.replace(/^(.{3})(?:\d+)(.{4})$/,"$1****$2")
  }
});

Vue.filter('idcardFormat',function(val){
  if(val){
    return val.replace(/^(.{6})(?:\d+)(.{4})$/,"$1*******$2")
  }
});

var fourSpace = Vue.filter('fourSpace');
var noGap = Vue.filter('noGap');
var dateformat = Vue.filter('dateformat');
var money = Vue.filter('money');
var telFormat = Vue.filter('telFormat');
var idcardFormat = Vue.filter('idcardFormat');
var applyTime = Vue.filter("applyTime");

export default {
  fourSpace,//          ---   :1234 3423 2432 2342
  noGap,//    
  dateformat,//      ---   : yyyy/MM/dd hh:mm:ss
  money,//     :              ---   : 345.12
  telFormat,//                ---   :188****7983
  idcardFormat,//                       ---  :340888*******5656
}