css-根据不同后端返回值返回渲染不同的div样式以及公共组件设定

哟哟耶耶2025-02-07 17:23

1.动态绑定

Vue: 使用计算属性 getClassName 来动态计算样式类名，并通过 :class 绑定到 div 元素上。

html 复制代码

<template>
  <div :class="getClassName">
    这是一个根据后端值动态设置样式的 div 元素。
  </div>
</template>

<script>
export default {
  props: {
    backendValue: {
      type: String,
      required: true
    }
  },
  computed: {
    getClassName() {
      switch (this.backendValue) {
        case 'success':
          return 'success-class';
        case 'warning':
          return 'warning-class';
        case 'error':
          return 'error-class';
        default:
          return 'default-class';
      }
    }
  }
};
</script>

2.父子组件公共状态

2.1枚举值

javascript 复制代码

var EnumUtil = {}

// 状态值
EnumUtil.State = { 'DELAY': 1, 'WARN': 2, 'NORMAL': 3, };

export default EnumUtil;

2.2公共组件

html 复制代码

<template>
    <div v-html="getStateHtml(State)"></div>
</template>

<script>
    // 枚举值
    import EnumUtil from "@/views/modules/js/EnumUtil";
    export default {
        name: "StateComponent",
        props: ['State'],
        methods: {
            // 状态值
            getStateHtml(state) {
                if (EnumUtil.State.DELAY === state) {
                    return '<div class="StatetBall1"></div>'
                } else if (EnumUtil.State.WARN === state) {
                    return '<div class="StatetBall2"></div>'
                } else if (EnumUtil.State.NORMAL === state) {
                    return '<div class="StatetBall3"></div>'
                } else {
                    return '<div></div>'
                }
            },
        }
    }
</script>

<style >
    .StatetBall1,
    .StatetBall2,
    .StatetBall3 {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin: 0 auto;
    }
    .StatetBall1 {
        background: rgb(149, 18, 189);
    }
    .StatetBall2 {
        background: rgb(182, 160, 132);
    }
    .StatetBall3 {
        background: rgb(44, 47, 196);
    }
</style>

2.3父组件引用

javascript 复制代码

 
<StateComponent :State="dataState"></StateComponent>

import组件引入

components声明

dataState后端返回状态值