@vueuse/core 介绍:
文档https://vueuse.org/core/useWindowSize/
是一个基于 组合API 封装的库,提供了一些网站开发常用的工具函数,切得到的是响应式数据
例如:
在 375 宽度设备,滚动宽度为 150
在其他设备需要等比例设置滚动的宽度
scrollWidth = 150 / 375 * Width 就可以适配
@vueuse/core 应用:
安装:pnpm add @vueuse/core
import { useWindowSize } from ‘@vueuse/core’
const { width } = useWindowSize()
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
</script>
<template>
<!-- swipe 组件 -->
<van-swipe
:width="(150 / 375) * width"
:show-indicators="false"
:loop="false">
<van-swipe-item v-for="item in 5" :key="item">
<doctor-card />
</van-swipe-item>
</van-swipe>
</template>