vue3 如何实时获取屏幕宽度

img


如图,我想让图片实时居中,就是打开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>

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

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

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

👀👀

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

const StyleKuang = ref({})
const StyleImg = ref({})
const imgWidth = 200 // 图片宽度
const gap = 40 // 图片之间的间隔
const imgCount = 10 // 图片数量

onMounted(() => {
  function updateStyles() {
    const screenWidth = window.innerWidth
    const imgGroupWidth = imgWidth * imgCount + gap * (imgCount - 1) // 图片组的总宽度
    const marginLeft = (screenWidth - imgGroupWidth) / 2 // 计算图片组左边的边距
    StyleKuang.value = { marginLeft: `${marginLeft}px` }
    StyleImg.value = { width: `${imgGroupWidth}px` }
  }

  window.addEventListener('resize', updateStyles)
  updateStyles()
})

</script>
<template>
  <div id="img" :style="StyleKuang">
    <div ref="divImage" :style="StyleImg">
      <!-- 这里放置图片 -->
    </div>
  </div>
</template>

侦听事件 addEventListener 你不应该考虑F12 你应该是去监听窗口的变化

加一个marigin 0 auto 上一个问题没刚才 唉唉唉唉

<template>

  <div id="kuang_jia">
    <div id="img" ref="divImage">
      <div ref="wrap" class="wrap">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://n.sinaimg.cn/sinakd20119/320/w2048h3072/20220606/92ce-80f7299c5bc020b063e364ecf0dbeaab.jpg">
        <img alt="" src="https://bbs.vivo.com.cn/forum/getPicture?fileId=wiwNWYCFW9ieGbWq/20191108/53d356f0305154c61c2283ddd66b1a88_w1080_h1331.jpg">
      </div>
    </div>
    <div class="zuo_you">
      <span class="zuo" @click="changImg(-1)">
        {{`<`}}
      </span>
      <span class="you" @click="changImg(1)">
        {{`>`}}
      </span>
    </div>

  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue'

const divImage = ref(null)
const wrap = ref(null)
const Style = ref()
// 记录位置
const origin = ref(0)
// 切换轮播
const changImg = (num) => { // num -1 左 1 右
  //原始位置加上移动的位置
  origin.value += num
  wrap.value.style.left = origin.value * 200 + 'px'
}
onMounted(() => {
  // let Width = (window.innerWidth - 1000) / 2
  // if (Width < 0) {
  //   Width = 0
  // }
  // Style.value = {
  //   left: Width + 'px'
  // }

  // 计算页面宽度,然后移动到页面中间
  // setInterval(() => {
  //   setTimeout(() => {
  //     divImage.value.animate({ left: -200 + 'px' }, 1000)
  //   }, 100)
  // }, 1000)
})
</script>
 
<style >
#kuang_jia {
  height: 300px;
  position: relative;
  z-index: 1;
  width: 1000px;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 300px;
  position: relative;
}

#img {
  width: 1000px;
  height: 300px;
  position: absolute;
  z-index: 100;
  overflow: hidden;
}
.wrap {
  width: 2000px;
  height: 300px;
  position: relative;
  left: 0;
  top: 0;
  /* 过渡 */
  transition: 1s;
}

.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>