teachcloud-print-web/card/components/common/LineWidthSelect.vue

<template>
  <el-dropdown
    trigger="click"
    class="line-width-select custom-select"
    placement="bottom-start"
    @command="select"
  >
    <div class="select-preview">
      <div class="select-preview-main">
        <div class="width-item" v-if="selected">
          <!-- <span>{{ selected }}</span> -->
          <i :style="{ borderBottomWidth: selected }"></i>
        </div>
      </div>
      <div class="select-preview-icon">
        <i class="el-icon-arrow-down"></i>
      </div>
    </div>
    <el-dropdown-menu slot="dropdown" class="line-width-menu">
      <el-dropdown-item
        v-for="(option, index) in optionList"
        :key="index"
        :command="option"
      >
        <div class="width-item">
          <!-- <span>{{ option }}</span> -->
          <i :style="{ borderBottomWidth: option }"></i>
        </div>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
const PREDEFINE_OPTIONS = ["1px", "2px", "3px"];

export default {
  name: "line-width-select",
  props: {
    value: String,
    predefine: Array,
  },
  data() {
    return {
      optionList: [],
      selected: "",
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.selected = val;
      },
    },
  },
  created() {
    this.optionList =
      this.predefine && this.predefine.length
        ? this.predefine
        : PREDEFINE_OPTIONS;
  },
  methods: {
    select(option) {
      this.selected = option;
      this.$emit("input", this.selected);
      this.$emit("change", this.selected);
    },
  },
};
</script>