vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式

标签：classname   宽度   item   splay   显示   就会   no-repeat   image   class   

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";
    }
  }

vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式

标签：classname   宽度   item   splay   显示   就会   no-repeat   image   class   

原文地址：https://www.cnblogs.com/zljy/p/13155185.html