Summarize and share some of the best combinations of VueUse, come and collect them for use!-Vue.js-php.cn

Summarize and share some of the best combinations of VueUse, come and collect them for use!

青灯夜游

Release： 2022-07-20 20:40:30

forward

3549 people have browsed it

VueUse is an open source project by Anthony Fu that provides Vue developers with a number of basic Composition API utility functions for Vue 2 and Vue 3. This article will share with you some of the best VueUse combinations that I commonly use. I hope it will be helpful to everyone!

Summarize and share some of the best combinations of VueUse, come and collect them for use!

(Learning video sharing: vue video tutorial)

Vueuse has a large number of excellent combinations. But the volume is so large that trying to read them all might miss the point. Here are some useful combinations, they are as follows:

onClickOutside
useFocusTrap
useHead
useStorage
useVModel
##useImage
useDark

1. onClickOutside

Detecting clicks is very simple. But how do you detect when a click occurs outside an element? That's a little trickier. But it's easy to do this using the onClickOutside component in VueUse. The code is as follows:

Copy after login

Create a

ref for the container element you want to track:

const container = ref(null);

Copy after login

Then we use the

ref on the element Attribute turns it into a templateref.


  Please don't click in here.

Copy after login

Once we have the

ref of the container, we pass it along with a handler to the onClickOutside combination.

onClickOutside(
  container,
  () => alert('Good. Better to click outside.')
)

Copy after login

This composability is useful for managing windows or drop-down menus. You can close the drop-down menu when the user clicks outside of it.

Modal boxes often exhibit this behavior as well.

Example address: https://stackblitz.com/edit/vue3-script-setup-with-vite-18scsl?file=src/App.vue

2. useFocusTrap

In order to have an accessible application, it is important to manage focus correctly.

There is nothing worse than accidentally adding a tab after a modal and not being able to return focus to the modal. This is what the focus trap does.

Lock the keyboard focus on a specific DOM element. Instead of cycling through the entire page, it cycles through the browser itself. The keyboard focus only cycles through that DOM element.

The following is an example of using VueUse's

useFocusTrap:

Copy after login

Set

immediate to true when the page loads , focus will be placed on the container element. Then, it becomes impossible to label outside of that container.

After reaching the third button, clicking the

tab key again will return to the first button.

Just like

onClickOutside, we first set up the template ref for the container.

const container = ref(null)

Copy after login

Then we pass this template reference to the

useFocusTrap combination. The

useFocusTrap(container, { immediate: true });

Copy after login

immediate option will automatically set focus to the first focusable element within the container.

Example address: https://stackblitz.com/edit/vue3-script-setup-with-vite-eocc6w?file=src/App.vue

3. useHead

VueUse provides us with a simple way to update the head part of our application - page title, scripts and other content that may be placed here. thing.

The useHead combo requires us to first set up a plugin

import { createApp } from 'vue'
import { createHead } from '@vueuse/head'
import App from './App.vue'

const app = createApp(App)
const head = createHead()

app.use(head)
app.mount('#app')

Copy after login

Once we use this plugin we can update the header section however we want. In this example, we will inject some custom styles on a button.

Copy after login

First, we create a

ref to represent the style we want to inject. The default is empty:

const styles = ref('');

Copy after login

Second, set

useHead to Styles are injected into the page.

useHead({
  // Inject a style tag into the head
  style: [{ children: styles }],
})

Copy after login

Then, add methods to inject these styles:

const injectStyles = () => {
  styles.value = 'button { background: red }'
}

Copy after login

Of course, we are not limited to injecting styles. We can add any of these in our

:

title
meta tags
link tags
base tag

Example address: https://stackblitz.com/edit/vue3-script-setup-with-vite-szhedp?file=src/App.vue

4、useStorage

useStorage

is really cool because it will automatically synchronize ref to localstorage, for example:

Copy after login

第一次加载时， input 显示 'Hello, world!'，但最后，它会显示你最后在 input 中输入的内容，因为它被保存在localstorage中。

除了 localstorage，我们也可以指定 sessionstorage:

const input = useStorage('unique-key', 'Hello, world!', sessionStorage)

Copy after login

当然，也可以自己实现存储系统，只要它实现了StorageLike接口。

export interface StorageLike {
  getItem(key: string): string | null
  setItem(key: string, value: string): void
  removeItem(key: string): void
}

Copy after login

`5、useVModel`

v-model指令是很好的语法糖，使双向数据绑定更容易。

但useVModel更进一步，摆脱了一堆没有人真正想写的模板代码。

Copy after login

在这个例子中，我们首先定义了要附加到v-model上的 props:

const props = defineProps({
  count: Number,
})

Copy after login

然后我们发出一个事件，使用v-model的命名惯例update::

const emit = defineEmits(['update:count'])

Copy after login

现在，我们可以使用useVModel组合来将 prop和事件绑定到一个ref。

const count = useVModel(props, 'count', emit)

Copy after login

每当 prop 发生变化时，这个 count 就会改变。但只要它从这个组件中被改变，它就会发出update:count事件，通过v-model指令触发更新。

我们可以像这样使用这个 Input 组件。

Copy after login

这里的count ref是通过v-model绑定与 Input组件内部的count ref同步的。

事例地址：https://stackblitz.com/edit/vue3-script-setup-with-vite-ut5ap8?file=src%2FApp.vue

`6、useImage`

随着时间的推移，web应用中的图像变得越来越漂亮。我们已经有了带有srcset的响应式图像，渐进式加载库，以及只有在图像滚动到视口时才会加载的库。

但你知道吗，我们也可以访问图像本身的加载和错误状态？

我以前主要通过监听每个HTML元素发出的onload和onerror事件来做到这一点，但VueUse给我们提供了一个更简单的方法，那就是useImage组合。

Copy after login

第一步，通过useImage 设置图片的src:

const { isLoading, error } = useImage({ src: url })

Copy after login

获取它返回的isLoading和error引用，以便跟踪状态。这个组合在内部使用useAsyncState，因此它返回的值与该组合的值相同。

安排好后，useImage 就会加载我们的图像并将事件处理程序附加到它上面。

我们所要做的就是在我们的模板中使用相同的URL来使用该图片。由于浏览器会重复使用任何缓存的图片，它将重复使用由useImage加载的图片。

Copy after login

在这里，我们设置了一个基本的加载和错误状态处理程序。当图片正在加载时，我们显示一个带有动画渐变的占位符。如果有错误，我们显示一个错误信息。否则我们可以渲染图像。

UseImage 还有其他一些很棒的特性!如果想让它成为响应式图像，那么它支持srcset和sizes属性，这些属性在幕后传递给img元素。

如果你想把所有内容都放在模板中，还有一个无渲染组件。它的工作原理与组合的相同:

Copy after login

事例：https://stackblitz.com/edit/vue3-script-setup-with-vite-d1jsec?file=src%2FApp.vue

`7、暗黑模式 useDark`

最近，每个网站和应用程序似乎都有暗黑模式。最难的部分是造型的改变。但是一旦你有了这些，来回切换就很简单了。

如果你使用的是Tailwind，你只需要在html元素中添加dark类，就可以在整个页面中启用。

Copy after login

然而，在黑暗模式和光明模式之间切换时，有几件事需要考虑。首先，我们要考虑到用户的系统设置。第二，我们要记住他们是否已经推翻了这个选择。

VueUse的useDark组合性为我们把所有这些东西都包起来。默认情况下，它查看系统设置，但任何变化都会被持久化到localStorage，所以设置会被记住。

Copy after login

黑暗模式的样式:

.dark .container {
  background: slategrey;
  color: white;
  border-color: black;
}

.dark button {
  background: lightgrey;
  color: black;
}

.dark body {
  background: darkgrey;
}

Copy after login

如果你没有使用Tailwind，你可以通过传入一个选项对象来完全定制黑暗模式的应用方式。下面是默认的Tailwind:

const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: '',
})

Copy after login

也可以提供一个onChanged处理程序，这样你就可以编写任何你需要的Javascript。这两种方法使你可以使它与你已有的任何造型系统一起工作。

`Summary`

Vueuse has a huge library with great combinations, and we've only covered a small part of it here. I highly recommend you take some time to explore the documentation and see all that is available. This is a great resource that will save you from a lot of boilerplate code and constantly reinventing the wheel.

[Related video tutorial recommendations: vuejs entry tutorial, web front-end entry]

The above is the detailed content of Summarize and share some of the best combinations of VueUse, come and collect them for use!. For more information, please follow other related articles on the PHP Chinese website!