gcb_zc/components/select.vue

<template>
  <div class="select">
    <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 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 id="category" v-if="region[1]">
      <li>535656</li>
      <li>535656</li>
      <li>535656</li>
      <li>535656</li>
      <li>535656</li>
    </ul>
    <div class="bg" v-if="region[0]||region[1]"></div>
  </div>
</template>
<script>
import '~/assets/select.scss'
export default {
  data() {
    return {
      region: [false, false],
      img: ['open', 'hide']
    }
  },
  created: function() {},
  methods: {
    regions(e) {
      const region = [false, false]
      region[e] = true
      const img = ['open', 'hide']
      img[e] = 'hide'
      this.img = img
      this.region = region
    }
  }
}
</script>