酒店房态图-修改房态

 

具体思路：

0.展示房态

使用v-for展示数组信息

1.阻止默认的右键行为

window.oncontextmenu = function(e){

      //取消默认的浏览器自带右键

      e.preventDefault();

}

2.书写改房态的标签，改为净房，改为脏房，设为坏房。

3.右键的时候让菜单显示。

@click.right="rightEvent(row)"

4.获取鼠标点击时的位置，让菜单从点击的位置出现，相对于class为fang的标签定位。

ps:一个@click可以出发多个函数，中间用；分割开
 

show_coords(){
      console.log(event.clientX)
      let submenu = document.querySelector(".submenu");
      submenu.style.left = event.clientX+"px";
      submenu.style.top = event.clientY+"px";
}

5.根据点击菜单中的按钮,改变标签的颜色，通过添加包含颜色的类名实现；同步数组中的标记数据。

完整代码如下：

<template>
  <div id="app">
    <!-- <HelloWorld class="hi"/> -->
    <div class="fang">
      <div class="item" v-for="row in arr" :key="row.id" @click.right="rightEvent(row);show_coords()">
        {{row.name}}
        <br>
        {{row.number}}
      </div>
    </div>
        <div id="submenu" v-show="flag" class="submenu">
            <div class="submenu__item" @click="changeRoomFlag(1)">改为净房</div>
            <div class="submenu__item" @click="changeRoomFlag(2)">改为脏房</div>
            <div class="submenu__item" @click="changeRoomFlag(3)">设为坏房</div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      arr: [{
        id: 1,
        number:101,
        name: "王小明",
        flag: 1
      },
      {
        id: 2,
        number:102,
        name: "汪洋",
        flag: 1
      },
      {
        id: 3,
        number:103,
        name: "许志功",
        flag: 1
      },
      {
        id: 4,
        number:104,
        name: "白明川",
        flag: 1
      },
      {
        id: 5,
        number:105,
        name: "孙少平",
        flag: 1
      },
      {
        id: 6,
        number:201,
        name: "孙少安",
        flag: 1
      },
      {
        id: 7,
        number:202,
        name: "孙少平",
        flag: 1
      },
      {
        id: 8,
        number:203,
        name: "田福军",
        flag: 1
      },
      {
        id: 9,
        number:204,
        name: "田福堂",
        flag: 1
      },
      {
        id: 10,
        number:205,
        name: "田润叶",
        flag: 1
      },
      {
        id: 11,
        number:301,
        name: "田晓霞",
        flag: 1
      },
      {
        id: 12,
        number:302,
        name: "孙玉厚",
        flag: 1
      },
      {
        id: 13,
        number:303,
        name: "苗凯",
        flag: 1
      },
      {
        id: 14,
        number:304,
        name: "岳豪豪",
        flag: 1
      },
      {
        id: 15,
        number:305,
        name: "王可行",
        flag: 0
      },
      {
        id: 16,
        number:306,
        name: "孙中山",
        flag: 1
      },
      ],
      room:{},
      flag: 0
    }
  },
  methods:{
    rightEvent(item){
      this.flag = 1;
      this.room = item;
      
    },
    changeRoomFlag(number){
      let divs = document.querySelectorAll(".item");
      this.room.flag = number;
      this.flag = 0;
      this.arr.forEach((item,index,arr) => {
        if(item.id === this.room.id){
          item.flag = this.room.flag
          console.log(item.name,item.flag)
          if(item.flag === 1){
            divs[index].className = "item blue1"
          }else if(item.flag === 2){
            divs[index].className = "item grey1"
          }else{
            divs[index].className = "item red1"
          }
        }
      })
      
    },
    show_coords(){
      console.log(event.clientX)
      let submenu = document.querySelector(".submenu");
      submenu.style.left = event.clientX+"px";
      submenu.style.top = event.clientY+"px";
    }
  },
  created(){
      window.oncontextmenu = function(e){
      //取消默认的浏览器自带右键
      e.preventDefault();
    }
  }
}
</script>

<style lang="scss" scoped>
.fang{
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  position: relative;
}
.item{
  width: 50px;
  height: 50px;
  margin-right: 2px;
  margin-top: 2px;
  background-color: blue;
}
.red1{
  background-color: red;
}
.blue1{
  background-color: blue;
}
.grey1{
  background-color: grey;
}
.submenu{
  // border: 1px solid blue;
  width: 70px;
  background-color: blueviolet;
  position: absolute;
  div{
    background-color: bisque;
    color: blue;
    margin-top: 2px;
    border-radius: 5px;
  }
}
</style>