vue后台返回不同的文字渲染不同的图片及文字颜色

最新推荐文章于 2024-07-04 23:38:38 发布

youlinaixu

最新推荐文章于 2024-07-04 23:38:38 发布

阅读量3.7k

点赞数

文章标签： vue src

本文链接：https://blog.csdn.net/youlinaixu/article/details/82682577

版权

本文介绍如何在Vue中根据后台返回的状态，利用JS文件封装的方法，实现不同状态显示不同图片和文字颜色的功能。

摘要由CSDN通过智能技术生成

我是这样写的，因为我好多页面都用到了，所以封装到js文件中了。这里是根据不同的状态显示不同的图片及文字颜色。
status.js文件：

	import Vue from 'vue';
	import delete1 from '../img/delete1.png';
	import delete2 from '../img/delete2.png';
	import invalid1 from '../img/invalid.png';
	import invalid2 from '../img/invalid1.png';
	import effect1 from '../img/effect.png';
	import effect2 from '../img/effect1.png';
    let color =  (col) => {
		if(col == '待发布') {
			return 'rgb(178, 178, 178)';
		}
		if(col == '失效-待审批') {
			return 'rgb(227, 158, 0)';
		}
		if(col == '生效-待审批') {
			return 'rgb(227, 158, 0)';
		}
		if(col == '已生效') {
			return '#289c01';
		}
		if(col == '失效-审批失败') {
			return '#df3d3e';
		}
		if(col == '变更-待审批') {
			return 'rgb(227, 158, 0)';
		}
	}
	let srcDelete = (src) =&