vue-cdutDigitalMap/src/components/LayerSelector.vue

<template>
    <div class="change-div" id="change-div">
      <div class="change-container-div">
        <div class="layer-select-button-div" id="layer-select-button-div" @click="basemapShow = !basemapShow">
          <i class="fa fa-map-o" aria-hidden="true"  v-if="!basemapShow"></i>
          <i class="fa fa-map" aria-hidden="true"  v-if="basemapShow"></i>
        </div>
        <div class="info-select-button-div" id="info-select-button-div"  @click="infomapShow = !infomapShow">
          <i class="fa fa-commenting-o" aria-hidden="true" v-if="!infomapShow"></i>
          <i class="fa fa-commenting" aria-hidden="true" v-if="infomapShow"></i>
        </div>
      </div>

      <div class='basemap-content' id="basemap-content" v-show="basemapShow">
        <el-checkbox-group
          :min="1"
          v-model="checkMapList"
          @change="checkedMapsChange"
        >
          <el-checkbox label="cdut">文化地图</el-checkbox>
          <el-checkbox label="tiandi">在线地图</el-checkbox>
        </el-checkbox-group>
      </div>

      <div class='info-content' id="info-content" v-show="infomapShow">
        <el-checkbox-group v-model="checkTagList" @change="checkedTagsChange">
          <el-checkbox label="noticeLayer">最新通知</el-checkbox>
          <el-checkbox label="reportLayer">实时新闻</el-checkbox>
          <el-checkbox label="cultureLayer" disabled>校园文化</el-checkbox>
          <el-checkbox label="otherLayer" >更多</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
</template>

<script>
export default {
  name: 'LayerSelector',

  data: () => ({
    // 底图控件 可见性
    basemapShow: false,
    // 信息控件 可见性
    infomapShow: false,
    // checkMapList: ['文化地图', '在线地图'],
    checkMapList: ['cdut', 'tiandi'],
    checkTagList: ['noticeLayer', 'reportLayer', 'cultureLayer', 'otherLayer']
  }),

  watch: {
    basemapShow: function () {
      if (this.basemapShow) {
        this.infomapShow = false
      }
    },
    infomapShow: function () {
      if (this.infomapShow) {
        this.basemapShow = false
      }
    }
  },

  methods: {
    checkedMapsChange () {
      this.$emit('getCheckedMap', this.checkMapList)
    },
    checkedTagsChange () {
      this.$emit('getCheckedTag', this.checkTagList)
    }
  }
}
</script>

<style scoped>

.basemap-item {
  padding: 5px;
  cursor: pointer;
}

.basemap-text,.online-map-text{
  width: 60px;
  height: 12px;
}
.basemap-text{
  /* color: #007bff; */
  /* color: rgb(115, 172,23); */
  font-weight: bold;
  font-family: "Source Han Sans CN";

}

/*图层与消息按钮样式*/
.info-select-button {
  width: 22px;
  height: 20px;
}

.info-select-button-div {
  width: 22px;
  height: 22px;
  z-index: 999;
  cursor: pointer;
  position: absolute;
}

.layer-select-button {
  width: 22px;
  height: 22px;
}

.layer-select-button-div {
  width: 22px;
  height: 22px;
  z-index: 999;
  right: 3px;
  cursor: pointer;
  position: absolute;
}

.change-container-div {
  height:20px;
  width: 55px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 3px;
  bottom: 5px;
  right: 0;
}

.change-div {
  background-color:transparent;
  width:65px;
  height: 35px;
  z-index: 999;
  position: absolute;
  right: 10px;
  border-radius: 5px;
  margin-top: 10px
}

/*图层切换弹出框 和 消息选择弹出框 样式*/
#basemap-content, .info-content {
  position: absolute;
  font-size: 12px;
  z-index: 100;
  background: rgb(219, 236, 224);
  /* color: rgb(115, 172,23); */
  opacity: 0.95;
  right: 0px;
  margin-top: 40px;
  height: 65px;
  width:100px;
  align-content: center;
  margin-top: 35px
}

.info-content {
  height: 130px;
  /* color: rgb(115, 172,23); */
}

/*设置选项样式*/
/deep/ .el-checkbox {
   left:10px;
   top:8px;
 }

/deep/ .el-checkbox__label {
  font-family: "Source Han Sans CN";
  color: #212529;
}

</style>