v-for循环里面 控制每个元素的样式 显示和隐藏 浮动窗 给每个子元素绑定 不同的ref

 注意:

1、ref 不可以直接绑定在子组件上面,可以在子组件外面加上一层 div

2、添加样式时, 不能加  important

​​​​​​​3、样式用驼峰 marginLeft

 正确的如下:

 

<template>
  <div>
    <div
      v-if="arr.length > 0"
      class="MidMap"
      :class="[{ ITClass: type === 'IT' }, { WorldClass: type === 'World' }]"
    >
      <div
        class="MidMapItem"
        v-for="(item, index) in arr"
        :key="index"
        :style="[{ left: item.left }, { top: item.top }]"
        @mouseenter="mouseOver(index)"
        @mouseleave="mouseLeave(index)"
      >
        <div class="everyCard">
          <div class="name">
            {{ item.name }}
          </div>
          <div class="imgs">
            <img src="../../assets/img/zs.png" alt="" />
          </div>
          <div :ref="`tagItem${index}`" class="tanhuangNone">
            <PopoverCard
              :item="item"
              class="tanchuang"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PopoverCard from "./PopoverCard";

export default {
  name: "MidMapAndDiamond",

  components: { PopoverCard },
  props: {
    type: {
      type: String,
      default: "", //IT-台湾重点IT企业   World-台积电在全球的分布
    },
  },
  data() {
    return {
      description: "中间地图 上面有钻石标注 hover出现浮动窗标注",
      activeClass: 0, //弹窗是否显示
      arr: [],
      arrWorld: [
        {
          name: "Wafer Tech",
          left: "11%",
          top: "41.5%",
          place: "right",
          id: 0,
        },
        {
          name: "北美子公司",
          left: "12%",
          top: "47%",
          place: "right",
          id: 1,
        },
        {
          name: "欧洲子公司",
          left: "42.5%",
          top: "38.3%",
          place: "right",
          id: 2,
        },
        {
          name: "日本子公司",
          left: "81.3%",
          top: "43%",
          place: "left",
          id: 3,
        },
        {
          name: "韩国子公司",
          left: "77%",
          top: "45.6%",
          place: "left",
          id: 4,
        },
        {
          name: "台积电中国",
          left: "72%",
          top: "49%",
          place: "left",
          id: 5,
        },
        {
          name: "总部",
          left: "77.2%",
          top: "51.6%",
          place: "left",
          id: 6,
        },

        {
          name: "SSMC",
          left: "71.5%",
          top: "61%",
          place: "left",
          id: 7,
        },
      ],

      arrIT: [
        {
          name: "远东集团",
          left: "35%",
          top: "27%",
        },
        {
          name: "台湾煤炭公司",
          left: "65%",
          top: "7%",
        },
        // {
        //   name: "台积电中国",
        //   left: "65%",
        //   top: "7%",
        // },
        // {
        //   name: "国泰人寿",
        //   left: "65%",
        //   top: "7%",
        // },
        // {
        //   name: "富士康集团",
        //   left: "65%",
        //   top: "7%",
        // },
        // {
        //   name: "台积电晶圆厂",
        //   left: "65%",
        //   top: "7%",
        // },
        // {
        //   name: "达丰电脑",
        //   left: "65%",
        //   top: "7%",
        // },

        // {
        //   name: "和硕联合科技",
        //   left: "65%",
        //   top: "7%",
        // },
        // {
        //   name: "台积电中国",
        //   left: "65%",
        //   top: "7%",
        // },
        // {
        //   name: "仁宝电脑",
        //   left: "65%",
        //   top: "7%",
        // },
      ],
    };
  },
  watch: {
    type() {
      this.changeData();
    },
  },

  mounted() {
    this.changeData();
    console.log(this.type, "this.type");
  },

  methods: {
    // getDetail(val) {
    //   console.log(val, "11111111111111111111");
    // },

    mouseOver(index) {
      this.$refs[`tagItem${index}`][0].style.display = "block ";
    },
    mouseLeave(index) {
      this.$refs[`tagItem${index}`][0].style.display = "none ";
    },

    changeData() {
      // IT-台湾重点IT企业   World-台积电在全球的分布
      if (this.type === "IT") {
        this.arr = this.arrIT;
      }
      if (this.type === "World") {
        this.arr = this.arrWorld;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.MidMap {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.MidMapItem {
  position: absolute;
  cursor: pointer;
  width: 86px;
  height: 55px;
  // border: 1px solid red;
  .everyCard {
    width: 86px;
    height: 55px;
    // border: 1px solid blue;
    position: relative;
    .name {
      color: white;
      padding: 0px 2px;
      background-color: rgba(0, 0, 0, 0.72);
      border: 1px solid rgba(0, 0, 0, 0.72);
      // box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.29);
      font-size: 10px;
      font-family: ShiShangZhongHeiJianTi;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      // z-index: 5;
    }
    .imgs {
      // width: 23px;
      width: 100%;
      height: 27px;
      margin: 3px auto;
      // border: 1px solid red;
      text-align: center;
      > img {
        width: 23px;
        height: 27px;
      }
    }
  }
}

.tanchuang {
  position: absolute;
  left: -440px;
  top: -110px;
}

// IT-台湾重点IT企业
.ITClass {
  height: 70vh;
  background: url("../../assets/img/chinamap.png") no-repeat 50% 10.5vh;
  background-size: 100% 100%;
  // background-size: contain;
}

// World-台积电在全球的分布
.WorldClass {
  height: 70vh;
  background: url("../../assets/img/worldmap.png") no-repeat 50% 15.5vh;
  // background-size: 100% 100%;
  background-size: contain;
}

.tanhuangNone {
  // display: none !important;
  display: none;
}
</style>