fuse-code/src/views/setting/select-back.vue

<template>
  <div class="back-layout">
    <template v-for="back in backs" :key="back.value">
      <div v-if="back.children" class="child-layout-parent">
        <Dropdown placement="bottom">
          <div class="child-layout" :class="{ active: activeParent === back.value }">
            <ui-icon type="rectification" />
            <BackItem
              :type="back.type"
              :label="back.label"
              :url="back.image"
              :active="activeParent === back.value"
              @click="value !== back.value && $emit('update:value', back.value)"
            />
          </div>
          <template #overlay>
            <Menu :selectedKeys="[value]">
              <MenuItem
                v-for="item in back.children"
                @click="value !== item.value && $emit('update:value', item.value)"
                :key="item.value"
              >
                {{ item.label }}
              </MenuItem>
            </Menu>
          </template>
        </Dropdown>
      </div>
      <BackItem
        v-else
        :type="back.type"
        :label="back.label"
        :url="back.image"
        :active="value === back.value"
        @click="value !== back.value && $emit('update:value', back.value)"
      />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { Dropdown, MenuItem, Menu } from "ant-design-vue";
import { computed, ref } from "vue";
import BackItem from "./back-item.vue";

const props = defineProps<{ value: string | undefined }>();
defineEmits<{ (e: "update:value", value: string): void }>();

const backs = ref([
  { label: "无", type: "icon", image: "icon-without", value: "none" },
  {
    label: "地图",
    type: "map",
    image: "/oss/fusion/default/images/map.png",
    value: "dt",
    children: [
      { label: "天地图", value: "map" },
      { label: "高德地图", value: "gdMap" },
      { label: "谷歌地图", value: "gMap" },
    ],
  },
  {
    label: "蓝天白云",
    type: "img",
    image: "/oss/fusion/default/images/pic_ltby@2x.png",
    value: "/oss/fusion/default/images/蓝天白云.jpg",
  },
  {
    label: "乌云密布",
    type: "img",
    image: "/oss/fusion/default/images/pic_wymb@2x.png",
    value: "/oss/fusion/default/images/乌云密布.jpg",
  },
  {
    label: "夜空",
    type: "img",
    image: "/oss/fusion/default/images/pic_yk@2x.png",
    value: "/oss/fusion/default/images/夜空.jpg",
  },
  {
    label: "傍晚",
    type: "img",
    image: "/oss/fusion/default/images/pic_bw@2x.png",
    value: "/oss/fusion/default/images/傍晚.jpg",
  },
]);

const activeParent = computed(() => {
  for (const back of backs.value) {
    if (back.value === props.value) {
      return back.value;
    } else if (back.children) {
      for (const c of back.children) {
        if (c.value === props.value) {
          return back.value;
        }
      }
    }
  }
});
</script>
<style lang="scss" scoped>
.back-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.child-layout-parent {
  position: relative;
}
.child-layout {
  position: absolute;
  top: 0;
  left: 0;
  height: 88px;
  > .icon {
    position: absolute;
    font-size: 22px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    inset: 0;
    border-radius: 4px;
    cursor: pointer;
  }
  &.active::after {
    inset: -2px;
  }
}
</style>