web/src/components/selector/SelectorCard.vue

<template>
  <div
    class="selector-card"
    :class="{
      's-card': cardType === 'card',
      's-line': cardType === 'line',
    }"
    >
    <div class="selector-card-header" :class="{ 's-header': cardType === 'line' }">
      <slot name="header"></slot>
    </div>
    <div class="selector-card-content scrollbar">
      <slot name="default"></slot>
    </div>
    <div class="selector-card-footer">
      <slot name="footer">
        <el-button v-if="cardType === 'card'" type="primary" class="confirm" @click="onConfirm">{{ confirmText }}</el-button>
        <el-button v-if="cardType === 'card'" class="cancel" @click="onCancel">{{ cancelText }}</el-button>
      </slot>
    </div>
  </div>
</template>

<script>
import { Button } from 'element-ui'
export default {
  name: 'selector-card',
  components: {
    [Button.name]: Button
  },
  props: {
    cardType: {
      type: String,
      default: 'card',
      validator (value) {
        return ['card', 'line'].indexOf(value) !== -1
      }
    },
    confirmText: {
      type: String,
      default: '保存'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    onCancel () {
      this.$emit('onCancel')
    },
    onConfirm () {
      this.$emit('onConfirm')
    }
  }
}
</script>

<style lang="scss" scoped>
  .selector-card {
    display: flex;
    color: #1d1d1d;
    background-color: #fff;
    .selector-card-content {
      position: relative;
      display: flex;
      flex: 1;

      &::v-deep {
        .fw-bold {
          font-weight: bold;
        }
        // 子组件按钮公共样式
        .j-button-item {
          display: flex;
          align-items: center;
          margin: 6px 5px;
          padding: 2px 6px;
          line-height: 20px;
          border-radius: 4px;
          font-size: 14px;
          text-align: center;
          background-color: #fff;
          border: 1px solid rgba(0,0,0,.05);
          cursor: pointer;
          &.global { // s-card中的全部按钮使用
            padding: 6px 8px;
            height: 24px;
            line-height: 24px;
            font-weight: 700;
            color: inherit;
            border-color: rgba(0,0,0,.05);
          }
          &.all { // s-line中的全部按钮使用
            font-weight: 700;
            border-color: transparent;
          }
          &.hover:hover {
            color: #2abed1;
          }
          // 选中状态
          &.active { // 默认蓝色边框蓝色字体
            color: #2abed1;
            border-color: #2abed1;
            &.bgc { // 默认蓝色背景白色字体
              color: #fff;
              background-color: $color-text--highlight;
            }
            &.bgc-opacity { // 默认蓝色边框蓝色字体蓝色半透明背景
              background-color: rgba(44,183,202,0.10);
            }
          }
        }

        [class^=el-icon-] {
          transition: transform 0.2s ease;
        }
        .rotate180 {
          transform: rotate(180deg);
        }
      }
    }
  }

  .selector-card.s-card {
    width: 460px;
    height: 582px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 28px rgb(0 0 0 / 16%);
    border-radius: 5px;

    .selector-card-header,
    .selector-card-content,
    .selector-card-footer {
      width: 100%;
    }

    .selector-card-header {
      padding-top: 30px;
      margin: 0 0 40px;
      font-size: 20px;
      line-height: 26px;
      text-align: center;
      background: linear-gradient(180deg,#e0e0e0, #fff);
      border-radius: 5px 5px 0 0;
    }
    .selector-card-content {
      align-items: center;
      overflow: hidden;
    }
    .selector-card-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 20px;
      padding-bottom: 40px;
      ::v-deep {
        .el-button--primary {
          color: #2cb7ca;
          background: none;
          border-color: #2cb7ca;
          &:hover {
            color: #fff;
            background-color: #2cb7ca;
          }
        }
        .el-button--default {
          &:hover,
          &:active {
            color: #2cb7ca;
            border-color: #2cb7ca;
          }
        }
      }
      .confirm,
      .cancel {
        padding: 10px 50px;
        margin: 0 20px;
      }
    }

    &::v-deep {
      .j-button-item {
        color: #606266;
      }

      .search-container {
        margin: 20px auto;
        width: 360px;
        // 输入框公共样式
        .el-input__inner {
          padding-left: 42px;
          background-color: #f7f7f7;
          border-radius: 22px;
        }
        .el-input__prefix {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .el-icon-search {
          margin-left: 6px;
          font-size: 18px;
        }
      }

      // 子组件卡片布局样式
      .selector-content {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 400px;
        height: 100%;
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,.05);
      }

      // 搜索框下的列表
      .select-list {
        position: relative;
        flex: 1;
        overflow-y: scroll;
      }

      // indexBar样式
      .index-anchor {
        margin-top: 10px;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        background-color: #f5f5fb;
        text-align: left;
      }
    }
  }

  .selector-card.s-line {
    padding: 12px 40px;
    .s-header {
      line-height: 36px;
    }
    .selector-card-header {
      margin-right: 10px;
      min-width: 100px;
    }
    .selector-content {
      position: relative;
    }
    ::v-deep{
      .j-button-item {
        border-color: transparent;
      }
      .action-button.show-more {
        display: flex;
        align-items: center;
        position: absolute;
        top: 8px;
        right: 0;
        font-size: 12px;
        line-height: 20px;
        color: #686868;
        cursor: pointer;
        .action-text {
          margin-right: 4px;
        }
      }
    }
  }
</style>