vue使用过滤器及方法

方法：1.格式化图片。2.格式化时间。。后续还会再增加

一：创建

在跟目录创建 filters 的文件夹

在 filters 文件夹中新建 index.js文件

封装方法：

//引入其他路径
import { HOST } from "@/config/apiUrl";


export default {
    //格式化图片，给图片加上本机ip
	imgUrl: v => HOST + v	

    // 格式化时间
	dateDiff: function(timestamp) {
		// 补全为13位
		var arrTimestamp = (timestamp + '').split('');
		for (var start = 0; start < 13; start++) {
			if (!arrTimestamp[start]) {
				arrTimestamp[start] = '0';
			}
		}
		timestamp = arrTimestamp.join('') * 1;

		var minute = 1000 * 60;
		var hour = minute * 60;
		var day = hour * 24;
		var halfamonth = day * 15;
		var month = day * 30;
		var now = new Date().getTime();
		var diffValue = now - timestamp;

		// 如果本地时间反而小于变量时间
		if (diffValue < 0) {
			return '不久前';
		}

		// 计算差异时间的量级
		var monthC = diffValue / month;
		var weekC = diffValue / (7 * day);
		var dayC = diffValue / day;
		var hourC = diffValue / hour;
		var minC = diffValue / minute;

		// 数值补0方法
		var zero = function(value) {
			if (value < 10) {
				return '0' + value;
			}
			return value;
		};

		// 使用
		if (monthC > 12) {
			// 超过1年，直接显示年月日
			return (function() {
				var date = new Date(timestamp);
				return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) +
					'日';
			})();
		} else if (monthC >= 1) {
			return parseInt(monthC) + "月前";
		} else if (weekC >= 1) {
			return parseInt(weekC) + "周前";
		} else if (dayC >= 1) {
			return parseInt(dayC) + "天前";
		} else if (hourC >= 1) {
			return parseInt(hourC) + "小时前";
		} else if (minC >= 1) {
			return parseInt(minC) + "分钟前";
		}
		return '刚刚';
	}
}

二：挂载

找到main.js

// 引入过滤器
import filters from "./filters/index.js";
//挂载过滤器
Object.keys(filters).map(key => {
	Vue.filter(key, filters[key]);
})

三：使用

在页面组件中

<view class="" style="color: #a6a4a7;">
		{{item.updateTime | dateDiff}}
</view>

完成