基于vue的状态灯样式_前端指示灯_dexi.Chi 攻城狮的博客-CSDN博客

安宇雨 - 随手采集
2023-10-08 10:52:16
随手采集
0000-未整理-等待研究

项目经理: 目前用户想要根据流程处理时间来在界面直观的显示状态样式

小编: 给他来个状态灯显示？

项目经理: 是不是惯他毛病

小编: 顺手改了吧，让金主给变更钱

效果图如下:
在这里插入图片描述

vue界面代码上主要的一部分及css样式

<el-table-column align="center" prop="" label="指示灯情况" width="200" header-align="center">
    <template slot-scope="scope">
     <!-- el-tooltip鼠标悬停样式 effect="dark" 鼠标提示背景是黑色  content鼠标放上回显文字  placement在顶端回显 -->
        <el-tooltip effect="dark" content="一号灯" placement="top">
            <div style="float: left;margin-left: 15px;" :class="stateColor[statusOne]"></div>
        </el-tooltip>
        <el-tooltip effect="dark" content="二号灯" placement="top">
            <div style="float: left;margin-left: 15px;" :class="stateColor[statusTwo]"></div>
        </el-tooltip>
        <el-tooltip effect="dark" content="三号灯" placement="top">
            <div style="float: left;margin-left: 15px;" :class="stateColor[statusThree]"></div>
        </el-tooltip>
        <el-tooltip effect="dark" content="四号灯" placement="top">
            <div style="float: left;margin-left: 15px;" :class="stateColor[statusFour]"></div>
        </el-tooltip>
        <el-tooltip effect="dark" content="五号灯" placement="top">
            <div style="float: left;margin-left: 15px;" :class="stateColor[statusFive]"></div>
        </el-tooltip>
    </template>
</el-table-column>
<style>
.green{
   width:20px;
    height:20px;
    background:#8fc31f;
    border:1px solid #8fc31f;
    border-radius:50%;
    margin:0 auto; 
}
.red{
    width:20px;
    height:20px;
    background:#be1508;
    border:1px solid #be1508;
    border-radius:50%;
    margin:0 auto; 
}
.gray{
    width:20px;
    height:20px;
    background:#868485;
    border:1px solid #868485;
    border-radius:50%;
    margin:0 auto; 
}  
</style>

js代码部分主要代码

data() {
        return {
            stateColor: [
                "gray",
                "green",
                "red"
            ],
            statusOne: '',
            statusTwo: '',
            statusThree: '',
            statusFour: '',
            statusFive: '',
        }
    },
    
    mounted() {
        this.statusOne = 1
        this.statusTwo = 0
        this.statusThree = 0
        this.statusFour = 2
        this.statusFive = 0
    },

小编认为这种js写法比较好，比较推荐

原网址: 访问
创建于: 2023-10-08 10:52:16
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到