vue2之动态class与动态class组件的封装

vue2之动态class与动态class组件的封装

动态class

方式1：:class="isRed ? ‘red’ : ‘’

//CSS
    .red {
      color: red;
    }
//HTML
  <span :class="isRed ? 'red' : '' ">对象呀</span>
//JS
 isRed: true,

方式2 :class=“[‘red’,isShow?‘bg’:‘’]”

    <button @click="isShow=true">点击 显示黄色背景</button>
    <h1 :class="['red',isShow?'bg':'']">我是一个大标签</h1>

      isShow: false

组件之 :class=“[iLabel === ‘成功’ ? ‘success’ : iLabel === ‘失败’ ? ‘fail’: iLabel === ‘备份中’ ? ‘dumping’ : iLabel === ‘失效’ ? ‘lost’ : ‘-’]” 封装组件

base.vue组件

<template>
    <div />
</template>

<script>
export default {
    name: 'BaseFormatter',
    props: {
        row: {
            type: Object,
            default: () => ({})
        },
        column: {
            type: Object,
            default: null
        },
        index: {
            type: Number,
            default: 0
        },
        col: {
            type: Object,
            default: () => ({})
        },
        cellValue: {
            type: [String, Boolean, Number, Object, Array],
            default: null
        }
    },
    data() {
        return {};
    }
};
</script>

BackUpStatus组件

<template>
    <div class="backUp-status">
        <!-- :class="[iLabel === '成功' ? 'success' : 'fail']" -->
        <div
            class="label"
            :class="[iLabel === '成功' ? 'success' : iLabel === '失败' ? 'fail': iLabel === '备份中' ? 'dumping' : iLabel === '失效' ? 'lost' : '-']"
        >
            {{ iLabel }}
        </div>
    </div>
</template>

<script>
import BaseFormatter from './base.vue';
export default {
    name: 'BackUpStatus',
    components: {},
    extends: BaseFormatter,
    props: {
        status: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
        };
    },
    computed: {
        iLabel() {
            // console.log('cellValue', this.cellValue);
            return this.status[this.cellValue];
        }
    },
    methods: {
    }
};

</script>
<style  lang="scss" scoped>
.backUp-status {
	.success {
		color: #5AD8A6;
	}
	.fail {
		color: #D9001B;
	}
	.dumping {
		color: #F9C583;
	}
	.lost {
		color: gray;
	}
}
</style>

使用组件

内嵌表格的
                       formatter: BackUpStatus,
                        status: { success: '成功', fail: '失败'}
  直接使用
  <BackUpStatus :status='status' :cellValue='cellValue'></BackUpStatus>

效果