vue3响应式布局的实现

vue3响应式布局的实现

1.通过vue提供的方法获取屏幕宽度:

import { useWindowSize } from '@vueuse/core';
const { width } = useWindowSize();

2. 使用计算属性来生成一个动态类名,以下边代码为例,屏幕宽度小于768时dynamicClass 的类名为small-width,屏幕宽度大于等于768时类名则为large-width。

const dynamicClass = computed(() => {
    const smallClass = 'small-width';
    const largeClass = 'large-width';
    return [
        width.value < 768 ? smallClass : largeClass
    ];
});

3. 给标签添加动态类名

<div :class='dynamicClass'>

4.给两个类名两套不同的样式

<style scoped lang='scss'>
.small-width{
		这里边是小于768时的样式
}

.large-width {
		这里边是大于等于768时的样式
}
</style>