caimei-authentic-www/components/SimpleCity/index.vue

<template>
  <div class="simple-city" id="simple-city">
    <div class="select-group">
      <div
        class="select"
        v-for="(item, index) in placeholderValue"
        :key="index"
        @click.stop="onClick(item, index)"
      >
        <span
          v-if="selectedValue[index]"
          v-text="selectedValue[index][labelName]"
        ></span>
        <span v-text="item.label" v-else></span>
      </div>
    </div>
    <keep-alive>
      <div class="option-group">
        <div class="options" v-show="showOptions" :class="[translateX]">
          <div class="scroll-box">
            <div class="option" @click="onOptionsClick(emptyData)">全部</div>
            <div
              class="option"
              v-for="item in list"
              :key="item[valueName]"
              @click="onOptionsClick(item)"
              v-text="item[labelName]"
            ></div>
          </div>
        </div>
      </div>
    </keep-alive>
  </div>
</template>

<script>
export default {
  props: {
    labelName: {
      type: String,
      default: 'label',
    },
    valueName: {
      type: String,
      default: 'value',
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selected: 0,
      showOptions: false,
      offset: 0,
      current: 0,
      emptyData: {
        label: '全部',
        value: '',
      },
      placeholderValue: [
        {
          label: '省',
        },
        {
          label: '市',
        },
        {
          label: '区',
        },
      ],
      selectedValue: [],
      list: [],
    }
  },
  computed: {
    translateX() {
      return 'offset-' + this.current
    },
  },
  beforeDestroy() {
    window.removeEventListener('click', () => {})
  },
  mounted() {
    window.addEventListener('click', ($event) => {
      this.showOptions = false
    })
  },
  methods: {
    onClick(item, index) {
      if (index === 0 || this.selectedValue[index - 1]) {
        this.offset = item.offset
        this.current = index
        this.filterList()
        this.showOptions = true
      } else {
        this.showOptions = false
      }
    },
    onOptionsClick(item) {
      const valueName = this.valueName
      if (this.current === 0) {
        this.selectedValue = []
      } else if (this.current === 1) {
        this.$set(this.selectedValue, 2, undefined)
      }
      if (typeof item[valueName] === 'number' || item[valueName]) {
        this.$set(this.selectedValue, this.current, item)
      } else {
        this.$set(this.selectedValue, this.current, undefined)
      }
      this.selectedValue = this.selectedValue.filter((item) => item)
      this.$emit('change', this.selectedValue)
    },
    filterList() {
      if (this.current === 0) {
        this.list = this.options
        return
      }
      const parent = this.selectedValue[this.current - 1]
      this.list = parent.children
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .simple-city {
    width: 560px;
    .select-group {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .select {
        position: relative;
        width: 160px;
        height: 40px;
        background: rgba(255, 255, 255, 0.39);
        border-radius: 4px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 14px;
        padding-right: 40px;
        color: #fff;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

        &::after {
          position: absolute;
          top: 50%;
          right: 14px;
          transform: translateY(-50%);
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 7px 0 7px;
          border-color: white transparent transparent transparent;
          opacity: 0.8;
        }
      }
    }

    .option-group {
      margin-top: 4px;
      position: relative;
      width: 100%;

      .options {
        display: inline-block;
        min-width: 160px;
        max-width: 400px;
        max-height: 240px;
        position: relative;
        padding-top: 4px;
        border-radius: 4px;
        box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);

        &.offset-0 {
          transform: translateX(0);
        }
        &.offset-1 {
          transform: translateX(200px);
        }
        &.offset-2 {
          transform: translateX(400px);
        }

        .scroll-box {
          max-height: 240px;
          overflow-y: scroll;
          padding: 8px 0;
          background: #fff;
          border-radius: 4px;

          &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: #eee;
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background-color: #ccc;
          }
        }

        &::after {
          position: absolute;
          top: 0;
          left: 14px;
          transform: translateY(-50%);
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 7px 10px 7px;
          border-color: transparent transparent white transparent;
        }

        .option {
          font-size: 16px;
          background: #fff;
          padding: 0 14px;
          line-height: 40px;
          color: #626262;
          box-sizing: border-box;
          cursor: pointer;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          &:hover {
            background: #f6f6f6;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .simple-city {
    .select-group {
      width: 92vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .select {
        position: relative;
        width: 28vw;
        height: 8vw;
        background: rgba(255, 255, 255, 0.39);
        line-height: 8vw;
        box-sizing: border-box;
        padding: 0 1.8vw;
        padding-right: 6vw;
        color: #000;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        border: 0.1vw solid #ddd;
        border-radius: 1vw;
        font-size: 3.2vw;

        &::after {
          position: absolute;
          top: 50%;
          right: 1.8vw;
          transform: translateY(-50%);
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 1.8vw 1.2vw 0 1.2vw;
          border-color: #474747 transparent transparent transparent;
          opacity: 0.8;
        }
      }
    }

    .option-group {
      position: relative;
      width: 100%;

      .options {
        position: absolute;
        top: 1.2vw;
        display: inline-block;
        min-width: 28vw;
        max-width: 60vw;

        &.offset-0 {
          left: 4vw;
        }
        &.offset-1 {
          transform: translateX(36vw);
        }
        &.offset-2 {
          right: 4vw;
        }

        .scroll-box {
          max-height: 50vw;
          overflow-y: scroll;
          background: #fff;
          border-radius: 1.2vw;
          border-radius: 1.2vw;
          border: 0.1vw solid #ddd;

          &::-webkit-scrollbar {
            width: 0.2vw;
            height: 0.2vw;
            background-color: #eee;
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 0.1vw;
            background-color: #ccc;
          }
        }

        .option {
          font-size: 3.2vw;
          background: #fff;
          padding: 0 1.2vw;
          line-height: 7vw;
          color: #626262;
          box-sizing: border-box;
          cursor: pointer;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>