悬浮框效果 笔记

笔记：主要是给自己看的

用移入移出事件 加标记
    <div  style="border:1px solid black;position: relative;">
      <div
        class="box1 flex"
        v-for="(item,index) in cityList"
        :key="index"
        @mousemove="yiru(index)"
        @mouseout="out"
      >
        <div class="flex-a-center" style="margin-left:20px">{{item.type}}</div>
        <div class="flex-a-center" style="margin-left:160px;font-size:18px">
          <RightOutlined />
        </div>
        <div class="box2 green-border" v-show="flag===index">
          <div v-for="(item1,index1) in item.children" :key="index1">
            <div class="flex-a-center" style="height:41px">
            <div
                style="font-style:italic;font-size:16px;color:orange;margin-left:20px "
                class="font1"
              >{{index1+1}}</div>
              <div style="font-size:14px;margin-left:20px;color:orange" class="font2">{{item1.city}}</div>
              <div
                style="font-size:14px;margin-left:20px;color:rgb(153,153,153)"
                class="font2"
            >{{item1.desc}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    const yiru = (index: any): void => {
      data.flag = index;
      // console.log(data.flag);
    };

    //移出
    const out = (): void => {
      data.flag=-1
    };