vue 獲取當前屏幕的寬度，圖片等比例縮放，動態設置css樣式

vue 獲取當前屏幕的寬度，圖片等比例縮放

這個是一個背景圖，點擊對應的圓圈就會出現一個蒙層上面顯示詳情，但是只要當前窗口大小變化了，因為我的蒙層大小是固定的px，所以不會變，就不在圖片對應的位置了

我們要綁定樣式style，等后面要根據當前的屏幕來給蒙層動態設置寬高

<div class="main">
      <div class="content">
        <div class="street">
          <router-link
            :to="{name:'/streetDetails',query:{code:'310151101'}}"
            :style="style01"
            class="street-item item1"
            ><span>詳情</span></router-link
          >
        </div>
      </div>
    </div>

css主要代碼

.main {
  background: transparent url("../../src/assets/img/street.png")  no-repeat;
  padding-top: 50.78%;
  position: relative;
  background-size: 100%;

  & .content {
    border: 0px;
  }
}
.street-item {
  height: 92px;
  width: 92px;
  position: absolute;
  max-width: 92px;
  min-width: 70px;
  min-height: 92px;
  min-height: 70px;
  text-align: center;
  display: block;
  line-height: 92px;
  // background: #c1bcbc82;
  border-radius: 50%;
  //  border: 1px solid red;
  & span {
    color: white;
    display: none;
  }
}
a:hover {
  & span {
    display: inline-block;
  }
  background: #4b42426b;
}
.item1 {
  position: absolute;
  top: 11.3%;
  left: 18.1%;
}

主要js代碼*

  data() {
    return {
      style01: {
        width: 92,
        height: 92,
        lineheight: 92,
        borderRadius: 50
      },
      centerWidth: "",
      centerHeight: ""
    };
  },
 mounted() {
    //立即執行
    window.onresize = () => {
      return (() => {
        this.resizeWin();
      })();
    };
    this.resizeWin();
  },

  methods: {
    resizeWin() {
      console.log(document.documentElement.clientWidth);
      //當前window 寬
      this.centerWidth = document.documentElement.scrollWidth;

      //最小寬度 1440
      var boxH = 92,
        boxW = 92;
      if (this.centerWidth > 1440) {
        boxH = boxW = Math.ceil((this.centerWidth / 1920) * 92);
       // console.log("H", boxH);
      } else {
        boxH = boxW = Math.ceil((1440 / 1920) * 92);
      }
      // var item = document.getElementsByClassName("street-item");
      console.log(this.style01.width);

      this.style01.width = boxW + "px";
      this.style01.height = boxH + "px";
      this.style01.lineHeight = boxH + "px";
      this.style01.borderRadius = boxW / 2 + "px";
    }
  }