VueUse使用实例分析
今天小编给大家分享一下VueUse使用实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
成都创新互联公司是一家集网站建设,虞城企业网站建设,虞城品牌网站建设,网站定制,虞城网站建设报价,网络营销,网络优化,虞城网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
Vueuse拥有大量出色的组合。但是量太大,要把它们全部看完可能会让人抓不到重点。下面来介绍一些有用到的组合,它们如下:
onClickOutside
useFocusTrap
useHead
useStorage
useVModel
useImage
useDark
1、 onClickOutside
检测点击非常简单。但是,当点击发生在一个元素之外时,如何检测?那就有点棘手了。但使用VueUse中的 onClickOutside 组件就很容易能做到这点。代码如下:
Hey there, here's some text.
Please don't click in here.
为想要追踪的 container
元素创建一个 ref
:
const container = ref(null);
然后我们用元素上的ref
属性把它变成一个模板ref
。
Please don't click in here.
有了容器的ref
之后,我们把它和一个处理程序一起传递给onClickOutside
组合。
onClickOutside( container, () => alert('Good. Better to click outside.') )
这种可组合对于管理窗口或下拉菜单很有用。当用户点击下拉菜单以外的地方时,你可以关闭它。
模态框也通常表现出这种行为。
2、useFocusTrap
为了拥有可访问的应用程序,正确地管理焦点非常重要。
没有什么比不小心在模态后面加tab,并且无法将焦点返回到模态更糟糕的了。这就是焦点陷阱的作用。
将键盘焦点锁定在一个特定的DOM元素上,不是在整个页面中循环,而是在浏览器本身中循环,键盘焦点只在该DOM元素中循环。
下面是一个使用VueUse的useFocusTrap
的例子:
将immediate
设置为true
,页面加载时,焦点将被放置在 container
元素中。然后,就不可能在该容器之外的地方做标签。
到达第三个按钮后,再次点击tab
键将回到第一个按钮。
就像onClickOutside
一样,我们首先为 container
设置了模板ref
。
const container = ref(null)
然后我们把这个模板引用传递给useFocusTrap
组合。
useFocusTrap(container, { immediate: true });
immediate
选项将自动把焦点设置到容器内第一个可关注的元素上。
3、useHead
VueUse为我们提供了一种简单的方法来更新我们应用程序的 head 部分--页面 title、scripts和其他可能放在这里的的东西。
useHead 组合要求我们首先设置一个插件
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')
一旦我们使用了这个插件,我们就可以随心所欲地更新标题部分。在这个例子中,我们将在一个按钮上注入一些自定义样式。
首先,我们创建一个ref
来表示我们要注入的样式,默认为空:
const styles = ref('');
第二,设置 useHead
将样式注入到页面中。
useHead({ // Inject a style tag into the head style: [{ children: styles }], })
然后,添加注入这些样式的方法:
const injectStyles = () => { styles.value = 'button { background: red }' }
当然,我们并不局限于注入样式。我们可以在我们的中添加任何这些内容:
title
meta tags
link tags
base tag
style tags
script tags
html attributes
body attributes
4、useStorage
useStorage
真的很酷,因为它会自动将 ref
同步到 localstorage,事例如下:
第一次加载时, input
显示 'Hello, world!',但最后,它会显示你最后在 input
中输入的内容,因为它被保存在localstorage中。
除了 localstorage,我们也可以指定 sessionstorage
:
const input = useStorage('unique-key', 'Hello, world!', sessionStorage)
当然,也可以自己实现存储系统,只要它实现了StorageLike
接口。
export interface StorageLike { getItem(key: string): string | null setItem(key: string, value: string): void removeItem(key: string): void }
5、useVModel
v-model
指令是很好的语法糖,使双向数据绑定更容易。
但useVModel
更进一步,摆脱了一堆没有人真正想写的模板代码。
在这个例子中,我们首先定义了要附加到v-model
上的 props:
const props = defineProps({ count: Number, })
然后我们发出一个事件,使用v-model
的命名惯例update:
:
const emit = defineEmits(['update:count'])
现在,我们可以使用useVModel
组合来将 prop
和事件绑定到一个ref
。
const count = useVModel(props, 'count', emit)
每当 prop 发生变化时,这个 count
就会改变。但只要它从这个组件中被改变,它就会发出update:count
事件,通过v-model
指令触发更新。
我们可以像这样使用这个 Input
组件。
{{ count }}
这里的count ref
是通过v-model
绑定与 Input
组件内部的count ref
同步的。
6、useImage
随着时间的推移,web应用中的图像变得越来越漂亮。我们已经有了带有srcset
的响应式图像,渐进式加载库,以及只有在图像滚动到视口时才会加载的库。
但你知道吗,我们也可以访问图像本身的加载和错误状态?
我以前主要通过监听每个HTML元素发出的onload
和onerror
事件来做到这一点,但VueUse给我们提供了一个更简单的方法,那就是useImage
组合。
Couldn't load the image :(
第一步,通过useImage
设置图片的src
:
const { isLoading, error } = useImage({ src: url })
获取它返回的isLoading
和error
引用,以便跟踪状态。这个组合在内部使用useAsyncState
,因此它返回的值与该组合的值相同。
安排好后,useImage
就会加载我们的图像并将事件处理程序附加到它上面。
我们所要做的就是在我们的模板中使用相同的URL来使用该图片。由于浏览器会重复使用任何缓存的图片,它将重复使用由useImage
加载的图片。
Couldn't load the image :(
在这里,我们设置了一个基本的加载和错误状态处理程序。当图片正在加载时,我们显示一个带有动画渐变的占位符。如果有错误,我们显示一个错误信息。否则我们可以渲染图像。
UseImage 还有其他一些很棒的特性!如果想让它成为响应式图像,那么它支持srcset
和sizes
属性,这些属性在幕后传递给img
元素。
如果你想把所有内容都放在模板中,还有一个无渲染组件。它的工作原理与组合的相同:
Oops!
7、暗黑模式 useDark
最近,每个网站和应用程序似乎都有暗黑模式。最难的部分是造型的改变。但是一旦你有了这些,来回切换就很简单了。
如果你使用的是Tailwind,你只需要在html元素中添加dark类,就可以在整个页面中启用。
然而,在黑暗模式和光明模式之间切换时,有几件事需要考虑。首先,我们要考虑到用户的系统设置。第二,我们要记住他们是否已经推翻了这个选择。
VueUse的useDark
组合性为我们把所有这些东西都包起来。默认情况下,它查看系统设置,但任何变化都会被持久化到localStorage
,所以设置会被记住。
Changes with dark/light mode.
黑暗模式的样式:
.dark .container { background: slategrey; color: white; border-color: black; } .dark button { background: lightgrey; color: black; } .dark body { background: darkgrey; }
如果你没有使用Tailwind,你可以通过传入一个选项对象来完全定制黑暗模式的应用方式。下面是默认的Tailwind:
const isDark = useDark({ selector: 'html', attribute: 'class', valueDark: 'dark', valueLight: '', })
也可以提供一个onChanged处理程序,这样你就可以编写任何你需要的Javascript。这两种方法使你可以使它与你已有的任何造型系统一起工作。
以上就是“VueUse使用实例分析”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
网页标题:VueUse使用实例分析
本文URL:http://azwzsj.com/article/piodse.html