![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 66
落魄实习生
这个作者很懒,什么都没留下…
展开
-
vue-使用Worker实现多标签页共享一个WebSocket
最近有一个需求,需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。原创 2024-07-08 10:04:44 · 1171 阅读 · 0 评论 -
解决tailwind与element样式冲突
去node_modules里找到tailwindcss,把preflight.css拷贝一份放在项目中公共样式文件夹下,然后把影响到button的部分注释掉。打开F12查看按钮样式,发现是被Tailiwind的样式覆盖了,Tailwind采用的是属性选择器的方式来设置样式。el-button按钮在没有设置plain的情况下背景透明了,文字颜色也不对。拷贝到项目styles文件夹下并注释掉button的样式。prefight.css位置如下。原创 2023-12-01 18:31:59 · 1234 阅读 · 0 评论 -
vue3+ts使用pinia状态管理
最后总结一下pinia一些优点舍弃了冗长的 mutations 属性舍弃了模块化 modules 让状态管理更加扁平化对于 ts 的支持更加友好 支持数据推断你甚至可以让各个状态管理相互依赖、嵌套。转载 2023-11-28 13:13:14 · 615 阅读 · 0 评论 -
vue3集成Tailwind Css
Tailwind Css 是由 JavaScript 编写的 Css 框架,基于PostCss 解析类名驱动文档生产环境体积很小,编译后只有 8.7KB支持 栅格、hover/focus、深色模式等可以通过 apply 指令实现自定义类名支持前沿样式属性,比如很多浏览器不支持 grid 属性,但此框架帮我们做了转换写代码时在 VSCode 里有提示。转载 2023-11-28 11:54:04 · 851 阅读 · 0 评论 -
学习Vue3你需要知道的47个实用开源组件
antfu按需组件自动导入,开箱即用地支持Vue2和Vue3,Tree-shakable,只注册你使用的组件,附有流行UI库的内置解析器。基于Vue3+Vite+Canvas开发的滑块验证码,动态生成验证滑块,结合后端的二次校验,能有效的避免被抓取模拟验证。基于谷歌的MaterialDesign,附带Vue插件和指令,以及从简单到复杂的高度可定制组件。字节跳动出品,将一个SVG图标转化为多个主题,并生成React图标,Vue图标,svg图标。Vue3.x的UI组件库,完全使用TypeScript开发。转载 2023-11-28 11:20:46 · 393 阅读 · 0 评论 -
Nginx部署vue项目
【代码】Nginx部署vue项目。原创 2023-09-19 14:01:49 · 224 阅读 · 0 评论 -
sortable+element 实现表格行拖拽的方法示例
介绍:Sortable.js是一款轻量级的拖放排序列表的js插件引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.转载 2023-05-31 16:17:29 · 561 阅读 · 0 评论 -
vue使用Howler实现音乐播放器
本文使用Howler.js进行播放。使用siriwave做的播放动画具体文档地址如下最后实现效果如下:二、封装组件播放器index.vue:进度条:slisd.vue原创 2023-04-21 10:55:21 · 1387 阅读 · 0 评论 -
onlyoffice集成实现编辑预览
ONLYOFFICE 文档开发者版ONLYOFFICE Docs 是一款功能强大的在线编辑器,适用于文本文档、电子表格、演示文稿和表格。创建复杂的文档、专业的电子表格和令人惊叹的演示文稿。支持的常用 Office 和文档格式:docx、xlsx、pptx、odt、ods、odp、doc、xls、ppt、pdf、txt、rtf、html、epub、csv。完全兼容 OOXML(Office Open XML)格式。使您的用户能够在您自己的应用程序中在浏览器中在线编辑、共享和协作处理文档。原创 2023-04-04 12:03:31 · 8519 阅读 · 7 评论 -
vue集成tui.calendar日历组件
vue集成tui.calendar日历组件原创 2023-03-29 16:55:01 · 4328 阅读 · 9 评论 -
Vue实现复制功能
Vue实现复制功能原创 2021-07-01 11:16:49 · 166 阅读 · 0 评论 -
Java实现Google第三方登录
Java实现Google第三方登录原创 2022-12-14 12:05:00 · 5606 阅读 · 2 评论 -
vue/js实现图片url转为base64
vue/js实现图片url转为base64转载 2022-12-12 11:27:45 · 2781 阅读 · 1 评论 -
vue3 使用vue-cropper图片裁剪
vue3使用vue-cropper图片裁剪原创 2022-12-06 11:09:30 · 1200 阅读 · 0 评论 -
vue 微信登录
vue 微信登录原创 2022-12-02 12:17:32 · 2787 阅读 · 0 评论 -
Quasar搭建教程初体验
Quasar搭建教程初体验原创 2022-11-25 20:59:50 · 5389 阅读 · 1 评论 -
vue服务端渲染ssr
vue服务端渲染ssr原创 2022-11-10 15:56:47 · 1664 阅读 · 0 评论 -
Vue之xlsx的使用
Vue之xlsx的使用原创 2022-10-09 10:41:37 · 9685 阅读 · 1 评论 -
vue图片压缩image-conversion
vue图片压缩image-conversion原创 2022-08-31 17:01:12 · 6831 阅读 · 1 评论 -
vue使用图像编辑器tui-image-editor
vue使用图像编辑器tui-image-editor原创 2022-08-30 10:26:01 · 6487 阅读 · 7 评论 -
vue实现mp4视频截图
实现MP4视频截图转载 2022-08-29 18:29:27 · 1018 阅读 · 0 评论 -
Electron-Vue创建项目及踩坑记录
Electron-Vue创建项目及踩坑记录原创 2022-07-20 16:29:05 · 590 阅读 · 0 评论 -
vue集成stripe结算界面
vue集成stripe原创 2022-07-08 18:00:01 · 3201 阅读 · 13 评论 -
vue3中的对象时为proxy对象,如何获取值
vue3中的对象时为proxy对象,如何获取值转载 2022-07-08 17:35:49 · 5298 阅读 · 0 评论 -
element el-form-item循环校验
element el-form-item循环校验原创 2022-07-01 15:04:22 · 1670 阅读 · 2 评论 -
vue元素监听(element-resize-detector 元素监听)
vue元素监听(element-resize-detector 元素监听)转载 2022-06-30 10:12:26 · 1479 阅读 · 0 评论 -
vite 中动态引入图片路径
vite 中动态引入图片路径vite 官方默认的配置,打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以正常引入,打包后却不能显示的问题,示例如下:原文地址https://www.jianshu.com/p/038adc6c8ffd打包后路径:<img src="static/icon/123.jpg">实际打包后的图片路径:static/icon/123.hash.jpg可以尝试以下方法解决:HTM转载 2022-05-18 05:10:37 · 3982 阅读 · 0 评论 -
vite 修改打包后页面引用js的地址
vite 修改打包后页面引用js的地址需求:页面引入js过慢。需要吧打包后的js上传到oss使用CDN加速就需要修改打包后js引入地址官方文档:https://vitejs.cn/config/#base使用base来定义例:部署成功之后就能就能发现引用地址变成了自己指定的地址...原创 2022-05-03 14:03:01 · 1797 阅读 · 1 评论 -
vue项目实现文件下载中心:下载、取消下载、列表展示
vue项目实现文件下载中心:下载、取消下载、列表展示实现下载进度条封装JS方法使用store存储文件下载进度列表创建一个列表组件在页面中使用效果展示实现下载进度条平时业务中下载文件方式常见的有俩种:第一种,直接访问服务器的文件地址,自动下载文件;第二种 ,服务器返回blob文件流,再对文件流进行处理和下载。第一种自行百度第二种方式有弊端,在文件流传输过程中,用户无法感知文件流的传输状态(进度),会造成一些困扰(无法确定当前下载操作是否已经生效)。针对这种情况,我们可以在页面显示文件流的状态和传输原创 2022-04-26 16:00:26 · 3440 阅读 · 6 评论 -
vue使用tinymce富文本编辑器
vue使用tinymce富文本编辑器原创 2022-02-21 14:58:02 · 2249 阅读 · 2 评论 -
vue国家区号下拉组件 vue-country-code-selector
vue国家区号下拉组件 vue-country-code-selector地址npm安装使用地址https://github.com/CherryLeee/vue-country-code-selectornpm安装使用安装npm install vue-country-code-selector使用<template> <div class="tel-container"> <country-code-selector :countryCode.s原创 2022-01-07 17:00:19 · 5559 阅读 · 5 评论 -
vite中加载使用svg
vite中加载使用svg使用vite-plugin-svg-icons插件安装 (yarn or npm)添加配置创建svg组件全局导入页面中使用使用vite-plugin-svg-icons插件安装 (yarn or npm)yarn add vite-plugin-svg-icons -Dornpm i vite-plugin-svg-icons -D添加配置在vite.config.js中配置插件在这里插入代码片import viteSvgIcons from 'vite-plugi原创 2021-12-27 10:44:28 · 7599 阅读 · 0 评论 -
Vite+vue3+Element-plus+Route+Vuex+Axios项目搭建
Vite+vue3+Element-plus+Route+Vuex项目搭建官网搭建Vite项目启动项目安装Element安装Vue-Router安装Vuex安装vue-i18n国际化插件安装axios官网名称地址vitehttps://vitejs.cn/Elementhttps://element-plus.gitee.io/zh-CN/Vue-Routerhttps://router.vuejs.org/zh/Vuexhttps://vuex.vuejs原创 2021-12-23 19:52:32 · 1633 阅读 · 2 评论 -
java+vue使用el-upload上传到阿里云oss
vue使用el-upload上传到阿里云oss前言官方文档一、后端JAVA代码1.引入依赖2.具体实现二、前端调用1.引入库2.工具类oss.js3.页面使用前言项目中要实现上传到阿里云oss功能,为了降低服务器压力,使用STS方式进行上传1.后端返回AccessKey ID,AccessKey Secret,stsToekn。2.前端调用接口获取秘钥等信息进行上传官方文档后端地址:https://help.aliyun.com/document_detail/32007.html前端地原创 2021-12-14 13:52:05 · 3150 阅读 · 3 评论 -
vue3时间转换插件-Moment.js的使用
一.组件官网moment.js时间转换插件http://momentjs.cn/Moment Timezone 时区处理类库http://momentjs.cn/timezone/二.vue项目中使用我这里使用的是vue3的写法npm install moment --save或者npm install moment-timezone --save在main.js中引入import moment from 'moment'或 import moment from "moment-原创 2021-12-10 13:25:55 · 15574 阅读 · 4 评论 -
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件前言一、关于vue-simple-uploader二、使用步骤1.安装2.使用3.基于vue-simple-uploader封装全局上传组件4.文件上传流程概览5.文件分片6.MD5的计算过程7.秒传及断点续传7.1 对于前端来说7.2 前端做分片检验:checkChunkUploadedByResponse8.源码及后记8.1 关于第一个分片丢失问题前言本文转载,原文地址:https://www.cnblogs.转载 2021-12-02 10:37:44 · 2092 阅读 · 3 评论 -
js实现网站全屏
实现网站全屏使用的插件官网地址:https://github.com/any86/be-full安装依赖整个网页全屏显示指定元素全屏使用的插件官网地址:https://github.com/any86/be-full安装依赖npm i -S be-full整个网页全屏显示引入依赖import { beFull, exitFull } from 'be-full';方法中调用beFull();为开启全屏 exitFull();为退出全屏指定元素全屏const e原创 2021-10-27 15:17:20 · 296 阅读 · 0 评论