eep_page/src/views/book/courseware/create/components/base/common/SelectSerialNumberStyle.vue

<template>
  <div class="sn-style">
    <el-select ref="selectStyle" v-model="sn_style" class="style-shape" @change="changeSerialNumberStyle">
      <el-option v-for="(item, i) in serialNumberStyleList" :key="i" :value="item.value">
        <span class="sn-box" :style="serialNumberStyle(item.value)">{{ serialNumber }}</span>
      </el-option>
    </el-select>
    <el-color-picker v-model="sn_background_color" class="style-color" @change="changeSerialNumberStyle" />
    <div class="sn-box view-style" :style="serialNumberStyle(sn_style)">{{ serialNumber }}</div>
  </div>
</template>

<script>
import { serialNumberStyleList } from '@/views/book/courseware/data/common';

export default {
  name: 'SelectSerialNumberStyle',
  props: {
    serialNumber: {
      type: [Number, String],
      required: true,
    },
    snStyle: {
      type: String,
      default: '',
    },
    snBackgroundColor: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      serialNumberStyleList,
      sn_style: this.snStyle,
      sn_background_color: this.snBackgroundColor,
    };
  },
  watch: {
    snBackgroundColor: {
      handler(val) {
        this.sn_background_color = val;
      },
      deep: true,
    },
    snStyle: {
      handler(val) {
        this.sn_style = val;
      },
      deep: true,
    },
  },
  methods: {
    // 序号样式
    serialNumberStyle(styleType) {
      let serialNumberStyle = {};
      const _color = `${this.sn_background_color}`;
      switch (styleType) {
        case 'solidBlockStyle':
          serialNumberStyle = {
            borderRadius: '4px',
            backgroundColor: _color,
            color: '#fff',
          };
          break;
        case 'solidCircleStyle':
          serialNumberStyle = {
            borderRadius: '40px',
            backgroundColor: _color,
            color: '#fff',
          };
          break;
        case 'hollowBlockStyle':
          serialNumberStyle = {
            border: `1px solid ${_color}`,
            borderRadius: '4px',
            color: _color,
          };
          break;
        case 'hollowCircleStyle':
          serialNumberStyle = {
            border: `1px solid ${_color}`,
            borderRadius: '40px',
            color: _color,
          };
          break;
        case 'defaultStyle':
          serialNumberStyle = {
            color: _color,
          };
          break;
        default:
          break;
      }
      return serialNumberStyle;
    },
    // 设置序号样式
    changeSerialNumberStyle() {
      this.$emit('changeSerialNumberStyle', this.sn_style, this.sn_background_color);
    },
  },
};
</script>

<style lang="scss" scoped>
.sn-style {
  display: flex;
  column-gap: 16px;

  .style-shape {
    width: 80px;

    :deep .el-input {
      &__inner {
        color: rgba(0, 0, 0, 0%);
      }
    }
  }

  .style-color {
    width: 40px;
  }

  .view-style {
    position: absolute;
    top: 0;
    left: 10px;
  }
}

.sn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 500;
}
</style>