pbl-app/src/views/eva/components/selects.vue

<template>
  <div class="selcts" @click.stop="icoIsShow">
    <!-- <div class="backPage" v-if="!ico" @click="fuClick1"></div> -->
    <div style="flex: 1;">
      <div style="color: rgba(0, 0, 0, 0.40);" v-if="!choosePer.length">
        {{ tit }}
      </div>
      <div class="choosePerCon" v-if="choosePer.length">
        <div v-for="(i, index) in listContent" :key="index + 'q'">
          <div class="choosePerTxt" :style="{ display: choosePer.includes(i.id) ? '' : 'none' }">
            {{ i.name }}
            <img @click.stop="delStu(i.id)" src="@/assets/images/eva/cha.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div class="ico">
      <van-icon size="14px" :name="ico ? 'arrow-down' : 'arrow-left'" />
    </div>

    <div class="list" v-if="!ico">
      <div class="ol" v-for="(i, index) in listContent" :key="index + 'w'" @click.stop="choose(i)">
        <div :style="{ color: choosePer.includes(i.id) ? 'blue' : '' }">
          {{ i.name }}
        </div>
        <div>
          <img :style="{ display: choosePer.includes(i.id) ? '' : 'none' }" src="@/assets/images/eva/dui.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tit: {
      type: String,
      default: ''
    },
    listContent: {
      type: Array,
      default: () => []
    },
    choosePer: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ico: 1,
      txtColor: 'txtColor'
    }
  },
  methods: {
    // 判断弹出选项列表
    icoIsShow() {
      this.ico = !this.ico
      this.$emit('selBtn')
    },
    // 判断学生是否被选中
    choose(e) {
      // console.log(this.listContent)
      // console.log('判断学生是否被选中', e)
      if (this.choosePer.includes(e.id)) return
      this.choosePer.push(e.id)
      // console.log(this.choosePer)
    },
    // 删除学生
    delStu(e) {
      // console.log('删除学生', e)
      // console.log(this.choosePer)
      const iii = this.choosePer.indexOf(e)
      this.choosePer.splice(iii, 1)
      //   console.log()
    },
    // 此方法在父元素中被调用
    fuClick() {
      // console.log(111)
      // this.ico = !this.ico
      this.ico = 'false'
    }
  }
}
</script>

<style lang="scss" scoped>
.txtColor {
  color: blue;
}
.backPage {
  background-color: aquamarine;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  // z-index: 200;
}
.selcts {
  position: relative;
  display: flex;
  box-sizing: border-box;
  // padding: 0px 15px;
  padding-right: 15px;
  font-size: 12px;
  .ico {
    width: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .list {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    max-height: 220px;
    overflow-y: scroll;
    background-color: #fff;
    width: 100%;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 8px;
    .ol {
      height: 40px;
      line-height: 40px;
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0px 10px;
      display: flex;
      justify-content: space-between;
    }
    // .ol:hover {
    //   background-color: #f3f6f9;
    // }
  }
  .choosePerCon {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: scroll;
    .choosePerTxt {
      height: 30px;

      flex-shrink: 0;
      background-color: #eef0f3;
      margin: 2px 3px;
      box-sizing: border-box;
      padding: 0px 10px;
      display: inline-flex;
      align-items: center;
      border-radius: 15px;
      img {
        flex-shrink: 0;
        width: 13px;
        // height: 15px;
        margin-left: 5px;
      }
    }
  }
}
</style>