Rumah > Artikel > hujung hadapan web > Kongsi lima fungsi VueUse yang berguna, mari gunakannya bersama-sama!
Kongsi lima fungsi VueUse yang berguna, mari gunakannya bersama-sama!
- 醉折花枝作酒筹ke hadapan
- 2021-08-13 17:39:163013semak imbas
VueUse ialah projek sumber terbuka oleh Anthony Fu Ia menyediakan pembangun Vue dengan sejumlah besar fungsi utiliti API Komposisi asas untuk Vue2 dan Vue3.
Ia mempunyai berdozen penyelesaian untuk kes penggunaan pembangun biasa seperti menjejaki perubahan ref, mengesan keterlihatan elemen, memudahkan corak Vue biasa, input papan kekunci/tetikus, dsb. Ini adalah cara yang bagus untuk benar-benar menjimatkan masa pembangunan, kerana kami tidak perlu menambahkan sendiri semua ciri standard ini, cuma gunakannya dan gunakannya (terima kasih sekali lagi atas usaha anda).
Saya suka pustaka VueUse kerana ia benar-benar mengutamakan pembangun apabila memutuskan utiliti yang hendak disediakan, dan ia merupakan perpustakaan yang diselenggara dengan baik kerana ia mengikuti versi semasa Vue.
Apakah kaedah praktikal VueUse?
Jika anda ingin melihat senarai lengkap setiap utiliti, adalah disyorkan untuk melihat dokumentasi rasmi. Tetapi untuk meringkaskan, terdapat 9 jenis fungsi dalam VueUse.
Animasi - termasuk peralihan yang mudah digunakan, tamat masa dan ciri pemasaan
Pelayar - boleh digunakan dalam kawalan Skrin, papan keratan, keutamaan, dan banyak lagi
Komponen - Menyediakan trengkas untuk kaedah komponen yang berbeza
Sensor - Digunakan untuk memantau acara DOM, acara input dan acara rangkaian yang berbeza
Negeri (negeri) - Urus keadaan pengguna (global, storan tempatan, storan sesi)
Utiliti (kaedah utiliti) - kaedah utiliti yang berbeza , seperti getter, syarat, penyegerakan ref, dsb.
Tonton --Jenis pemerhati yang lebih maju, seperti pemerhati yang boleh dijeda, pemerhati terbengkalai dan pemerhati bersyarat
Lain-lain - Jenis kefungsian yang berbeza untuk acara , WebSockets dan pekerja Web
Pasang Vueuse ke dalam projek Vue
VueUse Salah satu ciri terbesar ialah ia serasi dengan Vue2 dan Vue3 dengan hanya satu pakej
Terdapat dua pilihan untuk memasang VueUse: npm atau 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>
Adalah disyorkan untuk menggunakan NPM , kerana ia adalah lebih mudah difahami, tetapi jika kita menggunakan CDN, ia mungkin boleh diakses melalui tetingkap.VueUse.
Menggunakan npm, anda boleh mendapatkan kaedah yang diingini melalui penyahbinaan:
import { useRefHistory } from '@vueuse/core'useRefHistory untuk menjejaki perubahan dalam data responsif
useRefHistory menjejaki setiap perubahan yang dibuat pada rujukan dan menyimpannya dalam tatasusunan. Ini membolehkan kami menyediakan keupayaan buat asal dan buat semula dengan mudah kepada aplikasi kami.
Lihat contoh di mana kami membuat kawasan teks yang boleh dibuat asal
Langkah pertama ialah mencipta komponen asas kami tanpa VueUse - menggunakan ref, textarea dan butang untuk buat asal dan buat semula.
<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>Seterusnya, import useRefHistory, dan kemudian ekstrak sejarah, buat asal dan buat semula atribut daripada teks melalui useRefHistory.
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)Setiap kali rujukan kami berubah dan atribut sejarah dikemas kini, pendengar akan dicetuskan.
Untuk melihat apa yang dilakukan di peringkat bawah, kami mencetak kandungan sejarah. Dan panggil fungsi buat asal dan buat semula apabila butang yang sepadan diklik.
- {{ entry }}
Terdapat juga pilihan yang berbeza untuk menambahkan lebih banyak fungsi pada ciri ini. Sebagai contoh, kita boleh menelusuri objek reaktif dan mengehadkan bilangan rekod sejarah seperti ini.
const { history, undo, redo } = useRefHistory(text, {
deep: true,
capacity: 10,
})onClickOutside off modal
onClickOutside mengesan sebarang klik di luar elemen. Dalam pengalaman saya, kes penggunaan yang paling biasa untuk ciri ini ialah menutup sebarang modal atau pop timbul.
Lazimnya, kami mahu mod kami menyekat seluruh halaman web untuk menarik perhatian pengguna dan mengehadkan ralat. Walau bagaimanapun, jika mereka mengklik di luar modal, kami mahu ia ditutup.
Untuk melakukan ini, terdapat dua langkah sahaja.
Buat rujukan templat untuk elemen yang akan dikesan
Gunakan rujukan templat ini untuk menjalankan onClickOutside
Ini ialah komponen mudah yang menggunakan pop timbul 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 memudahkan pengikatan v-model.
Kes penggunaan biasa untuk pembangun Vue ialah mencipta pengikatan model v tersuai untuk komponen. Ini juga memerlukan komponen kami menerima nilai sebagai prop Apabila nilai ini diubah suai, komponen kami akan memancarkan peristiwa kemas kini kepada kelas induk.
Fungsi useVModel memudahkan ini kepada hanya menggunakan sintaks ref standard. Katakan kita mempunyai input teks tersuai dan cuba mencipta model v untuk nilai input teksnya. Biasanya, kita perlu menerima prop nilai dan kemudian mengeluarkan peristiwa perubahan untuk mengemas kini nilai data dalam komponen induk.
Daripada menggunakan ref dan memanggil props.value dan update:value, kita boleh menggunakan useVModel dan menganggapnya sebagai ref biasa. Ini membantu mengurangkan bilangan sintaks berbeza yang perlu kita ingat
<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教程》】
Atas ialah kandungan terperinci Kongsi lima fungsi VueUse yang berguna, mari gunakannya bersama-sama!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!