hb_sis_zhfx/src/components/coms/list/list.vue

<template>
    <div class="com-list-box" :class="{'fill' : height == 'fill', 'auto' : height == 'auto'}">
        <div class="com-list-title" v-if="title != ''">{{title}}</div>
        <div class="com-list-body">
            <div class="con-list-item" v-for="(data, index) of list" :key="index" @click="select(index)"
                :class="data.color + ' ' + (activeIndex == index ? 'active' : '')">{{data.text}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        // 名称
        name: "List",
        // 使用组件
        components: {},
        // 传入参数
        props: {
            // 标题 ""不显示
            title: {
                type: String,
                default: ""
            },
            // 列表面板高度 fill auto 300px
            height: {
                type: String,
                default: "fill"
            },
            // 默认选中第几个
            index: {
                type: Number,
                default: 0
            },
            /**
             * {
                    text: "1#逆变室",
                    color: "blue"
                }
             */
            list: Array
        },
        // 自定义事件
        emits: {
            // 选中事件
            select: null
        },
        // 数据
        data() {
            return {
                activeIndex: 0
            }
        },
        // 函数
        methods: {
            select: function (index) {
                this.activeIndex = index;
                this.$emit('select', this.list[index]);
            }
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
            this.activeIndex = this.index;
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
            if (this.height != 'fill' && this.height != 'auto') {
                this.$el.style.height = this.height;
            }
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less">
    .com-list-box {
        display: flex;
        flex-direction: column;

        &.auto {
            height: auto;
        }

        &.fill {
            height: 100%;
        }

        .com-list-title {
            font-size: @fontsize-l;
            color: @write;
            background-color: fade(@gray, 50%);
            padding: 16px 20px;
        }

        .com-list-body {
            background-color: fade(@gray, 20%);
            flex-grow: 1;
            overflow: auto;
            display: flex;
            flex-direction: column;

            .con-list-item {
                color: @gray;
                position: relative;
                font-size: @fontsize;
                text-align: center;
                padding: 4px 0;
                border-bottom: 1px solid @gray;
                cursor: pointer;

                &:hover {
                    background-color: fade(@gray, 30%);
                }

                &.active {
                    color: @write;
                    background-color: fade(@blue, 60%);
                }

                &::after {
                    content: '';
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    left: 12px;
                    top: calc(50% - 4px);
                }

                &.write {
                    &::after {
                        background-color: @write;
                    }
                }

                &.green {
                    &::after {
                        background-color: @green;
                    }
                }

                &.blue {
                    &::after {
                        background-color: @blue;
                    }
                }

                &.purple {
                    &::after {
                        background-color: @purple;
                    }
                }

                &.red {
                    &::after {
                        background-color: @red;
                    }
                }

                &.orange {
                    &::after {
                        background-color: @orange;
                    }
                }

                &.gray {
                    &::after {
                        background-color: @gray;
                    }
                }

                &.yellow {
                    &::after {
                        background-color: @yellow;
                    }
                }

            }
        }
    }
</style>