qjkankan_v1.1.1/packages/qjkankan-editor/src/components/shared/Combox.vue

<template>
  <div class="com-combox" :class="{show:showPopup}" @click="switchShowHide" v-clickoutside="hide">
    <div class="input">
      <p v-if="current">{{current.name}}</p>
    </div>
    <a class="iconfont icon-material_preview_upload_collect"></a>
    <ul ref="ul"
      :style="{
        top: needTranslateUp ? '' : '100%',
        bottom: needTranslateUp ? '100%' : '',
      }"
    >
      <li
        v-for="(item,key) in data"
        :key="key"
        @click="onClick(item)"
        :class="{active:selectedId == item.id}"
      >
        <slot :item="item">
          <template>
            <span>{{item.name}}</span>
          </template>
        </slot>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    data: Array,
    type: {
      type: String,
      default: "object"
    },
    selectedId: {
      type: String,
      default:''
    },
    bottomSpace: {
      type: Number,
      default: Infinity,
    },
  },
  data() {
    return {
      showPopup: false,
      needTranslateUp: false,
    };
  },
  computed: {
    current() {
      let tmp = this.data.find(item=>{
         return this.selectedId == item.id
      })
      return tmp
    }
  },
  methods: {
    switchShowHide() {
      if (this.showPopup === true) {
        this.hide()
      } else {
        this.showPopup = true;
        this.$nextTick(() => {
          const boundingRectBottom = this.$refs.ul.getBoundingClientRect().bottom
          if (boundingRectBottom > this.bottomSpace) {
            this.needTranslateUp = true
          } else {
            this.needTranslateUp = false
          }
        })
      }
    },
    hide() {
      this.showPopup = false;
      this.needTranslateUp = false
    },
    onClick(item) {
      if (this.selectedId == item.id) {
        return this.$emit("click", item);
      }
      this.$emit("change", item);
    }
  }
};
</script>
<style lang="less" scoped>
.com-combox {
  position: relative;
  border: 1px solid rgba(151, 151, 151, 0.2);
  padding: 0 16px;
  background: #1A1B1D;
  border-radius: 2px;
  height: 36px;
  cursor: pointer;
  &.show {
    ul {
      display: block;
    }
    a {
      transform: translateY(-50%) rotate(180deg);
    }
  }
  > .input {
    height: 100%;
    display: flex;
    align-items: center;
    .p {
      width: 100%;
      padding-right: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: left;
    }
  }
  
  ul {
    display: none;
    padding: 0;
    position: absolute;
    left: -1px;
    right: -1px;
    background: #1A1B1D;
    border-radius: 0px 0px 2px 2px;
    border: 1px solid #404040;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
    li {
      height: 36px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      &.active,
      &:hover {
        background: #252526;
        color: @color;
      }
    }
  }
  a {
    position: absolute;
    right: 16px;
    top: 50%;
    font-size: 12px;
    transform: translateY(-50%);
  }
}
</style>