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 27.778vh
    height: {
      type: String,
      default: "fill",
    },
    // 默认选中第几个
    index: {
      type: Number,
      default: 0,
    },
    /**
             * {
                    text: "1#逆变室",
                    color: "blue"
                }
             */
    list: {
      type: Array,
      default: () => [
        {
          text: "1#逆变室",
          color: "blue",
        },
        {
          text: "1#逆变室",
          color: "blue",
        },
        {
          text: "1#逆变室",
          color: "red",
        },
        {
          text: "1#逆变室",
          color: "green",
        },
        {
          text: "1#逆变室",
          color: "purple",
        },
      ],
    },
  },
  // 自定义事件
  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(@darkgray, 50%);
    padding: 1.481vh 1.852vh;
  }

  .com-list-body {
    background-color: fade(@darkgray, 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: 0.37vh 0;
      border-bottom: 0.093vh solid @darkgray;
      cursor: pointer;

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

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

      &::after {
        content: "";
        position: absolute;
        width: 0.741vh;
        height: 0.741vh;
        left: 1.111vh;
        top: calc(50% - 0.37vh);
      }

      &.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: @darkgray;
        }
      }

      &.yellow {
        &::after {
          background-color: @yellow;
        }
      }
    }
  }
}
</style>