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/689453.shtml

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

相关文章

数据结构1.0(基础)

近java的介绍&#xff0c; 文章目录 第一章、数据结构1、数据结构 &#xff1f;2、常用的数据结构数据结构&#xff1f; 逻辑结构and物理结构 第二章、数据结构基本介绍2.1、数组&#xff08;Array&#xff09;2.2、堆栈&#xff08;Stack&#xff09;2.3、队列&#xff08;Que…

GET 和 POST 的区别?

get 参数通过 url 传递&#xff0c;post 放在 request body 中。 get 请求在 url 中传递的参数是有长度限制的&#xff0c;而 post 没有。 get 比 post 更不安全&#xff0c;因为参数直接暴露在 url 中&#xff0c;所以不能用来传递敏感信息。 get 请求只能进行 url 编码&am…

宝塔安装MySQL、设置MySQL密码、设置navicat连接

1、登录宝塔面板进行安装 2、设置MySQL连接密码 3、安装好了设置navicat连接 登录MySQL [roothecs-394544 ~]# mysql -uroot -p Enter password: 切换到MySQL数据 mysql> use mysql Database changed mysql> 查询用户信息 mysql> select host,user from user; ---…

数据脱敏(四)脱敏算法-替换算法

脱敏算法篇使用阿里云数据脱敏算法为模板,使用算子平台快速搭建流程来展示数据 "替换脱敏"是一种数据处理技术&#xff0c;主要用于保护个人隐私和数据安全。它通过将敏感信息&#xff08;如姓名、身份证号、电话号码等&#xff09;替换为无意义或随机的字符&#xf…

蓝桥杯-整数删除

给定一个长度为 N 的整数数列&#xff1a;A1, A2, ... , AN。你要重复以下操作 K 次&#xff1a; 每次选择数列中最小的整数&#xff08;如果最小值不止一个&#xff0c;选择最靠前的&#xff09;&#xff0c;将其删除。 并把与它相邻的整数加上被删除的数值。 输出 K 次操作后…

完整的 vue-router 导航解析流程

在Vue.js中&#xff0c;vue-router是一个官方提供的路由管理器&#xff0c;它能够帮助我们实现页面之间的无缝切换和导航。 本文将深入探讨vue-router的导航解析流程&#xff0c;并通过示例代码演示如何使用vue-router实现完整的导航过程。 首先&#xff0c;让我们来了解一下…

Linux环境安装Maven(详细图文)

目录 摘要 一、准备工作 1.检查当前环境是否安装maven 2.下载maven ​3.上传maven压缩包 4.解压maven包 5.移动到/usr/local目录下方便管理 6.配置maven环境变量 7.刷新配置文件 8.配置maven镜像仓库 9.验证是否成功 摘要 笔者Linux环境为&#xff1a;Ubuntu 22.04 …

OpenAI 官方论坛

OpenAI 论坛是一项新举措,汇集了领域专家和学生,就人工智能的现在和未来进行讨论和合作。该论坛举办的活动包括重点技术讲座的面对面聚会、OpenAI 的晚宴、教育网络研讨会和专家圆桌对话,以及为成员(包括 OpenAI 研究人员)提供大量交流和交流想法的机会。论坛节目将由社区…

解决Webstorm2023使用账号连接GitLab的问题personal access token instead of a password

问题 升级Webstorm之后&#xff0c;发现gitlab仓库拉取代码报错 报错信息 remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password. See https…

【论文精读】BERT

摘要 以往的预训练语言表示应用于下游任务时的策略有基于特征和微调两种。其中基于特征的方法如ELMo使用基于上下文的预训练词嵌入拼接特定于任务的架构&#xff1b;基于微调的方法如GPT使用未标记的文本进行预训练&#xff0c;并针对有监督的下游任务进行微调。 但上述两种策略…

kettle中JavaScript使用例子

1.将输入日期减一后&#xff0c;得到对应格式的输出 输入为20240216则Alert输出20240215 日期减一。 对应函数参考&#xff1a; https://blog.csdn.net/doasmaster/article/details/112978529

Windows11(非WSL)安装Installing llama-cpp-python with GPU Support

直接安装&#xff0c;只支持CPU。想支持GPU&#xff0c;麻烦一些。 1. 安装CUDA Toolkit (NVIDIA CUDA Toolkit (available at https://developer.nvidia.com/cuda-downloads) 2. 安装如下物件&#xff1a; gitpythoncmakeVisual Studio Community (make sure you install t…

day03-股票数据报表与导出

day03-股票数据表报与导出 目标 理解涨幅榜业务需求;理解涨停跌停概念&#xff0c;并涨停跌停基本实现;理解涨停跌停SQL分析流程&#xff0c;并根据接口文档自定义实现;理解echarts基本使用;掌握easyExcel基本使用,并实现涨幅榜数据导出功能; 第一章 股票涨幅统计 1、涨幅榜…

【spring】@Transactional 注解失效的原因及解决办法

文章目录 前言一、Transactional 属性介绍1.事务的传播行为&#xff1a;propagation2.事务的隔离级别&#xff1a;isolation3.事务的超时时间&#xff1a;timeout4.事务的回滚类型&#xff1a;rollbackFor 二、Transactional 失效场景1.同一个类中方法调用&#xff0c;注解失效…

Visual Studio+C#实现信道与信息率失真函数

1. 要求 设计一款信道与信息率失真函数计算系统&#xff0c;要求如下&#xff1a; 系统能够通过输入的转移概率矩阵计算对称以及非对称离散无记忆信道的信道容量系统能够通过输入的概率分布以及失真矩阵来计算与信息率失真函数有关的相关参数&#xff0c;例如Dmin&#xff0c…

分布式学习笔记

1. CAP理论 Consistency&#xff08;一致性&#xff09;&#xff1a;用户访问分布式系统中的任意节点&#xff0c;得到的数据必须一致。 Availability&#xff08;可用性&#xff09;&#xff1a;用户访问集群中的任意健康节点&#xff0c;必须得到相应&#xff0c;而不是超时…

vue3-渲染机制

渲染机制 Vue 是如何将一份模板转换为真实的 DOM 节点的&#xff0c;又是如何高效地更新这些节点的呢&#xff1f;我们接下来就将尝试通过深入研究 Vue 的内部渲染机制来解释这些问题。 虚拟 DOM 你可能已经听说过“虚拟 DOM”的概念了&#xff0c;Vue 的渲染系统正是基于这…

基于Java SSM框架实现精准扶贫管理系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现精准扶贫管理系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了用户的需…

一文了解Web3.0真实社交先驱ERA

Web2时代&#xff0c;少数科技巨头垄断了全球近60亿人口的网络社交数据&#xff0c;并用之为自己牟利&#xff0c;用户无法掌控个人数据&#xff0c;打破该局面逐渐成为共识&#xff0c;于是&#xff0c;不少人看到了Web3社交赛道蕴含的巨大机遇&#xff0c;标榜着去中心化和抗…

npm install 相关过程及分析

1、install 完整流程 1.1、根据 .npmrc 进行安装前环境配置 注意&#xff1a;镜像源就是在这个文件中配置的 优先级&#xff1a; 每个项目的配置文件&#xff08;/path/to/my/project/.npmrc&#xff09;每个工作区的配置文件&#xff08;包含 pnpm-workspace.yaml 文件的目…