基于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>
浙公網安備 33010602011771號