![](https://img-blog.csdnimg.cn/eec01b9c3d7e48e1ae1cfbe0828bd4f9.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue2&vue3 常用示例专栏
文章平均质量分 81
vue/vue3 常用示例专栏
范特西是只猫
自律。
展开
-
vue3使用vue-i18n实现国际化
vue-i18n。原创 2024-04-01 17:31:52 · 1329 阅读 · 1 评论 -
vue3 ts问题 找不到模块“@/views/home/index.vue”或其相应的类型声明。
今天帮同事看了一个问题,他尝试用vite+vue3+ts+pinia创建项目,结果刚上来就遇到这么一个问题。原创 2024-05-22 16:42:32 · 851 阅读 · 0 评论 -
vue3 使用css实现一个弧形选中角标样式
在前端开发中,ui同学经常会设计这样的样式,用于区分选中的状态下面抽空简单些了一下,记录下,后面直接复制用。原创 2024-05-22 11:05:55 · 1395 阅读 · 0 评论 -
vue3 使用unplugin-auto-import自动导入模块
模块化已经是现代 Web 开发必不可少的开发方式,频繁引入依赖包是一个常见的操作。但是,手动引入依赖包往往繁琐,尤其是当依赖包数量较多时,会显著降低开发效率。插件,可以帮助我们在项目中,自动导入常用的使用的第三方库的 API,就可以方便我们开发,提升开发效率。如果项目中使用eslintrc校验则需在vite.config.ts中的AutoImport添加配置。配置完成,运行项目会在根目录生成auto-import.d.ts文件。原创 2024-05-15 11:04:16 · 378 阅读 · 0 评论 -
vue项目中使用可选链 ( ?. )和双问号 ( ??)详解
配置完了,就可以在项目中使用可选链 (?. ) 和双问号 (?属性,如果不存在则设置默认值张三。文件添加 plugins 配置。原创 2022-10-10 18:31:11 · 9701 阅读 · 3 评论 -
vue3 van-list van-pull-refresh实现上拉加载,下拉刷新
用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。用该组件可实现上拉加载。两个变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将。事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将。此时可以发起异步操作并更新数据,数据更新完毕后,将。若数据已全部加载完毕,则直接将。// 如果返回数据为空,表示已加载完成。原创 2024-04-12 17:35:46 · 1836 阅读 · 0 评论 -
vue3 Pinia详解使用详解
通过创建数据仓库vuex 中的 state 在 pinia 中可以引用ref和reactive创建响应式数据vuex 中的getters在 pinia 中可以引用computed创建计算属性vuex 中的mutations和actions在 pinia 中就是普通函数, 同步异步都可以。原创 2024-04-11 15:01:39 · 1217 阅读 · 0 评论 -
vue结合纯CSS实现蛇形流程图/步骤条
** 偶数行旋转箭头,步骤倒序排列(使用transform交换位置) */隐藏多余的箭头(如果container设置了overflow。// 给每行最后一个步骤(除最后一行)添加向下的连接箭头。/** 可配置的参数 可以调整试试 */原创 2024-04-11 10:10:05 · 1409 阅读 · 1 评论 -
vue3 使用实现签到活动demo静态布局详解
虽然这个功能看上去比较简单,但是着仅仅是一个简单的demo,还要很多细节处理判断,比如当天已签到时,展示已签到图标当天未签到时,金币添加光圈旋转并且左右晃动动画签到天数为8天时候,进去后默认横向滚动到第8天动画实现。原创 2024-03-01 11:25:31 · 1177 阅读 · 1 评论 -
vue结合css动画animation实现下雪效果
GIF录屏文件太卡有点卡,实际是很丝滑的。原创 2024-01-17 10:37:47 · 1041 阅读 · 0 评论 -
vue结合el-table实现表格小计总计需求(summary-method)
/ 调用后端接口table数据。// 调用后端接口返回的总计数据。原创 2024-01-17 09:44:37 · 2139 阅读 · 0 评论 -
vue结合el-table实现表格行拖拽排序(基于sortablejs)
/ 需要在odEnd方法中处理原始eltable数据,使原始数据与显示数据保持顺序一致。// 略去数据,与前段代码一直。原创 2023-12-28 11:03:32 · 2129 阅读 · 0 评论 -
vue通过CSS实现手机充电效果
文章目录1. 实现效果2. index.vue 页面3. VabCharge.vue 组件代码1. 实现效果2. index.vue 页面<template> <div class="home"> <div class="body"> <vab-charge :end-val="endVal" :start-val="startVal" /> </div> </div></templa原创 2023-12-08 10:04:35 · 682 阅读 · 0 评论 -
vue实现与iframe实现页面数据通信
首页先搭建一个html页面和vue页面,在vue页面中,嵌入我们需要的iframe页面。原创 2023-12-05 15:56:04 · 1171 阅读 · 0 评论 -
vue使用lottie-web实现web动画
Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上.找到我们想要的动画,然后点击后,弹出窗口,点击下载,格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了。原创 2023-10-23 11:20:13 · 2064 阅读 · 0 评论 -
vue使用vue-type-writer实现打字机效果
Vue Type Writer是一个Vue.js 2打字机效果组件,支持像打字机一样模仿键入文本。原创 2023-09-20 17:49:47 · 2231 阅读 · 1 评论 -
vue使用relation-graph实现关系图谱
这是一个Vue关系图谱组件,可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱,可提供多种图谱布局,包括树状布局中心布局力学布局自动布局等。relation-graph 源码传送门。原创 2023-09-20 15:49:41 · 1477 阅读 · 0 评论 -
vue-contextmenu 实现鼠标右键弹出菜单列表
需求:实现 div 右键弹出菜单列表,点击列表项执行操作。原创 2020-02-27 00:47:50 · 14530 阅读 · 7 评论 -
vue使用qrcodejs2生成图形二维码
在vue项目开发中,经常需要生成二维码的需求(分享链接商品链接出入库商品扫码扫码登录等),这个示例中,我们用的这个插件来实现这个功能。原创 2020-08-07 18:36:17 · 5290 阅读 · 8 评论 -
vue3 实现自定义指令v-copy复制
在src中,新建directive文件夹,在次新建clipboard文件夹(copy指令),创建index.js书写 copy指令方法copy指令代码clipboard(copy指令)完整代码if (!throw new Error( '你须先运行 npm install `clipboard` --save ' )} else {text() {},action() {} )} )} )},} else {},} else {在directive文件夹中新建index.js。原创 2023-09-18 11:11:43 · 866 阅读 · 0 评论