【Vue3+Ts project】认识 @vueuse/core 库-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue3+Ts project】认识 @vueuse/core 库。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目标:

根据屏幕宽度改变实现动态获取盒子的宽度

目标:

一、javascript实现

二、@vueuse/core 库实现

一、javascript实现

1.首先 window.innerWidth 获取当前屏幕宽度，然后将盒子宽度除 375 乘当前屏幕宽度

150 / 375 * window.innerWidth

2.将获取的动态盒子宽度赋值给一个变量

import { ref } from 'vue';

const width = ref(0)
width.value = 150 / 375 * window.innerWidth

3.将获取盒子逻辑代码封装函数并在进入页面后组件加载结束后执行，然后将宽赋值给swipe标签 :width="width"

import { onMounted, ref } from 'vue';

const width = ref(0)

const SwipeWidth = () => width.value = 150 / 375 * window.innerWidth
onMounted(() => {
    SwipeWidth()
})

<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

这里在进入页面或刷新页面后是实现了。但是在开发过程中拉动屏幕宽度是没有改变的

【Vue3+Ts project】认识 @vueuse/core 库

4.使用 resize事件当屏幕改变时就执行封装逻辑代码函数，最后在组件销毁也就是组件被DOM 移除时清除

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const width = ref(0)

const SwipeWidth = () => width.value = 150 / 375 * window.innerWidth
onMounted(() => {
    SwipeWidth()

    window.addEventListener('resize', () => {
        console.log(window.innerWidth);
    })
})

onUnmounted(()=>{
      window.addEventListener('resize', SwipeWidth)
})

</script>


<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

代码

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const width = ref(0)

const SwipeWidth = () => width.value = 150 / 375 * window.innerWidth
onMounted(() => {
    SwipeWidth()

    window.addEventListener('resize', () => {
        console.log(window.innerWidth);
    })
})

onUnmounted(()=>{
      window.addEventListener('resize', SwipeWidth)
})

</script>


<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

二、@vueuse/core 库实现

1.下载 @vueuse/core库到开发者依赖

npm install -D @vueuse/core
或
yarn add @vueuse/core
或
pnpm add @vueuse/core

2.引入 useWidthSize 引从他对象内拿到 width,然后swipe标签使用

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
</script>

<template>
<van-swipe :loop="false" :show-indicators="false" 
:width="width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

3.最后也是非常重要的，拿到当前屏幕宽度，这里当前屏幕宽度就是 useWidthSize 解构出来的 width ，然后盒子宽度除 375 乘当前屏幕宽度,完成

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
</script>

<template>
<van-swipe :loop="false" :show-indicators="false" 
:width=" 150 / 375 * width">
    <van-swipe-item v-for="item in 5" :key="item">
        <DoctorCard />
    </van-swipe-item>
</van-swipe>
</template>

文章来源地址https://www.toymoban.com/news/detail-492128.html

到了这里，关于【Vue3+Ts project】认识 @vueuse/core 库的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！