vueuse

vue vueUse利用useInfiniteScroll API 实现虚拟滚动

前言中文网地址：开始使用|VueUse中文网官网地址：VueUse元素的无限滚动。useInfiniteScroll详细解析地址效果组件封装
小白小白从不日白·2024-09-14 22:23

4.4 Sensors -- useDevicePixelRatio

4.4Sensors–useDevicePixelRatiohttps://vueuse.org/core/useDevicePixelRatio/作用动态追踪devicePixelRatio的变化。
weixin_mouren·2024-09-05 09:05

4.2 Sensors -- onKeyStroke

4.2Sensors–onKeyStrokehttps://vueuse.org/onKeyStroke作用监听键盘按键是否被点击官方示例监听一个按键import{onKeyStroke}from'@vueuse
weixin_mouren·2024-09-05 09:35

1.4 State -- useStorage

1.4State–useStoragehttps://vueuse.org/core/useStorage/作用创建一个能访问和修改LocalStorageorSessionStorage的响应式变量。
weixin_mouren·2024-09-05 09:05

4.5 Sensors -- useElementByPoint

4.5Sensors–useElementByPointhttps://vueuse.org/core/useElementByPoint/作用根据鼠标位置，实时返回鼠标所在的dom元素。
weixin_mouren·2024-09-05 08:57

3.9 Browser -- usePreferredLanguages

3.9Browser–usePreferredLanguageshttps://vueuse.org/usePreferredLanguages作用它为web开发人员提供有关用户首选语言的信息。
weixin_mouren·2024-09-03 01:08

3.7 Browser -- useMediaQuery

3.7Browser–useMediaQueryhttps://vueuse.org/core/useMediaQuery/作用响应式的媒体查询。
weixin_mouren·2024-09-03 01:38

2.1 Elements -- useActiveElement

2.1Elements–useActiveElementhttps://vueuse.org/useActiveElement作用响应式的document.activeElement，配合一些特殊的标识
weixin_mouren·2024-09-03 01:35

Vue3项目中页面滚动加载更多的原生操作

效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue使用了vueuse中的useIntersectionObserve
是要开心的婷婷呀~·2024-08-31 08:53

MyPrint打印设计器（二）vue3 实现历史步骤记录

通过vueuse中的useManualRefHistory，快速实现历史操作记录所需环境：vue实现目标历史记录撤销重做记录覆盖代码原理把键盘监听事件挂载在document上，当键盘事件发生时，依次匹配事先订阅的快捷键
那叫一个优雅·2024-08-29 04:37

拖拽按钮: 如何区分点击和拖拽事件 (vueuse实现)

问题：使用vueuse的useDraggable去拽按钮时会触发点击事件，即使设置阻止默认事件还是没用。方案1：判断拖拽时长判断拖拽时长，如果大于点击的时间秒数，则被认为是拖拽。
白桃与猫·2024-02-08 15:11

基于vueuse分装WebSocket

基于vueuse分装WebSocketimport{useWebSocket}from'@vueuse/core'exportinterfaceIWebSocketConfig{wsUrl:stringisHeartbeat
小木木爸·2024-02-08 10:05

自定义指令实现图片懒加载

mounted(el,binding){//el是绑定的img元素，binding.value是图片srcconsole.log(el,binding.value)}})绑定元素：判断图片是否进入视口直接使用vueuse
小秀_heo·2024-02-07 00:37

element ui表格手写拖动排序

效果图：思路：重点在于：拖动行到某一位置，拿到这一位置的标识，数据插入进这个位置vueuse的拖拽hooksuseDraggable可以用；html5drag能拖动行元素；mounsedown、mounsemove
摸鱼少侠梁先生·2024-02-06 14:31

Vue 设置导航吸顶

在浏览器上下滚动的时候，如何距离的顶部的距离大于78px,吸顶显示，小于78px则隐藏工具类安装：npmi@vueuse/core创建吸顶页面fixed.vue：//vueUseimport{useScroll
前端怎么个事·2024-01-26 23:50

vue3-吸顶导航

吸顶导航当滑动滚轮大于78px时，触发show样式//vueUse//y为滑动滚轮的距离import{useScroll}from'@vueuse/core'const{y}=useScroll(window
是老虎是狮子不是大象·2024-01-22 17:59

vue3-图片懒加载指令实现

有些网站页面比较长，用户不一定访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求指令用法//在图片img身上绑定指令，该图片只有正式进入到视口区域时才会发送图片网络请求使用Vueuse
是老虎是狮子不是大象·2024-01-22 17:28

You may need an appropriate loader to handle this file type, currently no loaders are configured to

原因：“@vueuse/head”:“^0.7.5”,指的是version与version兼容，与2.3.1版本兼容，相当于2.X.X,即>=2.3.1returntemplate.replace("%
昵称老重复·2024-01-17 07:19

原生 js 监测 某个 DOM进入 可视区

就是这个IntersectionObserver对象，MDN中有介绍，vue3版本的vueuse/core其实也是根据这个封装的Documentulli{height:70px;margin-top:20px
嘤嘤怪呆呆狗·2024-01-16 17:14

vueUse插件--useDraggable的使用方法以及案例（vue3）

vueUse地址：https://vueuse.org/core/useDraggable/useDraggable让一个元素变成可拖拽官方给出的demo，感兴趣的可以去VueUse官网看看import
汤姆丁1111·2024-01-13 11:27

实现导航栏吸顶操作

一、使用VueUse插件//安装npmi@vueuse/core二、点击搜索useScroll2.1搜索结果如图三、使用//这是示例代码import{useScroll}from'@vueuse/core'constel
Pinia_0819·2024-01-11 02:20

Vue3 结合typescript 组合式函数

在App.vue文件中实现鼠标点击文件，显示坐标值第一种方法第二种方法：组合式函数结果：官网推荐组合函数：https://vueuse.org
土井塔克树1412·2024-01-03 11:55

vue3-11

router\a6router.ts文件import{createRouter,createWebHashHistory}from'vue-router'import{useStorage}from'@vueuse
敲代码的翠花·2024-01-03 05:07

vue3数据懒加载 列表滚动加载 可能是全网最容易理解的

因为组件是自己写的，翻了下组件库，没有这个功能，就自己写一个首先在hooks里面写一个ts文件，我这取名叫做use-lazy-data.tsimport{useIntersectionObserver}from'@vueuse
爱学习的小康·2023-12-28 09:44

Vue在Computed计算属性下，获取Promise then的返回值无效为空

解决方案：Vueuse库提供了异步计算属性的钩子，使用Vueuse库的computedAsync即可。
奋斗的烧饵块·2023-12-24 09:30

vue组件prop变量和内部变量数据格式不一样时,变量同步prop值,变量改变通知父组件.

props,当对其进行封装,想对该属性进行双向绑定时,可以采用computed的方式包一层get(){returnprops.xxx},set(v)=>{emit('update:xxx',v)},或者使用vueuse
新时代的弩力·2023-12-22 09:57

vue3自定义指令实现图片懒加载

在电商项目中，图片资源如果初始化就全部加载不仅会影响页面的性能还会造成服务器多余的开销，实在没有必要，所以可以使用图片懒加载的方式来实现什么是懒加载：指的是在设定的条件下之后再执行加载资源的处理注：本文就不介绍VueUse
zou-dev·2023-12-17 18:39

适配滑动宽度（Vant）

@vueuse/core介绍：文档https://vueuse.org/core/useWindowSize/是一个基于组合API封装的库，提供了一些网站开发常用的工具函数，切得到的是响应式数据例如：在
愿➣·2023-12-15 23:28

VueUse工具库

VueUse是一个基于CompositionAPI的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的
...lemon_...·2023-12-14 15:25

VueUse使用

VueUse使用useClipboard---复制功能链接:VueUse中文文档useClipboard—复制功能copy(需要拷贝的内容)copied是否拷贝成功，默认1.5s恢复状态isSupported
真的想不出名儿·2023-12-05 20:19

超赞！让vue开发效率翻倍的工具分享

分享一个很实用的工具库VueUse，它是基于VueCompositionApi，也就是组合式API。支持在Vue2和Vue3项目中进行使用，据说是目前世界上Star最高的同类型库之一。
白日梦批发商·2023-12-05 20:39

vue3-10

动态路由与菜单路由文件a6router.tsimport{createRouter,createWebHashHistory}from"vue-router";import{useStorage}from"@vueuse
敲代码的翠花·2023-11-30 05:50

数据懒加载（Vue3）

导入资源导入用到的属性useIntersectionObserver函数我们可以使用`@vueuse/core`中的`useIntersectionObserver`来实现监听进入可视区域行为，但是必须配合
沃德麻鸭·2023-11-30 01:22

Vue3:利用vueusejs键盘绑定

VueUse键盘事件名onKeyDown-别名onKeyStroke(key,handler,{eventName:‘keydown’})onKeyPressed-别名onKeyStroke(key,handler
西魏陶渊明·2023-11-27 06:37

vue3接口、数据懒加载,回滚不重复加载

vxe-table构成的组件、子组件为table的某一列，这一列的数据通过接口返回，有多少条表格数据就会请求多少次接口，为了提升性能，所以采用接口懒加载，但是需要在回滚的时候不重复请求或者加载数据使用@vueuse
₍•ʚ•₎呀呀·2023-11-24 11:53

vue3中的组件数据懒加载useIntersectionObserver

我们可以使用@vueuse/core中的useIntersectionObserver来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。
haodanzj·2023-11-21 08:30

useVModel工具函数

大致步骤：实现组件本身的选中与不选中效果实现组件的v-model指令改造成@vueuse/core的函数写法）实现双向绑定vue3.0中v-model会拆解成属性modelValue和事件update:
haodanzj·2023-11-21 08:30

vueuse是什么

VueUse是什么VueUse不是Vue.use，它是为Vue2和3服务的一套VueCompositionAPI的常用工具集，是目前世界上Star最高的同类型库之一。
山抹微云_9c0c·2023-11-20 10:25

VueUse使用之useStorage

useStorage响应式Localstorage/SessionStorage使用import{useStorage}from'@vueuse/core'//bindconststate=useStorage
默默0805·2023-11-16 15:55

pinia中使用@vueuse/core库的useStorage做数据的持久化存储

useStorage(响应式本地/会话存储)官网示例地址参数说明/***@param{string}key键名(必填)*@param{string|number|boolean|object|null}defaults:默认值(必填)*@param{StorageLike(localStorage|sessionStorage)|undefined}storage默认为localStorage*@
大佩梨·2023-11-16 15:50

Element Plus＜2.2.0＞版本终于支持暗黑模式啦~

cssimport'element-plus/theme-chalk/dark/css-vars.css';组件中使用html暗黑模式jsimport{useDark,useToggle}from'@vueuse
Colesyn L.·2023-11-16 12:40

5.vueuse-useDark实现暗黑主题及浅亮主题及Element-Plus暗黑模式

useDark的原理是修改元素上的属性值(默认在html标签上添加class=“dark”)，不涉及具体样式的修改，用户可以灵活的定义dark的样式。官方文档1.基础使用方式toggleDark()">{{isDark?'dark':'light'}}constisDark=useDark();consttoggleDark=useToggle(isDark);//dark样式示例//(推荐写在全
派大星氵·2023-11-16 12:09

Electron 实现切换暗_亮模式与主题

清单模板基于electron-vite-vuevue3+ts+vite组件库element-plushooks库vueuse、useElementPlusTheme初始化工程使用electron-vite
赵忠洋·2023-11-16 12:07

element plus 结合useDark方式实现动态切换暗黑模式

要结合Vueuse中的useDark方法实现ElementPlus组件库的动态切换暗黑模式，可以按照以下步骤进行：安装Vueuse库，包括useDark方法。
RZL_01·2023-11-16 12:37

Vue3使用Elemenet plus实现暗黑模式

实现步骤：1.安装elemenetplus，@vueuse/coreyarnadd@vueuse/coreyarnaddelement-plusnpminstall@vueuse/corenpminstallelement-plus
风乘雨·2023-11-16 12:07

vue3 - Element Plus暗黑模式适配、切换及自定义颜色

GitHubDemo地址在线预览ElementPlus2.2.0版本开始支持暗黑模式，启用方式参考ElementPlus官方文档-暗黑模式demo通过ElementPlus和VueUse的useDark
西半球·2023-11-16 12:36

VueUse、View Transitions API实现暗黑模式主题动画切换效果

VueUse、ViewTransitionsAPI实现暗黑模式主题动画切换效果前言ViewTransitionsAPI兼容版本VueUse正题效果安装代码作者GitHub：https://github.com
Thetimezipsby·2023-11-09 15:53

使用useDark会影响el-switch的动画效果

先上个示例import{useDark,useToggle}from'@vueuse/core'constisDark=useDark()consttoggleDark=useToggle(isDark
m0_73471740·2023-11-08 18:37

Vue3 实现 clipboard 复制功能

一个很小的交互功能，网上搜了一下有一个vue3-clipboard直接支持vue3，到github仓库看了下，原作者已经不维护这个项目了：推荐使用vueuse自带的useclipboard功能，由vue
三劫散仙·2023-11-03 08:49

Vue Router使用VueUse更改标签页名称的工具函数

进入正题安装npmi@vueuse/coreorpnpmi@vueuse/coreoryarnadd@vueuse/corerouter/helper.jsimport{useTitle}from'@vueuse
Thetimezipsby·2023-11-01 16:05
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他