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) {   
            // 1
            if(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>`
            }
            // 2
            if(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>`
            }
            // 3
            if(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枚举值进行比较匹配进行对应的样式展示