![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
勤劳@小蚂蚁
前端路上,用心编写、分享每篇前端技术文章....
展开
-
el-upload 多文件上传
uploadResourcesFile.vue的封装<template> <div v-loading="loading" class="upload-file-panel" element-loading-text="上传资源比较大,请耐心等待..."> <el-upload ref="upload" :action="action" :file-list="fileList" :data="paramsData" :on-c原创 2021-07-29 10:25:32 · 831 阅读 · 0 评论 -
vue iframe嵌套html页面,并向html页面传递参数
今天接到一项目需求,需要在vue页面展示3D标签效果,想着摆脱eslint,就把3D效果写成html页面,在vue页面,通过iframe嵌套去完成。这样,效果是可以展示出来了,但是由于3D效果初始化的时候需要设置宽度和高度,故想着传参的形式,把包裹iframe容器的高度传给html页面,几经尝试,发现在vue中,像iframe页面传递参数,需要用了@load,故记录下来vue代码<div class="cloud-content" id="cloudContent" <iframe原创 2021-01-19 16:24:01 · 2683 阅读 · 5 评论 -
el-upload单文件上传
1. 上传文件组件封装 UploadResourcesFile.vue<template> <div class="upload-file-panel" v-loading="loading" element-loading-text="上传资源比较大,请耐心等待..." > <el-upload class="upload-demo" ref="upload"原创 2021-01-08 10:26:17 · 1014 阅读 · 0 评论 -
vue 播放.aac格式的音频文件
代码 data() { return { audioUrl : 'http://192.168.50.122:8080/test/test.aac' } } <audio controls="controls"> <source :src="audioUrl" type="audio/mpeg"> </audio> ....效果...原创 2020-12-17 16:04:53 · 1326 阅读 · 5 评论 -
Leaflet加载、删除dynamicMapLayer动态图层
let url = 'http://gis.rwworks.com:6080/arcgis/rest/services/danjiangkou/tudizhengshouxian/MapServer'; const testLayer = L.esri.dynamicMapLayer({ url: url, opacity: 1 }) testLayer.setZIndex(999); this.map.addLayer(testLayer);原创 2020-11-30 14:34:41 · 1155 阅读 · 0 评论 -
leaflet地图叠加瓦片图层
let url = 'http://gis.rwworks.com:6080/arcgis/rest/services/danjiangkou/tudizhengshouxian/MapServer'; const testLayer = L.esri.tiledMapLayer({ url: url, opacity: 1 }) testLayer.setZIndex(999); this.map.addLayer(testLayer);原创 2020-11-30 14:32:09 · 1924 阅读 · 0 评论 -
vue-video-player播放 hls(m3u8)视频流
一、组件封装<template> <div style="width:100%;height:100%;" ref="videoContainer"> <video-player class="video-js vjs-big-play-centered" ref="myPlayer" :options="playerOptions" v-show="cont原创 2020-11-17 10:21:31 · 2581 阅读 · 2 评论 -
vue-video-player,切换页面时控制台报错:TypeError: this.el_.vjs_getProperty is not a function解决方案
备注:最近项目中,用vue-video-player播放rtmp流,在切换面时,控制台一直报错:TypeError: this.el_.vjs_getProperty is not a function;网上找了很多方案,都没能成功解决;最终,经过反复试验,终于彻底解决了报错问题,想将代码分享出来 <video-player class="video-js vjs-big-play-centered" ref="myPlayer" :options="player原创 2020-10-28 09:52:24 · 1028 阅读 · 0 评论 -
vue-video-player 浏览器缩放
文章目录前言一、vue-video-player的封装二、调用1. 引入2. vue template代码2. 主要js代码效果前言 此篇是在上一次《[Vue 播放rtmp直播流]》基础之上的更新及补充;近期接到客户需求,需要在视频流上显示额外的信息;当然,视频流上叠加信息可以通过canvas来完成(透明canvas实现),但是在测试的过程中发现,当浏览器缩放时,叠加的图层信息与初始化的时候会产生错位及偏移,这主要是由于,默认情况下,视频流显示大小会随着浏览器的缩放而自动调整大小,但图片确实固定的;.原创 2020-09-07 14:33:32 · 2229 阅读 · 0 评论 -
卸载并重新安装pm2 linux
卸载并重新安装pm2今天部署项目到linux服务器,使用pm2启动项目,但一直无法正常启动,使用pm2 log 命令查看,提示node_modules包有问题,但提示的node.js版本和软链接的并不一致,经询问后台,才知道,他们之前在这个服务器安装过node和pm2,最后又简单替换了node和pm2…于是乎,就需把目前部署的pm2删除掉,但通过npm uninstall pm2是无法删除的,经过实践,确定以下方案可以,故粘贴出来# 删除rm /usr/local/bin/pm2 rm -r /us原创 2020-08-26 17:01:46 · 10113 阅读 · 0 评论 -
vue 播放实时语音
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档vue 播放实时语音前言一、speechVoice.vue的封装二、调用方式前言 近期因项目需求,需要在网页端将文字实时转化为语音并播放,当然实时语音文字接收可以采用h5的webSocket技术,但是将文字转化为语音播放却没有那么简单,百度语音或者科大讯飞的基本都是收费的,经过反复实践,最终采用speechSynthesis技术,实现了这一功能,以下为具体代码:一、speechVoice.vue的封装<templa原创 2020-08-18 10:24:42 · 1676 阅读 · 0 评论 -
Vue 播放rtmp直播流
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档Vue 播放rtmp直播流前言一、vueVideo.vue封装二、调用方式前言该组件是在vue-video-player基础上封装,支持播放mp4/rtmp等格式一、vueVideo.vue封装<template> <div style="width:100%;height:100%" ref="videoContainer"> <video-player ref="myPl原创 2020-08-18 10:12:38 · 1276 阅读 · 0 评论