【Vue】filter 封装

最新推荐文章于 2024-12-09 21:40:13 发布

原创最新推荐文章于 2024-12-09 21:40:13 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个Vue.js项目中使用的自定义过滤器，包括字符串切割（ellipsis）和时间戳转换（transDateSub）。字符串切割过滤器用于当字符串长度超过指定长度时进行省略显示，而时间戳转换过滤器则将时间戳转换为更易读的日期格式。

filter.js

/**
 * Created by ZOE on 20/03/18
 */

/** format template String
 * ellipsis 字符串切割 
 * transDateSub 截取时间戳（10位）
 * 
 * 
 * 
 */
import { parseTime} from '@/utils/index'
const filters = {
	ellipsis: function (str, len){//字符串切割
		if(str.length*2 <= len) {
	    return str
	  }
	  var strlen = 0
	  var s = ""
	  for(var i = 0;i < str.length; i++) {
      s = s + str.charAt(i)
      if (str.charCodeAt(i) > 128) {
        strlen = strlen + 2
        if(strlen >= len){
            return s.substring(0,s.length-1) + "..."
        }
      } else {
        strlen = strlen + 1
        if(strlen >= len){
            return s.substring(0,s.length-2) + "..."
        }
      }
	  }
	  return s
	},
  transDateSub: function (val){
    if(val){
      return parseTime(val).substring(0, 10)
    }else{
      return '--'
    } 
  }
}
export default (Vue) => {//导出所有filters
  Object.keys(filters).forEach(key => {
      Vue.filter(key, filters[key])
  })
}

main.js

import filters from './utils/filter'//引入全局filter
filters(Vue)//注册全局filter

index.vue

<template>
<div>
    <span>{{scope.row.address | ellipsis(32)}}</span>
</div>
</template>
<script>
let ellipsis = Vue.filter('ellipsis')//引入全局filter
</script>