随笔分类 - VUE
基础
摘要：video.js 添加截图功能 // 截图功能 scrollLock() { const fileName = `${new Date().getTime()}.png`; let fileType = "png"; // 如果文件名中没有带后缀，默认使用png switch (fileName)
阅读全文
摘要：<div class="videos"> <video id="videoOuelet" class="video-flv" controls muted autoplay> Your browser is too old which doesn't support HTML5 video. </v
阅读全文
摘要：Vue常见问题 1、Vue中props是单向数据流 子组件不能直接修改父组件的值 具体原因如下 源码里更新组件调用initProps方法时，会执行defineReactive，这个方法会调用Object.defineProperty的get/set方法，调用set方法时会做校验是不是根组件，是不会更
阅读全文
摘要：Vuex页面刷新数据就清空了 因为JS数据保存在浏览器的堆栈内存里，所以一刷新浏览器就释放JS内存，把堆栈内存清空，所以就Vuex没了数据。 解决数据清空问题：使用本地内存，例如cookie，localStorage，sessionStorage保存数据。 Remark：sessinStorage
阅读全文
摘要：Vue引入CSS方式一般有三种 直接上代码 <template> <div class='test'> <img class='test_img' :src="require(`@/assets/img/cat.png`)" /> </div> </template> <script> /** *
阅读全文
摘要：nginx 压缩功能，可以减少文件的网络传输时间、同时也节省了所需要的带宽。比如高压缩比的html、js、json、css等，有时可以高达70%~90%，优化效果明显。 gzip压缩需要 前端 服务器同时配置 这里使用vue为例 // 首先安装插件 npm install --save-dev co
阅读全文
摘要：防抖和节流 首先两者的区别 防抖：N秒内只触发一次，如果N秒内再次触发则重新计算时间； 节流：N秒内只触发一次，如果N秒内再次触发也不会执行； 防抖的实现 这里使用Vue自定义指令的形式实现，核心代码是事件绑定那段 /** * @description Vue自定义指令 * @param argme
阅读全文
摘要：echarts控制台报错和100px宽度问题 起因echarts的父元素没有宽高或者设置了v-show; 解决思路 父元素没有宽高或者 需要在mounted钩子中开始绘制(这个时候Dom已渲染); 或者使用this.nextTick(()=>{console.log('需要做的操作')}); v-s
阅读全文
摘要：vue项目启动报错 spawn cmd ENOENT errno: -4058 运行vue项目(npm run dev)报错 提示 'npm' 不是内部或外部命令 cmd输入node -v 有版本号 没问题啊 那应该是node升级的问题 于是我就卸载重新安装 总没问题了吧 但是新问题来了 报错如下
阅读全文
摘要：需求：数据量超出屏幕时，屏幕自动滚屏 分以下步骤 获取纵向滚动条的位置 使用定时器增加滚动量 鼠标移入时滚动暂停 鼠标移出时滚动继续 上代码 // 定义全局变量定时器 let setTimeName = null; /** * @description 初始化屏幕滚动 * @params {Stri
阅读全文
摘要：滚动截图 项目需求要进行动态的滚动截图搜索一下发现html2canvas可以实现截图，但是滚动截图网上搜罗了一遍发现不是很完善所以记录下 首先npm一下安装依赖: npm install html2canvas 再需要的页面引入: html2canvas from html2canvas 第三步使用
阅读全文
摘要：Object.defineProperty(objectName, key, option); Object.defineProperty()可以直接在一个对象上定义一个新属性, 或者修改一个属性, 并返回该对象; option value: 表示该属性的值， 默认 undefined。 get:
阅读全文
摘要：**### vue mode 好玩东西+1： 轻量级进度条: 1、引入 import NProgress from 'nprogress'; // progress bar import 'nprogress/nprogress.css'; // progress bar style 2、使用 异步
阅读全文
