![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 50
学而时习之不亦说乎。
学海无涯
展开
-
vue内嵌iframe跨域通信
1、Vue组件中如何引入iframe?2、vue如何获取iframe对象以及iframe内的window对象?3、vue如何向iframe内传送信息?4、iframe内如何向外部vue发送信息?原创 2022-12-01 15:50:12 · 6219 阅读 · 3 评论 -
mp4,m3u8,rtsp,rtmp,flv,直播流在线测试地址
西瓜播放器测试视频: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv。前端做直播视频展示的时候,很多时候播放不出来,不是因为自己代码的问题,而是因为网上很多源。现在已经播放不出来了,所以源头都有问题,那自己的前端肯定就放不出来。以上是我测试目前可以用的,如果大家有补充可以告诉我,互帮互助!下面放我当前测试可以用的几个在线视频流。原创 2022-11-29 09:54:17 · 5890 阅读 · 2 评论 -
自定义指令 v-clickoutside 使用方法
引入指令import Clickoutside from 'element-ui/src/utils/clickoutside'声明指令export default { directives: { Clickoutside }, data: function() { return { } }}使用指令<div v-clickoutside="handleClickOutside"></div>methods: {原创 2022-04-14 08:55:22 · 5406 阅读 · 2 评论 -
vue项目使用阿里云播放器(aliyun)
1、在项目的components的文件夹下新建AliPlayer.vue文件,将sdk插件的代码放入其中,代码如下:<template> <div class="prism-player" :id="playerId" :style="playStyle"></div></template><script> export default { name: "Aliplayer", props: { ...原创 2022-04-11 13:56:09 · 8025 阅读 · 10 评论 -
axios终止网络请求
1.axios中止单个网络请求 const CancelToken = axios.CancelToken config.cancelToken = new CancelToken((cancel) => { // 存储并使用cancel })axios中止所有的网络请求使用CancelToken 在axios的请求拦截中,使用store存储每个请求的cancelToken实例 拦截路由,调用cancelToken()方法终止请求原生j原创 2022-01-24 14:29:26 · 5408 阅读 · 0 评论 -
前端人脸识别解决方案
最近业务功能需求开发中Web端需要接入人脸识别,于是做了技术预演1.第三方解决方案现有的云服务商解决方案:市场还有很多类似的解决方案,这里不一一列举,下面是某云服务商的报价Web API中有个MediaDevices.getUserMedia()的方法,调用后会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道。 旷世 - 人脸识别 face++[1] 腾讯云神图.原创 2022-01-17 10:11:13 · 6703 阅读 · 0 评论 -
vscode+eslint 的配置规则和自动修复
全局安装eslint 打开终端,运行npm install eslint -g全局安装ESLint。 vscode安装插件 vscode 扩展设置 依次点击文件 > 首选项 > 设置{ "workbench.iconTheme": "material-icon-theme", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": fal...原创 2022-01-12 13:49:28 · 632 阅读 · 0 评论 -
Vue中监听键盘事件及自定义键盘事件
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题:我们必须知道某个按键的keyCode值才能完成匹配,使用起来十分不便。方案:在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。<input @keyup.enter="function">另外,Vu..原创 2022-01-11 15:05:59 · 5214 阅读 · 0 评论 -
vue 登录页记住密码保留7天。
<FormItem > <Checkbox v-model="isRemember" > <span>记住密码</span> </Checkbox></FormItem>data里默认false// 设置cookie setCookie(username, password, exdays) { var exdate =.原创 2022-01-05 10:01:30 · 325 阅读 · 0 评论 -
响应式网站-媒体查询
1、什么是响应式网站响应式是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面计算机显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现 。2、响应式网站的核心逻辑优雅降级,内容优先。响应式:一个网站去兼容多个终端,而不是为每个终端做特定版本。优点:面对不同分辨率,设备灵活性比较高;快捷解决很多设备的适应问题适合中小型网站 缺点:因为要兼容各种设备,工作量很大,效率不高代码冗余,会出现很多隐藏无用的元素,加载时间长 原理:通过css3新增的媒原创 2021-12-31 14:16:11 · 751 阅读 · 0 评论 -
15个 Vue 技巧使用的总结经验
1、将一个 prop 限制在一个类型的列表中我们在使用 prop 时,可能会有时候需要判断该 prop 是否在我们规定的范围内(或者说规定的值内),此时可以使用 prop 定义中的 validator 选项,将一个 prop 类型限制在一组特定的值中。export default { name: 'Test', props: { name: { type: String, }, size: { type: String, valid...原创 2021-12-30 13:52:52 · 375 阅读 · 1 评论 -
基于element实现文件(资源)上传 - 好用
自定义上传规则按需定义:1.总大小不可超出200M2.文件上传不重复3.支持文件格式("mp4","MP4","mov","MOV","mp3","MP3","jpg","JPG","png","PNG","jpeg","JPEG","bmp","BMP","txt", "TXT","text","TEXT","doc","DOC","docx","DOCX","xls","XLS","xlsx","XLSX","ppt","PPT","pptx","PPTX",...原创 2021-12-28 10:42:28 · 989 阅读 · 0 评论 -
使用video.js重新封装视频播放器支持点播及直播
一、安装指定版本是正常命令后加‘@版本号’npm install videojs@7.15.4 --save二,组件封装的代码<template> <div class="live-video-wrapt"> <div id="videoUpdate" class="video-show" v-show="!isError"> <video id="videoTV" class="video-j原创 2021-12-13 10:54:30 · 3986 阅读 · 0 评论 -
web移动端vw rem适配各种尺寸,手机基于 vw 单位的移动端适配方案
1"head"里添加"meta"<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />2 计算 html 的"font-size"在utils里创建rem.jsexport const setFontSize = (designWith = 750) => { // 设计稿宽度, 750|640|520 .原创 2021-12-10 10:35:55 · 211 阅读 · 0 评论 -
vue项目导出页面为pdf格式照片截图
1、安装html2canvas和jspdf依赖npm install html2canvas --savenpm install jspdf --save 2、在utils中创建htmlToPdf.js文件,// 导出页面为PDF格式import html2canvas from "html2canvas"import JSPDF from "jspdf"export default { install (Vue, options) { Vue.prototype.Ex原创 2021-12-08 17:41:29 · 525 阅读 · 1 评论 -
Vue中使用websocket(即时通讯)
websocket是一个双向通行工具,解决了原来的http单向通信的弊端,可以让服务器主动向客户端推送数据// 安装客户端的socketnpm i socket.io-client --save/* 安装Vue配置socket的工具 注意:需要安装3.0.7版本的包,最新的包会有问题*/npm i vue-socket.io@3.0.7 --save// 在main.js中引入设置import VueSocketIO from 'vue-socket.io.原创 2021-12-08 16:57:47 · 6965 阅读 · 0 评论 -
闭包的思想和实现逻辑
闭包闭包就是能够读取其他函数内部变量的函数。在js中,可以将闭包理解成“函数中的函数“闭包的作用:A、可以读取函数内部的变量B、让这些变量的值始终保存在内存中。这是因为闭包的执行依赖外部函数中的比那辆,只有闭包执行完,才会释放变量所占的内存使用闭包的注意事项由于闭包会使得函数中的变量都被保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能会造成内存泄露。 解决方法:在退出函数之前,将不使用的局部变量全部删掉闭包会在父函数外部,改变父函数内部变量的值原创 2020-11-30 08:27:46 · 248 阅读 · 0 评论 -
防抖和节流的思想与实现逻辑
防抖节流节流的思想就像现实世界游戏里的人物触发大招后等待几秒后才能再次执行防止用户连续事件//函数节流var r = function () { console.log("薇恩开启大招 一秒隐身 进入夜行 收割时刻");};function lolHeroskill(fn, delay) { let cd = true; return function () { if (cd) { fn(); cd = false; setTimeout原创 2020-11-29 17:35:31 · 456 阅读 · 2 评论 -
Vue组件中的data为什么一个函数
Vue组件中的data为什么一个函数vue文档在声明式渲染这一节中给了我们这样的一个demo:<div id="app">{{ message }}</div><script>var app = new Vue({el: '#app',data: { message: 'Hello Vue!'}})// 如同const obj = { name:'cluo', age:18 }原创 2020-11-16 12:53:10 · 133 阅读 · 0 评论