工作中的一点记录
want、
这个作者很懒,什么都没留下…
展开
-
vue中使用provide/inject响应数据隔代传值
父组件:provide返回一个函数调用函数内部返回响应的数据,即可在其他条件下修改响应数据传递给子代组件 provide(){ return { itemDataHandle:()=>this.itemData } },隔代组件:隔代组件通过inject获取传输进来的数据并通过inject: ['itemDataHandle'],此时的itemDataHandle是个函数,可以使用computed返回这个函数的结果computed: { get原创 2021-03-18 15:28:07 · 445 阅读 · 0 评论 -
vue项目中使用防抖
记录一下项目中上拉滚动触发增加函数防抖:需求是上拉加载时频繁触发只执行最后一次加载数据坑点:vue中写的函数作为参数传给防抖函数时一定要保证闭包函数调用的this指向否则会报错。函数调用:防抖函数:...原创 2021-03-05 14:40:17 · 521 阅读 · 0 评论 -
使用lrz做图片文件压缩
1.安装lrz:npm install lrz --save-dev2.导入lrz:import lrz from "lrz";3.使用:lrz()参数1:文件(files[0]),参数2:压缩文件的配置 compressImg(that, fileData, callback) { lrz(fileData, { width: this.size, fieldName:...原创 2019-12-10 16:18:33 · 3146 阅读 · 0 评论 -
css超出两行隐藏并使用...替代
.test { word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }原创 2019-12-05 18:28:08 · 159 阅读 · 0 评论 -
vue-element创建一个动态的面包屑导航
1.使用element的Breadcrumb组件2.监听router获取matched 刚好是一个数组3.效果(根据路由变化展示)原创 2019-12-05 17:12:27 · 640 阅读 · 0 评论 -
vue项目骨架屏的使用
1.使用vue-cli创建一个新项目2.在index.html文件中div添加内容加载时会先显示div里面的内容等渲染完毕时在切换成路径组件内的内容先显示:加载完后显示:运行的流程就到这:接下来就轮到主角出场了1.安装webpack插件npm install vue-skeleton-webpack-plugin2.在src目录下创建Skeleton.vue<templa...原创 2019-12-04 11:17:33 · 859 阅读 · 1 评论 -
vue中使用特殊字体
1.在src目录下创建一个font文件夹放入下载好的字体文件2.对应位置样式文件写好以下内容@font-face { font-family: 'PangMenZhengDao'; src: url('./FZBWKSJW.ttf'); }3.在对应组件中使用...原创 2019-12-04 10:50:44 · 550 阅读 · 0 评论 -
文字使用css渐变字体颜色
方法: background-image: linear-gradient( 0deg, rgba(255, 171, 0, 1) 7.5439453125%, rgba(255, 250, 142, 1) 100% ); -webkit-background-cl...原创 2019-11-25 17:05:01 · 156 阅读 · 0 评论 -
H5唤起手机拍照和相册
1.拍照和相册 <input type="file" multiple="multiple" accept="image/*" multiple id="files">2.视频 <input type="file" accept="video/*" capture="camcorder">3.拍照和视频选取<input type="file" acc...原创 2019-11-22 16:56:28 · 1508 阅读 · 0 评论 -
FileReader()构造函数基本使用获取上传文件流
1.语法:实例化一个FileReader函数var fileReader = new FileReader();2.使用readAsDataURL()方法读取文件流 fileReader.readAsDataURL(files.files[0]);3.监听onloadend 读取完成事件 fileReader.onloadend = () => { ...原创 2019-11-21 09:57:34 · 849 阅读 · 0 评论 -
vue中使用qrcanvas.js
1.先npm装包npm i qrcanvas2.在模块中用import导入import { qrcanvas } from "qrcanvas";3.html <div id="qrcode"></div>4.在mounted生命周期钩子中使用 this.$nextTick(() => { const canvas = qrcanvas...原创 2019-11-20 15:39:48 · 817 阅读 · 0 评论 -
css开启overflow滚动遇到的问题
css开启overflow滚动遇到的问题:ios手机中上下滑动时出现卡顿以及闪屏(安卓没有这个问题):添加-webkit-overflow-scrolling: touch;开启属性控制元素在移动设备上是否使用滚动回弹效果.加上这个属性后有了回弹效果,但是上下滑动的时候会出现抖动,最后终于找到问题在哪里了(坑:开启overflow滑动的元素不要使用%去写元素的高度)出现滑动抖动:滑动正...原创 2019-10-25 11:51:40 · 457 阅读 · 0 评论 -
vue中v-if 和v-show的妙用
vue中v-if 和v-show的妙用:v-if:未满足某个条件时不会创建dom也不会渲染,场景:适用于不需要频繁切换v-show:不管是否满足条件都会创建dom,相当于暂时隐藏,满足某个条件时才显示场景:适用于频繁切换(例:页面上有许多弹窗图片以及需要频繁显示与隐藏的图片,如果是使用的v-if由于这些dom一开始未生成满足条件后生成可能会导致图片加载闪屏(内容比加载的图片先显示),这样...原创 2019-10-12 12:10:52 · 249 阅读 · 0 评论 -
H5 img加载gif图片播只能播放一次的问题
点击某个交互显示改gif图播放,再次点击的时候因为浏览器的缓存会直接显示上次播放结束后的状态,不会重新播放,解决方法是给src的路径上加上一个随机数让这个图片一直保持最新的路径就可以重新开始播放: //洒水gif加上随机数可以重新播放 this.sprinklingImg=require('@/assets/images/loveOrchard/watering.gif')+'...原创 2019-10-10 17:23:01 · 4678 阅读 · 2 评论