js-后端返回参数前端动态切换样式

1.js枚举

// 枚举-js
//对应的icon显示
EnumUtil.Type = { COMMON: 1, BUY: 2, PRODUCE: 3}

2.动态公共样式组件

<!-- 公共组件-显示对应icon -->
<template><div v-html="TaskIcon(statues)" class="pro_set_task"></div>
</template>
<script>import EnumUtil from "../js/EnumUtil.js";export default {name: "TaskIcon",props:{// 状态值变化statues:{type: Number,default: null,},},methods: {// 状态值TaskIcon(state) {   // 1if(EnumUtil.Type.COMMON == state) {return `<svg t="1706682686661" class="icon" viewBox="0 0 1024 1024" p-id="12288" width="18" height="18"><path d="M321.691152 423.253333l47.600484-48.283151-11.822545-11.791515-46.979879 45.893818zM366.219636 469.116121l47.135031-47.290182-10.084849-13.187878-47.07297 47.414303zM323.987394 329.076364l-14.770424-10.736485-45.707637 45.056 12.536243 14.087757zM610.024727 615.734303l-47.16606 46.297212 10.426181 12.536243 47.507394-46.917819z" fill="#03decf" p-id="12289"></path><path d="M916.169697 14.708364H107.799273a93.090909 93.090909 0 0 0-93.090909 93.090909v808.370424a93.090909 93.090909 0 0 0 93.090909 93.090909h808.370424c51.386182 0 93.090909-41.704727 93.090909-93.090909V107.799273a93.090909 93.090909 0 0 0-93.090909-93.090909z m-229.686303 212.960969l114.377697 115.805091-25.941333 26.375758L659.393939 253.207273l27.089455-25.53794zM225.869576 342.078061c10.24-9.433212 20.728242-18.587152 30.595879-28.361697 30.006303-29.72703 59.764364-59.671273 88.839757-88.777697l158.192485 158.192485-120.738909 121.018181c-4.654545-6.081939-9.216-13.436121-15.142788-19.424969a32300.528485 32300.528485 0 0 0-130.358303-130.482425c-3.413333-3.413333-7.571394-6.11297-11.388121-9.122909v-3.040969zM222.952727 799.030303l4.685576-23.210667 15.484121 18.680243-20.169697 4.530424z m143.515152-30.378667c-30.099394 5.864727-59.919515 13.094788-89.863758 19.921455-22.279758 5.026909-41.456485-13.715394-36.491636-35.746909l18.835394-83.781818c5.306182-23.58303 5.275152-23.58303 24.793212-39.594667l115.463757 115.712c-7.602424 10.922667-17.004606 20.417939-32.736969 23.489939z m-66.032485-153.848242L647.819636 267.481212l112.857212 112.981333-347.477333 347.446303-112.764121-113.105454z m384.403394 183.451151l-156.60994-156.547878 116.301576-116.270546 156.423758 156.454788-116.115394 116.363636z" fill="#03decf" p-id="12290"></path><path d="M620.171636 721.423515l46.886788-46.483394-12.443151-12.567273-47.755637 47.228122zM665.755152 768.279273l47.879757-48.06594-11.481212-12.381091-49.493333 46.266182z" fill="#03decf" p-id="12291"></path></svg>`}// 2if(EnumUtil.Type.BUY ==state) {return `<svg t="1706683285105" class="icon" viewBox="0 0 1046 1024" p-id="53949" width="18" height="18"><path d="M11.130435 0m267.130435 0l489.73913 0q267.130435 0 267.130435 267.130435l0 489.73913q0 267.130435-267.130435 267.130435l-489.73913 0q-267.130435 0-267.130435-267.130435l0-489.73913q0-267.130435 267.130435-267.130435Z" fill="#FF9D4D" p-id="53950"></path><path d="M367.304348 611.59513c43.030261 0 77.913043 35.57287 77.913043 79.471305 0 43.920696-34.882783 79.493565-77.913043 79.493565s-77.913043-35.57287-77.913044-79.471304c0-43.920696 34.882783-79.493565 77.913044-79.493566zM524.978087 267.130435c13.334261 0 24.130783 10.796522 24.130783 24.108522v349.228521c0 13.312-10.796522 24.108522-24.130783 24.108522H467.923478c-11.53113-45.701565-52.224-79.471304-100.61913-79.471304-48.39513 0-89.088 33.769739-100.619131 79.471304h-31.098434A24.108522 24.108522 0 0 1 211.478261 640.467478V485.732174l0.155826-2.493217a19.678609 19.678609 0 0 1 16.873739-17.229914l2.448696-0.155826H211.478261v-0.53426h121.121391v51.956869l105.984-77.913043-105.984-77.913044v51.934609H211.478261v-0.512h19.478261l-2.448696-0.155826a19.678609 19.678609 0 0 1-16.873739-17.229913l-0.155826-2.493218v-101.732174c0-13.334261 10.796522-24.130783 24.108522-24.130782h289.391304zM678.956522 611.59513c43.030261 0 77.913043 35.57287 77.913043 79.471305 0 43.920696-34.882783 79.493565-77.913043 79.493565s-77.913043-35.57287-77.913044-79.471304c0-43.920696 34.882783-79.493565 77.913044-79.493566z m26.267826-238.480695l129.558261 152.798608v138.685218h-55.206957c-11.53113-45.723826-52.201739-79.515826-100.61913-79.515826-48.417391 0-89.088 33.792-100.619131 79.515826h-3.272348V373.092174h130.159305z" fill="#FFFFFF" p-id="53951"></path></svg>`}// 3if(EnumUtil.Type.PRODUCE== state) {return `<svg t="1706683233954" class="icon" viewBox="0 0 1024 1024" p-id="50160" width="18" height="18"><path d="M0 0m187.733333 0l648.533334 0q187.733333 0 187.733333 187.733333l0 648.533334q0 187.733333-187.733333 187.733333l-648.533334 0q-187.733333 0-187.733333-187.733333l0-648.533334q0-187.733333 187.733333-187.733333Z" fill="#79ACFF" p-id="50161"></path><path d="M284.603733 699.357867c2.432-1.083733 5.435733-2.56 8.763734-4.266667 26.658133-16.989867 78.626133-12.868267 118.144-7.227733s90.077867 29.661867 137.540266 17.066666 127.837867-77.056 154.692267-94.557866 19.626667-30.813867-7.04-30.813867-49.092267 12.868267-99.524267 34.781867a180.053333 180.053333 0 0 1-136.448 2.048c-30.276267-13.755733-38.784-38.877867-21.504-36.829867 137.821867 33.570133 144.324267-28.834133 128.964267-36.445867s-114.56-27.400533-146.645333-31.368533-45.636267 9.216-80.349867 27.648c-34.542933 18.304-62.378667 10.299733-85.1968 28.868267v-152.354134A160 160 0 0 1 415.906133 256h192.187734A160 160 0 0 1 768 415.906133v192.187734A160 160 0 0 1 608.093867 768h-192.187734a159.837867 159.837867 0 0 1-131.3024-68.642133z m427.7504-294.562134a13.764267 13.764267 0 0 0-8.098133-12.706133l-44.834133-20.036267v-43.153066a14.114133 14.114133 0 0 0-8.064-12.706134l-46.344534-20.736a13.175467 13.175467 0 0 0-10.333866 0l-46.336 20.736a14.045867 14.045867 0 0 0-8.064 12.706134v43.153066l-44.868267 20.061867a13.986133 13.986133 0 0 0-8.064 12.706133v44.885334a14.020267 14.020267 0 0 0 1.954133 7.227733 12.987733 12.987733 0 0 0 5.376 5.060267l46.336 24.123733a12.117333 12.117333 0 0 0 11.810134 0l46.301866-24.123733a3.268267 3.268267 0 0 0 0.733867-0.418134l0.699733 0.418134 46.336 24.123733a11.332267 11.332267 0 0 0 5.888 1.536 11.52 11.52 0 0 0 5.888-1.536l46.301867-24.123733a12.893867 12.893867 0 0 0 5.376-5.060267 13.986133 13.986133 0 0 0 1.988267-7.227733v-44.910934z m-52.906666 65.570134V433.493333l39.68-17.664v33.877334l-39.68 20.701866z m-6.647467-48.955734l-41.762133-18.6368 41.762133-18.679466 41.762133 18.679466z m-46.301867-31.573333v-28.808533l39.68-17.664v28.689066z m-6.6048-40.874667l-45.653333-20.4288 45.602133-20.386133 45.5936 20.386133-45.602133 20.386134z m-46.336 121.403734V433.493333l39.68-17.664v33.877334z m-6.621866-48.964267L505.173333 402.773333l41.762134-18.653866 41.813333 18.653866z" fill="#FFFFFF" p-id="50162"></path></svg>`}}}
}
</script>
<style scoped lang="less">
.pro_set_task{display: flex;height:40px;align-items: center;
}
</style>

3.父组件进行引用

        <ProjectSetScheduleTaskIcon :statues="taskType"></ProjectSetScheduleTaskIcon> 

4.总结

公共组件中props接受父组件后端返回值参数,与js枚举值进行比较匹配进行对应的样式展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/687580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#学习(十三)——多线程与异步

一、什么是线程 程序执行的最小单元 一次页面的渲染、一次点击事件的触发、一次数据库的访问、一次登录操作都可以看作是一个一个的进程 在一个进程中同时启用多个线程并行操作&#xff0c;就叫做多线程 由CPU来自动处理 线程有运行、阻塞、就绪三态 代码示例&#xff1a; cl…

使用Autodl云服务器或其他远程机实现在本地部署知识图谱数据库Neo4j

本篇博客的目的在于提高读者的使用效率 温馨提醒&#xff1a;以下操作均可在无卡开机状态下就可完成 一.安装JDK 和 Neo4j 1.1 ssh至云服务器 打开你的pycharm或者其他IDE工具或者本地终端&#xff0c;ssh连接到autodl的服务器。(这一步很简单如下图) 1.2 安装JDK 由于我…

12 个顶级音频转换器软件(免费)

当涉及不受支持的音乐文件时&#xff0c;音频文件转换器软件总是会派上用场。当您希望缩小大量大型音乐文件的大小以节省设备存储空间时&#xff0c;它也很有帮助。您在寻找传输音频的软件吗&#xff1f;好吧&#xff0c;请仔细选择音频转换器&#xff0c;因为最好的音乐转换器…

C++之内存对齐

目录 内存对齐 一、内存对齐解释 二、为什么要内存对齐&#xff1f; 三、内存对齐的三大规则 3.1、数据成员对齐规则 3.2、结构(或联合)的整体对齐规则 3.3、结构体作为成员 3.4、代码例子 内存对齐 一、内存对齐解释 对齐规则是按照成员的声明顺序&#xff0c;依次安排…

leetcode-top100回溯算法

组合总和 题目链接 39. 组合总和 - 力扣&#xff08;LeetCode&#xff09; 解题代码 class Solution:def combinationSum(self, candidates: List[int], target: int) -> List[List[int]]:def dfs(candidates,begin,size,path,res,target):if target < 0:returnif ta…

【大模型 数据增强】无监督关系抽取任务的新方法

【大模型 数据增强】无监督关系抽取任务的新方法 提出背景解法&#xff1a;多样性正样本对增强&#xff08;AugURE&#xff09;特征1&#xff1a;句内正样本对增强特征2&#xff1a;跨句正样本对提取特征3&#xff1a;使用边界敏感损失函数 医学场景&#xff1a;自动抽取药物-疾…

软件实例分享,家具生产出库管理系统软件教程

软件实例分享&#xff0c;家具生产出库管理系统软件教程 一、前言 以下软件程序教程以 佳易王家具行业生产出库管理系统软件V16.1为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 销售管理——产品状态查询变更&#xff0c;可以根据生产进度变更…

作为项目经理,PMP值得考嘛?最近PMP变数特别大,你还看好PMP嘛?

做项目管理的话&#xff0c;自然是值得考的&#xff0c;现在PMP几乎是项目管理的必考证书了&#xff0c;找工作需要PMP优先&#xff0c;做项目也要求PMP&#xff0c;做项目相关工作的建议去看一个 一、先给大家分析一下PMP 证书的使用场景 1、项目管理岗位招聘的门槛 PMP 是项…

房产证翻译,证件类翻译公司推荐

随着全球化的发展&#xff0c;证件类翻译在我们的生活中越来越常见。其中&#xff0c;房产证翻译是尤为重要的一种。它不仅关乎到个人的财产权益&#xff0c;更在留学、移民、财产公证以及办理贷款等关键场合起到举足轻重的作用。那么&#xff0c;如何做好房产证证件类翻译&…

【stm32】DAC输出三角波锯齿波

【stm32】DAC输出三角波锯齿波及任意波形 导入DAC.ioc&#xff08;见上节DAC学习笔记&#xff09; DAC输出三角波 CubeMX图形化配置 DAC配置 实现0.1ms定时周期 时钟树配置 程序编写 /* USER CODE BEGIN Includes */ #include "lcd.h" /* USER CODE END Inc…

《Go 简易速速上手小册》第3章:数据结构(2024 最新版)

文章目录 3.1 数组与切片&#xff1a;Go 语言的动态队伍3.1.1 基础知识讲解3.1.2 重点案例&#xff1a;动态成绩单功能描述实现代码扩展功能 3.1.3 拓展案例 1&#xff1a;数据分析功能描述实现代码扩展功能 3.1.4 拓展案例 2&#xff1a;日志过滤器功能描述实现代码扩展功能 3…

DBProxy sh bootstrap.sh失败

记录DBProxy安装问题 configure: error: mysql_config is not found, use $ ./configure --with-mysql/path/to/mysql_config 修改configure文件 增加MYSQL_CONFIG/usr/local/mysql&#xff0c;指定mysql安装目录

论文阅读_语音识别_Wisper

英文名称: Robust Speech Recognition via Large-Scale Weak Supervision 中文名称: 通过大规模弱监督实现鲁棒语音识别 链接: https://proceedings.mlr.press/v202/radford23a.html 代码: https://github.com/openai/whisper 作者: Alec Radford, Jong Wook Kim, Tao Xu, Greg…

gifshot-plus配置参数说明

gifshot-plus将视频或者多张图片生成gif图 安装&#xff1a;npm i gifshot-plus 引入&#xff1a;import gifshot from gifshot-plus 使用&#xff1a; gifshot.createGIF(options,(obj) > {if (!obj.error) {console.log("gif image url: ", obj.image);} el…

vue2+高德地图web端开发(二)

前言&#xff1a; 高德地图输入提示与 POI 搜索相关文档&#xff1a;输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com) 输入提示-输入提示-示例中心-JS API 2.0 示例 | 高德地图API (amap.com) 创建输入框&#xff1a; 引入Element组…

2402C++,偷窥C++未来的反射

原文 在此体验. 只需要包含#include <experimental/meta>. #include <experimental/meta> int main() {constexpr auto r ^int;typename[:r:] x 42;// : int x 42;typename[:^char:] c *;// : char c *; }选择成员 这是一个操作成员的小示例: struct S { …

渲染案例 |《甲辰春来,福暖四季》蓝海创意云助力央视新闻频道打造2024龙年除夕视觉盛宴

随着2024年甲辰龙年的脚步渐近&#xff0c;中央广播电视总台新闻频道精心策划的除夕特别节目《甲辰春来&#xff0c;福暖四季》于2月9日上午9点准时与全国观众见面。这一场充满传统韵味与现代气息的视觉盛宴&#xff0c;不仅展现了浓厚的节日氛围&#xff0c;更在技术上实现了突…

Halcon 元组/数组基本操作

Halcon 元组/数组基本操作 ** 元组/数组 tuple *******数组创建与字典******* ** 创建一个数组 A : [1,3,45,6] A[0] : 1 A[1] : 2** 定义一个key value字典类型create_dict (DictHandle) set_dict_tuple (DictHandle, test_tuple, A) set_dict_tuple (DictHandle, test_obj, …

Could not load request class : org.hibernate.dialect.MariaDB102Dialect

最近给项目做了点小改动&#xff1a;升级到了Spring Boot 3.1.5&#xff0c;然后它就出现了这个报错&#xff1a;Could not load request class : org.hibernate.dialect.MariaDB102Dialect。 解决办法&#xff1a;将JPA dialect改成org.hibernate.dialect.MariaDBDialect。

[HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;佬佬会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…