gcb_zc/components/select2.vue

<template>
  <div class="select2">
    <div class="region" @click="regions(0)">
      地区
      <img src="../static/img/open.png" v-if="!region[0]" alt>
      <img src="../static/img/hide.png" v-else alt>
    </div>
    <div class="region" @click="regions(1)">
      行业
      <img src="../static/img/open.png" v-if="!region[1]" alt>
      <img src="../static/img/hide.png" v-else alt>
    </div>
    <div class="region" @click="regions(2)">
      阶段
      <img src="../static/img/open.png" v-if="!region[2]" alt>
      <img src="../static/img/hide.png" v-else alt>
    </div>
    <div id="region" v-if="region[0]">
      <ul class="left">
        <li>全国</li>
        <li>华北</li>
        <li>华北</li>
        <li>华北</li>
        <li>华北</li>
        <li>华北</li>
        <li>东北</li>
      </ul>
      <ul class="right">
        <li>全部</li>
        <li>辽宁省</li>
        <li>辽宁省</li>
        <li>辽宁省</li>
        <li>辽宁省</li>
        <li>辽宁省</li>
        <li>辽宁省</li>
        <li>辽宁省</li>
      </ul>
    </div>
    <ul  class="categorys" v-if="region[1]">
      <li>办公展览停车场</li>
      <li>办公展览停车场</li>
      <li>办公展览停车场</li>
      <li>办公展览停车场</li>
      <li>办公展览停车场</li>
      <li>办公展览停车场</li>
    </ul>
    <ul  class="categorys" v-if="region[2]">
      <li>工程筹备</li>
      <li>工程筹备</li>
      <li>工程筹备</li>
      <li>工程筹备</li>
      <li>工程筹备</li>
      <li>工程筹备</li>
    </ul>
    <div class="bg" v-if="region[0]||region[1]||region[2]"></div>
  </div>
</template>
<script>
import '~/assets/select.scss'
export default {
  data() {
    return {
      region: [false, false,false],
     
    }
  },
  created: function() {},
  methods: {
    regions(e) {
      const region = [false, false,false]
      region[e] = true
      this.region = region
    }
  }
}
</script>