Vue
文章平均质量分 54
vue.js工作&学习-知识点
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
Vue3中shallowRef和ref区别
在 Vue 3 中,ref和shallowRef都是用来创建响应式引用的工具,但它们之间存在一些关键的区别,主要在于它们如何处理对象的响应式特性。原创 2024-09-18 09:26:46 · 277 阅读 · 0 评论 -
Vue中使用Ant Design Vue-Modal对话框关闭弹窗时如何正确销毁子元素或者数据重置-destroyOnClose
设置这个属性是会销毁a-modal内的子元素,如果直接将页面结构内容写在弹窗里,弹窗加载直接就运行了,里面没有生命周期,可以采用弹窗结构(组件)和页面结构(组件)分离开然后设置destroyOnClose属性就能生效。如果一定要写在弹窗内,可以使用watch监听弹窗属性的变化,去动态改变内部的值。原创 2024-08-19 10:39:35 · 555 阅读 · 0 评论 -
Vue项目中手搓滑动校验模块-demo
Vue项目中手搓滑动校验模块原创 2024-08-05 10:14:03 · 299 阅读 · 0 评论 -
Vue3+Vite项目中使用tailwindcss-安装配置
确保你已经安装了 TypeScript 和 Tailwind CSS 的类型定义。原创 2024-08-05 10:13:45 · 480 阅读 · 0 评论 -
Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题
需要给 ios 和安卓 app 开发 h5 页面,在安卓上测试没有问题,但是 ios上点击输入框会导致页面缩放失败。原创 2024-07-29 09:02:00 · 380 阅读 · 0 评论 -
Vue-Request 帮你方便快捷的管理项目的请求接口
在以往的业务项目中,我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍,这是一项重复的工作,还需要确保团队的一致性。VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置,可以省去那些繁琐的任务,专注于业务核心的开发。是一个异步的请求函数,换句话说,你可以使用。当请求完成后,则将会根据请求结果来设定。来获取数据,然后返回一个。原创 2024-07-22 09:00:00 · 608 阅读 · 0 评论 -
vue-lazyload-项目图片懒加载-默认图片和加载失败图片展示
是一个 Vue 组件库,用于高效地渲染大量数据项,通过虚拟滚动来提升性能。它适用于长列表、网格、表格等场景。原创 2024-07-08 09:33:09 · 393 阅读 · 0 评论 -
vue-virtual-scroller-展示大量数据列表-虚拟列表展示优化
是一个 Vue 组件库,用于高效地渲染大量数据项,通过虚拟滚动来提升性能。它适用于长列表、网格、表格等场景。原创 2024-07-08 09:33:30 · 797 阅读 · 0 评论 -
fetch 封装 文件流下载进度监控-demo
在实际应用中,确保处理各种可能的异常情况,并提供用户反馈。此外,由于 CORS 策略,你可能无法从其他域获取。当读取到新的数据块时,进度回调会被调用,更新下载进度。读取完成后,它将所有数据块合并到一个。如果没有这个头,或者它的值不正确,那么进度指示将无法工作。头,除非其他域的服务器设置了适当的 CORS 头来允许这样做。函数接受一个文件 URL 和一个进度回调函数。API 下载文件并监控下载进度,你需要处理响应的。请注意,进度监控假设服务器发送了正确的。,最终生成一个可以下载的 URL。原创 2024-06-24 09:01:26 · 388 阅读 · 0 评论 -
Vue项目中实现骨架占位效果-demo
Vue项目中实现骨架占位效果-demo原创 2024-06-17 08:59:52 · 362 阅读 · 0 评论 -
Nodejs中循坏代码目录,提取代码中中文文本到文件中
Nodejs中循坏代码目录,提取代码中中文文本到文件中。原创 2024-05-30 11:45:57 · 286 阅读 · 0 评论 -
前端使用TradingView与websocket数据推送-demo
前端使用TradingView与websocket数据推送-demo。原创 2024-05-30 11:42:00 · 176 阅读 · 0 评论 -
vue测试环境打包文件不添加hash和生产环境打包不一致
测试环境打包出来文件和生产包有差异。原创 2024-05-27 12:23:21 · 651 阅读 · 0 评论 -
Vue2和Vue3中使用WebSocker-封装
在Vue.js中实现WebSocket的封装通常需要创建一个单独的模块或插件,以便在整个应用中使用WebSocket。下面是一个简单的例子,演示如何在Vue.js中封装WebSocket:首先,你可以创建一个名为例子中,我们创建了一个WebSocket实例,并在Vue插件中定义了一些生命周期事件的处理程序。我们使用Vue的$emit方法将收到的消息传递给Vue组件。然后,在Vue应用的入口文件(通常是main.js现在,在Vue组件中,你可以通过来访问WebSocket实例。原创 2024-05-20 11:15:53 · 1255 阅读 · 1 评论 -
axios封装各种请求方式-请求拦截器和响应拦截器
在Vue项目中使用axios时,封装请求方式、请求拦截器和响应拦截器是一个良好的实践。下面是一个简单的axios封装的例子,包括GET、POST、PUT、DELETE请求,以及请求拦截器和响应拦截器。原创 2024-04-22 10:54:08 · 353 阅读 · 0 评论 -
element-ui按需引入配置babel-preset-es2015 有问题?
报错 Error: Cannot find module ‘babel-preset-es2015。原创 2024-04-15 10:36:51 · 340 阅读 · 0 评论 -
el-upload上传组件二次封装-数据回显-demo
el-upload上传组件二次封装-数据回显原创 2024-04-10 14:15:43 · 432 阅读 · 0 评论 -
Vite+TS-Vue项目中找不到模块“@/xx”或其相应的类型声明-错误提示
找不到模块“@/components/pagination.vue”或其相应的类型声明。但是使用。原创 2024-03-26 10:52:01 · 930 阅读 · 0 评论 -
Vue上实现上下左右无缝滚动、单步滚动-demo
拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。控制滚动方向,可选值up,down,left,right。通过v-model控制动画滚动与停止,默认开始滚动。开启滚动的数据量,只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启。无缝滚动列表数据,组件内部使用列表长度。动画效果,可以传入贝塞尔曲线数值。动画循环次数,默认无限循环。原创 2024-03-25 11:20:27 · 1615 阅读 · 1 评论 -
Vue中使用轮播图滚动组件-swiperjs-demo
Vue中使用轮播图滚动组件-swiperjs-demo。原创 2024-03-21 10:38:34 · 407 阅读 · 0 评论 -
html+css+JavaScript实现左右滑动区域添加自定义按钮实现移动
选项可以使滚动动作更平滑,但这并不是在所有浏览器中都支持的。如果需要支持更多浏览器,可能需要使用polyfill或者自定义JavaScript动画来实现平滑滚动效果。要在一个左右可以滑动的容器中添加两个固定位置的按钮(左边一个、右边一个),你可以使用。,以便让按钮相对于该容器定位。这样,按钮就会随着容器一起滚动,但始终保持在容器的两侧。需要为按钮添加JavaScript来处理滚动动作。来定位按钮,同时为这个滑动容器设置。原创 2024-03-11 13:28:34 · 1220 阅读 · 0 评论 -
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
创建LottieAni文件。原创 2024-03-11 13:28:11 · 1881 阅读 · 0 评论 -
Vue中使用element-UI的el-date-picker-修改弹出窗样式
因为el的时间选择器弹出窗是挂载在body中的,并不是在元素下面挂载,所以需要使用提供的popper-class去选择修改样式。原创 2024-02-18 09:34:52 · 1055 阅读 · 0 评论 -
Vue中使用elementUI的DatePicker-IOS移动端会有表单t聚焦时页面放大效果-解决办法
可以像 width=600 这样设为确切的像素数,或者设为 device-width 特殊值,代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。相应的也有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。是可以看到 Web 内容的窗口区域,通常与渲染出的页面的大小不同,这种情况下,浏览器会提供滚动条以滚动访问所有内容。属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。属性控制允许用户缩放到的最小比例。原创 2024-01-29 10:23:20 · 571 阅读 · 0 评论 -
vue3使用css变量实现主题切换-黑白切换
vue3使用css变量实现主题切换-黑白切换原创 2024-01-18 15:32:13 · 600 阅读 · 0 评论 -
aws-S3上传文件配置-uploadS3.js
aws-S3上传文件配置-uploadS3.js。原创 2024-01-18 15:31:46 · 510 阅读 · 0 评论 -
Vue如何实现获取可视范围内的数据
通过使用 Intersection Observer API,你可以动态地观察元素是否在视口内,并根据需要更新相关的数据。在 Vue 中,要获取可视范围内的数据,你可以使用 Intersection Observer API 来观察元素是否在视口内,并根据需要更新数据。当目标元素进入视口时,会触发回调函数,我们可以在回调函数中更新数据或执行其他操作。当目标元素进入或离开视口时,你可以在回调函数中执行相应的逻辑来更新数据或执行其他操作。引用元素,你需要给目标元素添加。首先,你可以在 Vue 组件的。原创 2024-01-18 15:29:20 · 640 阅读 · 0 评论 -
JavaScript实现对数组按ABCD...依据给定顺序排序
首先,遍历数组中的每一个对象,取出其name属性的第一个字符,并将其转化为大写字母。然后,判断该字符是否在enList中,如果在则将其作为键名存储在结果对象中,如果不在则将其归为'#'键名中。首先,对于输入的列表进行排序,方法是先按照name属性进行排序,然后依次比较每一项的name属性的首字母和enList数组的元素,找到对应的enList下标,将这一项添加到对应的字母分类中。最后,遍历结果对象,将每一个键名对应的数组按字母顺序进行排序,并返回排序后的结果对象。原创 2024-01-18 15:26:34 · 976 阅读 · 0 评论 -
Vue2和Vue3中页面循环添加多个ref-dom
Vue2和Vue3中页面循环添加多个ref-dom。原创 2024-01-18 15:23:07 · 748 阅读 · 0 评论 -
Vue eslint 报错 error Component name “xxxx“ should always be multi-word-创建文件后的命名问题导致报错
组件命名的时候没按照 ESLint 的官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件App.vue以外,其他自定义组件命名要。ignores: ['Home', 'User'] //在这个数组中加入需要忽略的组件名。如:myHome.vue、userPwd.vue等等。经过上面的配置后,只需要重启项目即可。// 添加组件命名忽略规则。// 关闭组件命名规则。原创 2024-01-15 07:15:00 · 374 阅读 · 0 评论 -
Vue-页面解决浏览器自动填充input输入框账号密码
登录注册页面禁止浏览器自动填充账号密码。原创 2023-12-18 10:47:19 · 1360 阅读 · 0 评论 -
Vue3 setup 页面跳转监听路由变化调整页面访问位置
页面跳转后页面还是停留在上一个页面的位置,没有回到顶部。原创 2023-12-11 17:59:01 · 722 阅读 · 0 评论 -
Vue中Route切换-动态路由 | children 嵌套路由
Vue中Route切换-动态路由 | children 嵌套路由。原创 2024-04-15 10:37:14 · 357 阅读 · 0 评论 -
Vue项目中如何获取浏览器唯一标识Fingerprint2-浏览器指纹获取-demo
Vue项目中如何获取浏览器唯一标识Fingerprint2-浏览器指纹获取-demo。原创 2023-11-20 09:48:26 · 1061 阅读 · 0 评论 -
vue项目实现当用户用手机打开web端项目跳转到移动端的域名,反之跳转到移动端域名
实现当用户用手机打开web端项目时跳转到移动端的域名,反之跳转到web端域名,你可以使用JavaScript来检测用户的设备类型,并根据设备类型进行跳转。来获取用户的User-Agent信息,然后通过正则表达式判断是否是手机设备。标签中,或者在一个单独的JavaScript文件中,并在需要的页面中引入。这样当用户打开你的项目时,会根据设备类型自动跳转到对应的域名。将页面重定向到移动端的域名,否则重定向到web端的域名。可以将上述代码放在你的项目中适当的位置,例如在页面的。替换为你实际使用的域名。原创 2024-05-20 11:15:25 · 153 阅读 · 0 评论 -
Vue中实现当img图片加载失败的时候显示本地默认图片
Vue中实现当img图片加载失败的时候显示本地默认图片。原创 2024-05-31 10:35:12 · 98 阅读 · 0 评论 -
Vue实现table左右切换平滑过渡效果
【代码】Vue实现table左右切换平滑过渡效果。原创 2024-06-01 09:39:50 · 335 阅读 · 0 评论 -
vue中动态出来返回的时间秒数,在多少范围显示多少秒,多少范围显示分,小时等等
在Vue中,你可以使用计算属性(computed property)或过滤器(filter)来根据动态返回的时间秒数来显示不同的时间单位,比如秒、分、小时等等。在上面的代码中,我们定义了一个计算属性。小于86400,返回小时;的值来返回相应的时间单位。小于3600,返回分;小于60,返回秒;,它接受一个参数。原创 2024-01-04 15:08:15 · 669 阅读 · 0 评论 -
img标签如何将<svg></svg>数据渲染出来
元素的宽度和高度,以指定 SVG 图像的显示尺寸。你可以根据你的需求选择其中一种方法来使用。 数据编码为 Data URL,并将其作为 。 数据编码为 Data URL,并将其作为 。 元素来嵌入 SVG 数据。 属性值传递给它。同时,我们可以设置 。,并将 SVG 数据作为 。在上述示例中,我们使用 。 数据作为图像插入到 。在上述示例中,我们将 。这两种方法都可以将 。 数据插入到 。 属性值传递给 。 元素,并设置 。原创 2023-10-23 09:32:43 · 2038 阅读 · 0 评论 -
Vue项目中使用Multiavatarjs生成自定义随机头像-demo
前者使用简单一点提供的有api,后者更类似一个项目主要使用Multiavatar去实现随机生成头像的功能使用很简单,把js下载保存到项目中,然后在html文件引入,即可全局使用。原创 2023-10-23 07:00:00 · 1734 阅读 · 7 评论