vue3 如何实时获取屏幕宽度

Question

如图,我想让图片实时居中,就是打开f12和不打开f12时都居中屏幕
就是获取按f12时的显示宽度,然后让它居中,然后再获取不按f12时的样式,再让 它居中
https://www.maoyan.com/cinema/16638?poi=133660718
就是这个网站的样式,仿写

代码

<template>
  <!-- 此页面为图片轮播页面 -->
  <div id="kuang_jia">
    <div id="img" :style="StyleKuang">
      <div ref="divImage">
        <img alt="" src="../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg">
        <img alt="" src="../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg">
        <img alt="" src="../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg">
        <img alt="" src="../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg">
        <img alt="" src="../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg">
        <img alt="" src="../../image/9477156de6d94c49c505a9dfce8e8c17.jpg">
        <img alt="" src="../../image/c52be335098658931847fa0ecbcf7d03.jpeg">
        <img alt="" src="../../image/d86d80e8573ab91914a6e9ad5217c785.jpg">
        <img alt="" src="../../image/e305fca1a381bda8482d8b3296da61f6.jpg">
        <img alt="" src="../../image/fa983053c19cf3c7b27491507799e02e.jpeg">
      </div>
    </div>
    <div class="zuo_you">
      <span class="zuo">
          &lt;
      </span>
      <span class="you">
          &gt;
      </span>
    </div>
    <!--  箭头div必须放在图片div的后面,否则不显示  -->
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'

const divImage = ref(null)
// 获取标签属性
const StyleKuang = ref()
const StyleImg = ref()
const StyleImg1 = ref()
// const countChu = 1

const widthWindow = ref()
widthWindow.value = document.documentElement.clientWidth

watch(widthWindow, () => {
  let Width = (widthWindow.value - 1230) / 2
  if (Width < 0) {
    Width = 0
  }
  StyleKuang.value = {
    left: Width + 'px'
  }
  // 计算页面宽度,然后移动到页面中间
}, { immediate: true })

onMounted(() => {
  StyleImg.value = {
    width: (5 * 40 + 5 * 200) + 'px'
  }
  const countWei = divImage.value.childElementCount
  StyleImg1.value = {
    width: (countWei * 40 + countWei * 200) + 'px'
  }
  setInterval(() => {
    // while (countChu < countWei) {
    //   setTimeout(() => {
    //     divImage.value.animate({ left: -220 + 'px' }, 1000)
    //   }, 100)
    //   countChu++
    // }
  }, 1000)
})
</script>

<style lang="scss">
#kuang_jia {
  position: absolute;
  z-index: 1;
  width: 100%;
}

img {
  width: 200px;
  height: 300px;
  margin: 20px;
  border: azure 3px solid;
}

#img {
  width: 1230px;
  height: 340px;
  position: absolute;
  z-index: 100;
  overflow: hidden;
}

#img div {
  border: 1px solid black;
  width: 2400px;
  height: 340px;
  position: relative;
  background-color: bisque;
}

.zuo_you {
  margin-top: 50%;
  font-size: 20px;
  color: azure;
  position: absolute;
  z-index: 999;
}

// 设置顶层显示,并且上下居中

.zuo, .you {
  font-size: 50px;
  position: relative;
  cursor: pointer
}

.zuo {
  top: -400px;
}

.you {
  top: -400px;
  left: 910px;
}

// 扩展:z-index(css属性)
// 用法: z-index: 任意数字
// z-index值大的标签在上显示,值小的标签在下显示
// 如果不生效,去这个网站找办法 https://blog.csdn.net/zhangzhanbin/article/details/120370601

</style>

Answer 1

你好像是前面那个轮播图采纳了我的回答的题主吧。从你的描述来看，好像是要在窗口大小变化时做出响应，那么可以给给window添加resize响应事件。

window.resize = function () {
  // 获取样式，让它居中。
}

但我觉得应该也可以使用元素水平居中的方法，比如在最外层的div设置“margin: 0 auto”.