vue
文章平均质量分 57
Best_卡卡
一天不掉发,心里就空空的
展开
-
html2canvas jspdf导出pdf 格式文件(vue)
分页、底部间距、页面导出pdf文件原创 2023-01-28 12:18:45 · 834 阅读 · 1 评论 -
多级文件树的渲染
vue3.0 ts vite 多级文件树原创 2022-11-01 10:09:02 · 252 阅读 · 0 评论 -
echarts地理坐标系组件geo实现散点图绘制
前言需求图需求:1、绘制当前集团公司在世界分布的资产散点图,2、双击点击中国地图,进入中国地图3、右键返回世界地图4、hover自定义tooltip,并且高亮所在地图区域实现准备世界地图坐标数据和我国地图坐标数据地理坐标系组件需要注册地图,我们需要导入并注册地图数据1、世界地图数据:worldGeoJson.ts2、中国地图数据:chinaGeoJson.ts坐标数据过大,我放入我的资源里面了,免费免积分绘制以及option1、基础结构<template>原创 2022-04-14 21:24:26 · 1485 阅读 · 2 评论 -
技术-积累
uniapp组件签名;promise.all使用;原创 2022-01-19 14:53:29 · 241 阅读 · 0 评论 -
基于vue-simple-uploader 实现大文件分片上传(补充)
前言之前做了基于vue-simple-uploader大文件的大文件上传,目前新的需求是把音频也进行大文件形式上传,那么上传的时候需要进行字段校验上传的文件是视频还是音频,本文将针对这一点进行操作加入音频1、我们通过选择框选择视频还是音频进行页面的显示,字段form.courseType,2是视频,3是音频2、为uploader-btn标签添加id3、注意不可以这么写 <uploader-btn :attrs="form.courseType == 2?attrs:attrs1" v-原创 2021-10-09 09:43:12 · 1526 阅读 · 0 评论 -
vue图片点击预览
前言起因:关于聊天框图片点击查看的实现,不如记下,以后好复用手写实现在父组件引入并且传值// 父组件<preview :previewImg="companyPreview"></preview>// 引入import preview from "./preview.vue"// components中注册components:{preview},// 传递的参数companyPreview:{ imgList: [], // 所有图片数组 in原创 2021-08-09 10:26:11 · 3812 阅读 · 1 评论 -
关于WebSocket的心跳重连机制(详解)
前言遇到的问题:实时聊天过程中,1、websocket连接后,长时间远端和客户端不发消息,服务端会把websocket给断开;2、所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。3、因此就有了websocket的‘心跳监测’。4、还有心跳,说明还活着,没有心跳说明已经断开了。websocket基础使用基础使用心跳机制1、心跳机制是每隔一段时间会向服务器发送一个数据包: 告诉服务器(后台)自己还活着,同时客户端(浏览器)会确认服务器端是否还活着2、如果还活着的话,就会回原创 2021-07-26 09:47:05 · 26247 阅读 · 3 评论 -
vue 混合机制 mixins(混入)
前言官方解释:混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。简单理解:本质是函数封装,把多个页面重复用到的data数据、created()、methods:{}、里方法封装在一个js文件里,每个页面依次导入,减轻代码冗余注意:导入之后,data数据会合并,methods数据会合并到一起,相当于扩展了原组件的对象与方法特点:与vuex区别vuex:用来做状态管原创 2021-07-21 17:05:33 · 249 阅读 · 0 评论 -
基于WebUploader实现大文件分片上传
前言前面叙述了如何利用vue-simple-uploader实现分片上传、断点续传和秒传;本篇学习基于WebUploader实现这些功能使用1.在项目中引入webuploader注意事项1、插件基于jquery,2、不支持npm导入(通过 import './webuploader'; 的方式引入webuploader,会报''caller', 'callee', and 'arguments' properties may not be accessed on strict mode ..原创 2021-07-21 13:46:11 · 1466 阅读 · 3 评论 -
基于vue-simple-uploader 实现大文件分片上传(二)
前言前面我们做了文件分片上传的前端步骤,已经把我们项目需求都可以实现了,本章主要学习下vue-simple-uploader的秒传文件、断点续传、跨端续传文件分片上传之后端PHP合成文件参考地址:https://www.helloweba.net/php/634.html基础-计算文件MD5值MD5作用1、计算MD5:对于超大文件,我们不应该一次性的读取文件,这样的话有可能浏览器直接爆了。我们借助分片上传的概念,一片一片的读取文件,即每次读取一个分片内容chunk,之后再进行下一个分片原创 2021-07-20 11:21:04 · 2387 阅读 · 0 评论 -
基于vue-simple-uploader 实现大文件分片上传(一)
前言教育项目视频上传、大文件频频上传失败、进度到100%后,服务端响应时间过长,影响观感。继而采取分片上传方式,轮子有:Web Uploader:http://fex.baidu.com/webuploader/vue-simple-uploader:https://github.com/simple-uploader/vue-uploader我们先看下可以直接npm导入的 vue-simple-uploader简介vue-simple-uploader就是一个基于 simple-uploa原创 2021-07-19 18:49:24 · 2430 阅读 · 1 评论 -
移动端h5问题定位工具-vConsole
前言近期做了一个关于手术直播的h5项目,做好后在pc端浏览器模拟测试没问题。部署上后用手机测试出现很多问题手机浏览器定位问题困难、存在兼容性问题、靠猜测特别难处理本篇文章:记录一个h5调试工具new Date(date).getTime()在苹果手机不兼容h5移动端调试工具-vConsole安装 npm install vconsole -D 在 main.js 中引用 import Vconsole from 'vconsole'; const vConsole原创 2021-05-25 11:02:05 · 518 阅读 · 1 评论 -
多个文件加载显示总体进度条js
前言需求是,进入页面加载多个vtk3d模型文件,因为文件特别大,从服务器下载就比较慢,需要做个进度条优化用户体验。如下图所示:思路1、事件总线传递值 (文件总大小、当前文件加载大小) 由于接口调用封装的太深,与组件难以关联,要么进行vuex保存,要么事件总线(事件监听,事件发布), 当前采用的是事件总线的方式处理(便于理解,后期可以用vuex优化性能)2、this.$set()动态保存每一个文件进度 多个文件都要分别保存文件总大小、当前文件加载大小,这里采用this.$set()进原创 2021-05-24 15:54:58 · 562 阅读 · 1 评论 -
前端-h5直播视频流(xgplayer 篇)
前言1、通过接口获取媒体流地址或静态地址;(省略)2、通过 西瓜播放器插件xgplayer + video标签实现直播本质:始终在调用流地址实现视频播放(个人理解)使用template <div ref="video" id="mmid" v-show="islivea" ></div>安装西瓜播放器插件官网$ npm install xgplayer$ npm install xgplaye原创 2021-05-21 10:50:33 · 9648 阅读 · 1 评论 -
单个页面多个倒计时的逻辑处理(vue)
前言1、根据list数组里面的开始时间,判断倒计时逻辑2、思路=>forEach遍历数组时间,设置新对象属性接收当前时间,设置新对象属性保存倒计时效果如下图所示实现数据data list:[ { id:33, url: 'https://192.168.20.15/httpflv/94.flv', coverUrl:'https://img1.baidu.com/it/u=2496571732,442429806&a原创 2021-05-18 13:17:00 · 569 阅读 · 2 评论 -
从websocket到socketio随笔
websocket使用页面创建时 创建websocket连接created () { // 1. 创建webscoket连接 if (typeof (WebSocket) === 'undefined') { alert('您的浏览器不支持socket') } if ('WebSocket' in window) { this.initWebSocket() } else { alert('当前浏览器不支持websocket原创 2021-04-29 10:13:24 · 1051 阅读 · 0 评论 -
vue--富文本插件Quill(二)图片与视频上传
前言前言上文介绍了quill的基础使用,这里主要针对我们不想以图片base64文本格式提交,而是上传服务器获取图片url,以url提交的实现方式以及视频上传的实现思路1、隐藏一个input框,使用quill的handler事件实现点击上传到服务器这种方式可以参考作者再见紫罗兰https://www.cnblogs.com/linxiyue/p/10305047.html2、由于项目使用饿了么,所以我直接使用其提供的upload组件和Quill自定义定制组合实现上传图片和视频的功能两个思路方法原创 2021-04-26 16:43:06 · 2202 阅读 · 0 评论 -
vue--富文本插件Quill(一)基础使用
简介Quill是一个很流行的富文本编辑器,github上star大约21k:github:https://github.com/quilljs/quill/官网: https://quilljs.com/简单demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-04-26 15:36:42 · 2068 阅读 · 0 评论 -
基于插件库vue-cropper裁剪固定尺寸的图片
需求vue-cropper官网https://github.com/xyxiao001/vue-cropper需求:上传图片之前,进行剪裁成690*350尺寸的图片,剪裁后上传到服务器步骤安装 npm install vue-cropper使用main.js里面全局使用import VueCropper from 'vue-cropper'Vue.use(VueCropper)组件使用 --父组件 <el-form-item label="添加封面原创 2021-04-25 15:58:23 · 2600 阅读 · 2 评论 -
关于vue打开另一个新项目以及传参问题
待写原创 2021-01-11 09:49:47 · 2694 阅读 · 0 评论 -
新页面打开vue项目
detail(id){ let routeUrl = this.$router.resolve({ path: "/live/detail", query: { ind: this.$store.state.tabIndex, type: this.tabIndex, id原创 2020-12-11 15:35:56 · 163 阅读 · 0 评论 -
vue组件传参的方式总结整理
组件通信常用方式父子组件传参props$emit(event)其他组件传参vuexeventBus补充:其它$parentrefs/refs/refs/childrenprovide/ inject能够实现祖先和后代之间传值$attrs / $listeners包含了父作用域中不作为props被识别(且获取)的特性绑定(class和style除外)引用parent,parent,parent,refs/$children目标:在父组件中操作子组件(原创 2020-10-26 17:02:17 · 688 阅读 · 0 评论 -
vuex模块整体回顾
vuex基础-介绍为什么会有Vuex ? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测**的方式发生变化。vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXWj1lLi-1605020012440)(assets/image-20200902235150562.png)]结论原创 2020-12-22 18:42:25 · 373 阅读 · 0 评论 -
聊天页面(vue、语音发送、websocket等)
// 语音组件 }}原创 2021-04-12 15:38:36 · 6067 阅读 · 22 评论 -
服务端渲染(回答vue为啥子不支持seo优化,如何解决)
整体目标:理解服务端渲染的概念会用vue的SSRNuxt中的async一、基本概念页面的两种生成方式用户从浏览器地址栏中输入地址访问服务器上的页面时,服务器可以用两种不同的策略来生成这个页面,对应着程序员写的不同的实现方式。打开给出的示意代码,观察效果。(1)服务器端渲染Server Side Render渲染是指:从数据到dom的过程(从json到html结构)数据到dom的过程是发生在服务器端客户端浏览器在地址栏中输入网页的地址,取回来的就是html页面。原创 2020-10-26 14:35:09 · 2371 阅读 · 3 评论 -
一日一手活(cookie中保存对象数据--vue项目实用)
起始逻辑目前有一个发消息的功能,消息如果发送失败,需要把它调用发送失败接口。但是问题是 如果能发送成功 那么一定能调取失败接口,发送不成功服务器问题,失败接口也调取不成功。所以我们合计建议是这么做:如果发送失败的话,把当前的调取接口内容保存到本地cookie,实时监听调用失败消息接口发消息接口需要的对象里面参数有:附件数组、发送人id数组、标题、富文本内容第一个问题 :可以保存对象到cookie吗? 参数名怎么设置// 处理//vue data 中加个参数errorSendMessag原创 2020-12-16 18:46:33 · 1543 阅读 · 0 评论 -
Vue插件vue-json-excel数据表的导出(vue-json-excel)
导出为exl原创 2021-04-06 14:30:39 · 513 阅读 · 0 评论 -
渲染树形菜单,有很多的后台数据,怎么筛选
如何对树形图进行遍历,在vue页面显示首先根据element-ui中的典型树形菜单结构图<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"></el-tree><script> export default { data() { return {原创 2020-11-02 18:46:04 · 594 阅读 · 0 评论