使用Grid布局生成宫格自适应mixins

1、创建mixins组件（根据项目局部还是全局注册）

// gridResizeMixin.js
/**
 * 默认导出一个对象，包含响应式混合组件的相关方法和数据
 * 该混合组件用于处理不同屏幕尺寸下的布局变化
 */
export default {
  /**
   * 定义组件的数据属性
   * @returns {Object} 返回包含网格列数和当前断点宽度的对象
   */
  data() {
    return {
      // 不同屏幕尺寸下的网格列数定义
      gridColumns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 4 },
      // 当前的断点宽度标识
      breakWidth: null
    }
  },
  /**
   * 定义组件的方法
   * 包含更新断点宽度的方法
   */
  methods: {
    /**
     * 根据窗口宽度更新断点宽度
     * 通过对比窗口宽度与预设断点，来确定当前的断点宽度
     */
    updatebreakWidth() {
      if (window.innerWidth < 768) {
        this.breakWidth = 'xs'
      } else if (window.innerWidth < 992) {
        this.breakWidth = 'sm'
      } else if (window.innerWidth < 1200) {
        this.breakWidth = 'md'
      } else if (window.innerWidth < 1920) {
        this.breakWidth = 'lg'
      } else {
        this.breakWidth = 'xl'
      }
    }
  },
  /**
   * 组件挂载时执行的方法
   * 初始化断点宽度，并添加窗口尺寸变化事件监听器
   */
  mounted() {
    this.updatebreakWidth()
    window.addEventListener('resize', this.updatebreakWidth)
  },
  /**
   * 组件销毁前执行的方法
   * 移除窗口尺寸变化事件监听器，防止内存泄漏
   */
  beforeDestroy() {
    window.removeEventListener('resize', this.updatebreakWidth)
  }
}

 2、如果是局部注册就直接引用,然后mixins注册就完成局部注册

import gridResize from '@/mixins/gridResize'

export default {
  data(){
      return{}
  }
  mixins: [gridResize],
}

3、 在dom上面使用动态样式绑定即可（:style="{'grid-template-columns': `repeat(${gridColumns[breakWidth]}, minmax(0px, 1fr))`,}"）

<div class="mt10 grid-column-4" :style="{'grid-template-columns': `repeat(${gridColumns[breakWidth]}, minmax(0px, 1fr))`,}">
   <span class="mt10">CSV12312312</span>
   <span class="mt10">出售</span>
</div>