基于element vue3的响应式开发

需要先安装 @vueuse/core

 

npm install @vueuse/core

 

// ... 其他 import ...

import { useBreakpoints } from '@vueuse/core'

// ... 其他代码 ...

// 添加响应式断点

const breakpoints = useBreakpoints({

  xs: 0,

  sm: 768,

  md: 992,

  lg: 1200,

  xl: 1920,

})

const xs = breakpoints.smaller('sm')

const sm = breakpoints.between('sm', 'md')

const md = breakpoints.between('md', 'lg')

const lg = breakpoints.between('lg', 'xl')

const xl = breakpoints.greater('xl')

 

 

// ... 组件中使用...
<el-descriptions class="margin-top" title="订单详情" :column="xs ? 1 : sm ? 2 : md ? 3 : lg ? 3 : xl ? 4 : 3" border>