<!--
 * @Date: 2024-09-26 17:15:15
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-09 15:36:42
 * @FilePath: /hager/src/components/common/hagerBox.vue
 * @Description: 文件描述
-->
<template>
  <div class="hagerBox">
    <el-row>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="16">
        <slot></slot>
      </el-col>
      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import $ from 'jquery';

export default {
  mixins: [mixin.init],
  data () {
    return {
      screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
    }
  },
  mounted () {
    // 页面进入时获取当前屏幕宽度
    this.handleResize();

    // 监听窗口的 resize 事件
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = $('.hagerBox').width(); // 更新屏幕宽度
      // 通过 emit 发送事件 'screen-width' 和数据
      this.$emit('screen-width', this.screenWidth);
    },
  },
  beforeDestroy() {
    // 在组件销毁前移除监听器，防止内存泄漏
    window.removeEventListener('resize', this.handleResize);
  }
}
</script>

<style lang="less" scoped>
.hagerBox {}
</style>