第146篇：響應式動態居中（js+css,vue）

养肥胖虎發表於2024-08-31
JSCSSVue

好傢伙，

1.使用js原生

<div id="container" style="position: relative; width: 100%; height: 100vh;">
    <div id="hero" style="position: relative;"></div>
</div>

<script>
    const hero = document.getElementById('hero');
    const container = document.getElementById('container');

    hero.style.width = '100px';
    hero.style.height = '100px';
    hero.style.background = '#ffcc00';

    window.onload = function () {
        function update() {
            let heroX = hero.clientWidth;
            let heroY = hero.clientHeight;

            let containerX = container.clientWidth;
            let containerY = container.clientHeight;

            hero.style.left = (containerX - heroX) / 2 + 'px';
            hero.style.top = (containerY - heroY) / 2 + 'px';
        }

        update();
        window.addEventListener('resize', update);
    }
</script>

  • window.onload: 當整個頁面及其資源（包括圖片、指令碼、樣式等）載入完成時，會執行 onload 內的程式碼。

  • update 函式:

    • heroX 和 heroY 分別獲取 hero 元素的當前寬度和高度。
    • containerX 和 containerY 分別獲取 container 元素的當前寬度和高度。
    • hero.style.left 和 hero.style.top 分別設定 hero 的水平和垂直位置，透過計算將其居中。公式 (containerX - heroX) / 2 計算出 hero 左邊緣到 container 左邊緣的距離，使 hero 水平居中，類似地，(containerY - heroY) / 2 計算出 hero 上邊緣到 container 上邊緣的距離，使其垂直居中。

  • update();: 初始呼叫 update 函式，確保頁面載入時 hero 元素被正確居中。

  • window.addEventListener('resize', update);: 新增視窗大小變化事件的監聽器，每當瀏覽器視窗尺寸發生變化時，update 函式會被再次呼叫，重新計算並更新 hero 的位置，確保它始終在 container 中居中。

2.vue

在vue中使用計算屬性實現

<template>
  <div :style="containerStyle">
    <div ref="content" :style="contentStyle">
      動態居中的內容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: 0,
      containerHeight: 0,
      contentWidth: 0,
      contentHeight: 0,
    };
  },
  mounted() {
    // 在元件掛載時，獲取容器和內容的尺寸
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateDimensions);
  },
  computed: {
    containerStyle() {
      return {
        position: 'relative',
        width: '100%',
        height: '100vh',
      };
    },
    contentStyle() {
      return {
        position: 'absolute',
        top: `${(this.containerHeight - this.contentHeight) / 2}px`,
        left: `${(this.containerWidth - this.contentWidth) / 2}px`,
        backgroundColor: 'lightblue',
        padding: '20px',
      };
    },
  },
  methods: {
    updateDimensions() {
      // 更新容器的寬度和高度
      this.containerWidth = this.$el.clientWidth;
      this.containerHeight = this.$el.clientHeight;
      
      // 更新內容的寬度和高度
      const contentEl = this.$refs.content;
      this.contentWidth = contentEl.clientWidth;
      this.contentHeight = contentEl.clientHeight;
    },
  },
};
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>

透過計算屬性計算出位置

獲取並更新容器的寬度和高度，使用 this.$el.clientWidth 和 this.$el.clientHeight 獲取 container 的尺寸。

相關文章