Maison > Article > interface Web > Partagez cinq fonctions VueUse utiles, utilisons-les ensemble !
Partagez cinq fonctions VueUse utiles, utilisons-les ensemble !
- 醉折花枝作酒筹avant
- 2021-08-13 17:39:163013parcourir
VueUse est un projet open source d'Anthony Fu. Il fournit aux développeurs Vue un grand nombre de fonctions utilitaires de base de l'API de composition pour Vue2 et Vue3.
Il propose des dizaines de solutions pour les cas d'utilisation courants des développeurs, tels que le suivi des modifications de référence, la détection de la visibilité des éléments, la simplification des modèles Vue courants, la saisie au clavier/souris, etc. C'est un excellent moyen de réellement gagner du temps de développement, car nous n'avons pas besoin d'ajouter toutes ces fonctionnalités standards nous-mêmes, il suffit de les utiliser et de les utiliser (merci encore pour vos efforts).
J'aime la bibliothèque VueUse car elle donne vraiment la priorité aux développeurs lorsqu'ils décident des utilitaires à fournir, et c'est une bibliothèque bien entretenue car elle suit la version actuelle de Vue.
Quelles sont les méthodes pratiques de VueUse ?
Si vous souhaitez voir la liste complète de chaque utilitaire, il est recommandé de consulter la documentation officielle. Mais pour résumer, il existe 9 types de fonctions dans VueUse.
Animation - Contient des transitions, des délais d'attente et des fonctionnalités de synchronisation faciles à utiliser
Navigateur - Peut être utilisé avec différents contrôles d'écran, presse-papiers, préférences et plus encore
Composant (Composant) - Fournit des abréviations pour différents méthodes des composants
Sensors (Sensors) - Utilisé pour écouter différents événements DOM, événements d'entrée et événements réseau
State (State) - Gérer l'état de l'utilisateur (stockage global, local, stockage de session)
Utilitaire (méthode utilitaire) - différentes méthodes utilitaires, telles que les getters, les conditions, la synchronisation des références, etc.
Watch -- Types d'observateurs plus avancés tels que les observateurs pouvant être mis en pause, les observateurs interrompus et les observateurs conditionnels
Autres - Différents types de fonctionnalités pour les événements, les WebSockets et les Web Workers
Installez Vueuse dans le projet Vue
L'une des plus grandes fonctionnalités de VueUse est qu'il est compatible avec Vue2 et Vue3 avec un seul package !
Il existe deux options pour installer VueUse : npm ou CDN
npm i @vueuse/core # yarn add @vueuse/core
<script src="https://unpkg.com/@vueuse/shared"></script> <script src="https://unpkg.com/@vueuse/core"></script>
NPM recommandé car il est plus facile à comprendre, mais si nous utilisons un CDN, il peut être accessible via window.VueUse.
En utilisant npm, vous pouvez obtenir la méthode souhaitée grâce à la déconstruction :
import { useRefHistory } from '@vueuse/core'useRefHistory suit les modifications dans les données réactives
useRefHistory suit chaque modification apportée à la référence et la stocke dans un tableau. Cela nous permet de fournir facilement des capacités d'annulation et de rétablissement à nos applications.
Regardons un exemple dans lequel nous créons une zone de texte qui peut être annulée
La première étape consiste à créer nos composants de base sans VueUse - en utilisant ref, textarea et pour annuler et refaire, constitués de boutons.
<template>
<p>
<button> Undo </button>
<button> Redo </button>
</p>
<textarea v-model="text"/>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<style scoped>
button {
border: none;
outline: none;
margin-right: 10px;
background-color: #2ecc71;
color: white;
padding: 5px 10px;;
}
</style>Ensuite, importez useRefHistory, puis extrayez l'historique, annulez et rétablissez les attributs du texte via useRefHistory.
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)Chaque fois que notre référence change et que l'attribut history est mis à jour, un écouteur sera déclenché.
Afin de voir ce que fait la couche inférieure, nous imprimons le contenu de l'historique. Et appelez les fonctions d'annulation et de rétablissement lorsque vous cliquez sur le bouton correspondant.
- {{ entry }}
Il existe également différentes options pour ajouter plus de fonctionnalités à cette fonctionnalité. Par exemple, nous pouvons explorer les objets réactifs et limiter le nombre d'enregistrements d'historique comme celui-ci.
const { history, undo, redo } = useRefHistory(text, {
deep: true,
capacity: 10,
})onClickOutside off modal
onClickOutside détecte tout clic en dehors d'un élément. D'après mon expérience, le cas d'utilisation le plus courant de cette fonctionnalité consiste à fermer n'importe quel modal ou popup.
Généralement, nous souhaitons que notre modal bloque le reste de la page Web pour attirer l'attention de l'utilisateur et limiter les erreurs. Cependant, s’ils cliquent en dehors du modal, nous voulons qu’il se ferme.
Pour ce faire, il n'y a que deux étapes.
Créez une référence de modèle pour l'élément que vous souhaitez détecter
Utilisez cette référence de modèle pour exécuter onClickOutside
Il s'agit d'un composant simple qui utilise la fenêtre contextuelle onClickOutside.
<template>
<button @click="open = true"> Open Popup </button>
<div class="popup" v-if='open'>
<div class="popup-content" ref="popup">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquid autem reiciendis eius accusamus sequi, ipsam corrupti vel laboriosam necessitatibus sit natus vero sint ullam! Omnis commodi eos accusantium illum?
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
const open = ref(false) // state of our popup
const popup = ref() // template ref
// whenever our popup exists, and we click anything BUT it
onClickOutside(popup, () => {
open.value = false
})
</script>
<style scoped>
button {
border: none;
outline: none;
margin-right: 10px;
background-color: #2ecc71;
color: white;
padding: 5px 10px;;
}
.popup {
position: fixed;
top: ;
left: ;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: rgba(, , , 0.1);
}
.popup-content {
min-width: 300px;
padding: 20px;
width: 30%;
background: #fff;
}
</style>useVModel simplifie la liaison du modèle V.
Un cas d'utilisation courant pour les développeurs Vue consiste à créer une liaison de modèle V personnalisée pour un composant. Cela nécessite également que notre composant accepte une valeur comme accessoire. Chaque fois que cette valeur est modifiée, notre composant émettra un événement de mise à jour vers la classe parent.
La fonction useVModel simplifie cela en utilisant simplement la syntaxe de référence standard. Disons que nous avons une saisie de texte personnalisée et que nous essayons de créer un modèle en V pour la valeur de sa saisie de texte. Normalement, nous devons accepter un accessoire de valeur, puis émettre un événement de changement pour mettre à jour la valeur des données dans le composant parent.
Au lieu d'utiliser ref et d'appeler props.value et update:value, nous pouvons utiliser useVModel et le traiter comme une référence normale. Cela permet de réduire le nombre de syntaxes différentes dont nous devons nous souvenir
!<template>
<div>
<input
type="text"
:value="data"
@input="update"
/>
</div>
</template>
<script>
import { useVModel } from '@vueuse/core'
export default {
props: ['data'],
setup(props, { emit }) {
const data = useVModel(props, 'data', emit)
console.log(data.value) // equal to props.data
data.value = 'name' // equal to emit('update:data', 'name')
const update = (event) => {
data.value = event.target.value
}
return {
data,
update
}
},
}
</script>每当需要访问value时，我们只需调用.value，useVModel将从我们的组件 props 中给我们提供值。而每当改变对象的值时，useVModel 会向父组件发出一个更新事件。
下面是父组件的一个简单示例
<template>
<div>
<p> {{ data }} </p>
<custom-input
:data="data"
@update:data="data = $event"
/>
</div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
import { ref } from 'vue'
export default {
components: {
CustomInput,
},
setup () {
const data = ref('hello')
return {
data
}
}
}使用 intersectionobserver 跟踪元素的可见性
当确定两个元素是否重叠时，useIntersectionObserver 是非常强大的。这方面的一个很好的用例是检查一个元素在视口中是否当前可见。
基本上，它检查目标元素与根元素/文档相交的百分比。如果这个百分比超过了某个阈值，它就会调用一个回调，确定目标元素是否可见。
useIntersectionObserver提供了一个简单的语法来使用IntersectionObserver API。我们所需要做的就是为我们想要检查的元素提供一个模板ref。
默认情况下，IntersectionObserver将以文档的视口为根基，阈值为0.1--所以当这个阈值在任何一个方向被越过时，我们的交集观察器将被触发。
示例：我们有一个假的段落，只是在我们的视口中占据了空间，目标元素，然后是一个打印语句，打印我们元素的可见性。
<template>
<p> Is target visible? {{ targetIsVisible }} </p>
<div class="container">
<div class="target" ref="target">
<h1>Hello world</h1>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
const targetIsVisible = ref(false)
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
},
)
return {
target,
targetIsVisible,
}
},
}
</script>
<style scoped>
.container {
width: 80%;
margin: auto;
background-color: #fafafa;
max-height: 300px;
overflow: scroll;
}
.target {
margin-top: 500px;
background-color: #1abc9c;
color: white;
padding: 20px;
}
</style>运行后，对应的值会更新：
我们还可以为我们的 Intersection Observer 指定更多的选项，比如改变它的根元素、边距（计算交叉点时对根的边界框的偏移）和阈值水平。
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
},
{
// root, rootMargin, threshold, window
// full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts
threshold: 0.5,
}
)同样重要的是，这个方法返回一个 stop 函数，我们可以调用这个函数来停止观察交叉点。如果我们只想追踪一个元素在屏幕上第一次可见的时候，这就特别有用。
在这段代码中，一旦targetIsVisible被设置为true，observer 就会停止，即使我们滚动离开目标元素，我们的值也会保持为 true 。
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
if (isIntersecting) {
stop()
}
},
)使用 useTransition 做个数字加载动画
useTransition是整个VueUse库中我最喜欢的函数之一。它允许我们只用一行就能顺利地在数值之间进行过渡。
我们可以通过三个步骤来做到这一点。
初始化一个 ref 变量 count ，初始值为 0
使用 useTransition 创建一个变量 output
改变 count 的值
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const count = ref(0)
const output = useTransition(count , {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
count.value = 5000
</script>然后在 template 中显示 output 的值：
<template>
<h2>
<p> Join over </p>
<p> {{ Math.round(output) }}+ </p>
<p>Developers </p>
</h2>
</template>
<script setup>
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const count = ref(0)
const output = useTransition(count, {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
count.value = 5000
</script>我们还可以使用useTransition 转换整个数字数组。 使用位置或颜色时，这非常有用。 使用颜色的一个很好的技巧是使用计算的属性将RGB值格式化为正确的颜色语法。
<template>
<h2 :style="{ color: color } "> COLOR CHANGING </h2>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref([, , ])
const output = useTransition(source, {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
const color = computed(() => {
const [r, g, b] = output.value
return `rgb(${r}, ${g}, ${b})`
})
source.value = [255, , 255]
</script>总结
这不是VueUse的完整指南。这些只是我平常比较常用的函数，还有很多好用的函数，大家可以自行到官网去学习使用。
【相关推荐：《vue.js教程》】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!