- 博客(65)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue-infinite-scroll下拉加载
列表下拉加载组件，npm下载vue-infinite-scroll插件引入，直接按需引入element的InfiniteScroll不起作用。2. html，scroll-wrap盒子设置高度、滚动（height：xxxpx，overflow：auto）1.mainjs引入vue-infinite-scroll组件。3.data数据据设置。
2023-07-04 15:31:55
498
原创 vue hls.js播放实时流插件封装
在线测试实时流地址：http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8。
2023-06-02 14:05:58
635
原创 vue-cli5.0 兼容低版本谷歌浏览器
网上搜索了很多方法，下载了babel-polyfill，@babel下的polyfill，再main.js引入再配置等等都不生效，原来是webpack配置的browerslist的原因，>.<修改package.json文件的browserslist配置，修改为你想要兼容的浏览器列表。用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。直接使用默认配置打包部署出来的项目再60、70版本的谷歌浏览器跑不起来，蓝屏。修改红框的条件可以看到支持的浏览器版本。
2023-04-21 17:49:49
1438
原创 小坑，el-table缩放后表头边框去不掉解决方法
在对el-table进行缩放 transform:scale(0,7),无论缩放比例是什么样子的，只要进行了缩放表头就会出现奇怪的线去不掉，吧table所有的border设置成0也没有效果。奇怪的解决方案：给tr设置个背景颜色，最好设置透明色，或者是跟表头一样的颜色，设置成什么颜色就会出现什么颜色的线条。
2023-04-13 10:41:58
493
1
原创 windows电脑整合链接汇总（自用）
别人整理的vscode插件：https://www.jianshu.com/p/fc4dcb2043f6 https://www.cnblogs.com/zhn0823/p/6542335.html。目录： C:\Windows\System32\drivers\etc\hosts。新建位于文件夹位置的终端窗口：。
2023-03-29 23:50:22
360
原创 mac电脑解决Error: command failed: npm install --loglevel error --legacy-peer-deps
vue create创建项目时，报错command failed: npm install --loglevel error --legacy-peer-deps，记录一下解决过程
2023-03-08 10:54:05
2976
2
原创 vue json、txt文件导出功能
普通的excell文件等，通过window.location.href = `${window.location.origin}${pth}?r=${Math.random()}`或者创建a标签，触发click事件就可以直接讲文件下载下来，json、txt文件，浏览器自动在新窗口打开，展示文件内容，需要添加download属性，他可以使a标签的href属性进行下载，如果填写指就会更改你的下载名称...
2022-06-07 21:07:59
841
原创 vue $emit调用父组件异步方法，返回结果后再执行子组件的方法
现象：子组件请求父组件的方法，触发数据更新，待数据返回后，才能进行后续的操作解决：使用回调函数的方式父组件： async getTaskListDetails(callback = () => {}) { const { pageSize, currentPage } = this.pagination const [res, err] = await taskListDetails({ limit: pageSize, start
2022-04-11 17:58:54
6196
原创 element 表格+分页封装
原因：element ui 的表格组件默认是不带分页的功能，但是实际工作中表格总是搭配分页功能一起出现的。封装在一起使用方便不需要每次都复制粘贴一大堆。可以根据自己的需求更改，自己根据设计图定义样式（目前是超过一页才显示分页）<template> <div class="common-table-paging"> <el-table v-loading="loading" class="common-table" sty
2022-03-30 15:34:05
2282
原创 el-date-picker结合dayjs快捷设置本周、上周、本月、上月
需求：只能选择今天之后的提起（不包括今天），点击本周、本月的时候不包括当天，也就是今天，默认展示前7天，接口需要的格式为时间戳。（使用moment.js、day.js这样的事件处理插件效率要比getTime高，省去很多数据处理）html： <el-date-picker @change="handleDateChange" v-model="form.date" type="daterange" clas...
2022-03-29 20:07:40
2058
原创 vue可以新增、删除动态表单封装
可以动态增加、删除的表单<template> <div class="dynamic"> <div v-for="(item, index) in formList" :key="index" class="item"> <slot :form="formList[index]" /> <span class="icon-wrap"><i v-if="!disabled && form
2022-03-29 19:42:34
1117
原创 vue平滑滚动到指定位置
需求：锚点导航问题，点击导航跳到对应的模块，两种方式1.滚动盒子滚动到指定高度 scrollTo（offsetTop每个模块顶部距离可滚动盒子的顶部偏移的像素值） goAnthor (selector) { const height = document.querySelector(selector).offsetTop const container = document.querySelector('.scroll-wrap') container.s
2022-03-09 11:34:15
2985
1
原创 vue图片上传、支持旋转（上传旋转后的图片方案）
思路：采用element的图片上传图片组件el-upload，上传图片后，canvas绘制旋转后的图片，将canvas绘制出来的base64文件转化成file文件上传关键代码： <el-form :model="formLabelAlign"> <el-form-item class="is-required"> <el-upload v-model="formLabelAlign.result_pic_p.
2021-10-29 17:25:24
3101
1
原创 vue request封装
import axios from 'axios'import { Message } from 'element-ui'import store from '@/store'let baseURLlet wsBaseURLif (process.env.NODE_ENV === 'development') { baseURL = ''} else { // baseURL = 'http://odhy.commu.gmtech.top' baseURL = `${window.
2021-08-31 20:21:07
1208
原创 vue判断图片是否存在，图片加载失败后显示默认图片
关于图片的一些小utils1.判断图片是否存在export function CheckImgExists(imgurl) { var ImgObj = new Image() // 判断图片是否存在 ImgObj.src = imgurl // 存在图片 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { return true } else {
2021-08-31 20:10:57
5550
原创 vue使div滚动到最底部动画
例如添加更多任务按钮等等，每次点击都要新生成一条记录，为了方便用户操作，使页面点击的时候可以自己动画懂div的最底端// <div ref="scroll"> ...</div> handleAddTask() { this.dataList.push({ //自己初始化的数据格式 data_list: [], timeValue: [moment().startOf('day').unix(), moment().startO
2021-08-26 17:04:03
1541
原创 vue判断定时任务此刻是否在任务时间段内
定时任务是每天都需要执行的操作，因此不能使用时间戳判断，时间戳是新建任务当天的时间。思路：抛弃日期，转化成时间来操作。可以转化成秒来判断，这样可以省去判断时，然后分，然后秒的逻辑。解决：（文章使用moment来做时间转化）1.得到以秒计算的时间getSeconds(val) { const h = moment(val).get('hours') const m = moment(val).get('minutes') const s = moment(
2021-08-26 16:43:00
2336
3
原创 element时间抽el-timeline触发点击事件的方法
直接在element的时间轴组件el-timeline-item上挂在点击事件是不生效的，只有点击在连接线的位置才能触发，这是因为在点击过程中，可能点击到的是el-timeline-item的子元素，比如el-timeline-item__timestamp is-bottom"></div>元素解决方法：在click上面加上修饰符.native <el-timeline> <el-timeline-item
2021-07-15 17:37:20
5926
4
原创 js将秒转化为时分秒
formateTime(time) { const h = parseInt(time / 3600) const minute = parseInt(time / 60 % 60) const second = Math.ceil(time % 60) const hours = h < 10 ? '0' + h : h const formatSecond = second > 59 ? 59 : second ..
2021-05-08 10:50:43
8832
1
原创 canvas画布圈定区域、撤销和恢复、清除、完成功能的实现
需求：在一定区域内使用canvas画布圈定区域。并且可以点击撤销、恢复、清除、完成等功能实现思路。初始化：points=[] 画面上点数 allPoints=[] 总点数 step=-1 步数（操作次数 ） isEnded=false 结束标记，判断是否完成了圈定操作鼠标点击圈定区域：1.points.push（x,y）当前的坐标2.step++3.allPoints=...
2021-05-07 14:58:53
2009
原创 vue数组赋值为空，检测不到变量的变化
vue逻辑处理中，直接给数组变量赋值为空例如 this.arr=[]，后面操作将不会在监听此变量的变化可以使用this.arr.splice(0)给清空数组
2021-04-26 17:30:52
3118
2
原创 前端模块化总结
模块化的好处：避免命名冲突(减少命名空间污染)、更好的分离, 按需加载、更高复用性、高可维护性现在开发中最流行的有：CommonJS, AMD, ES6、CMDCommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅。CMD规范与AMD规范很相似，
2021-03-12 16:22:27
208
原创 高频面试手写代码练习3--bind
Function.prototype.myBind=function(context){ if(typeof this!=='function'){ throw new TypeError('error') } let args=[...arguments].slice(1) let fn=this return function Fn(){ //this instanceo..
2021-03-04 17:32:21
121
1
原创 高频面试手写代码练习2--深复制
普通方法：1.JSON.parse(JSON.stringify(obj)) //不能复制function、正则、Symbol 、循环引用报错（obj.test=obj）、相同的引用会被重复复制 2.lodash的方法 _.cloneDeep(obj) //常用 3.面试中经常会遇到手写实现深复制function isObject(obj) { return typeof obj === 'object' ...
2021-03-01 19:44:48
99
原创 高频面试手写代码练习1--防抖节流
防抖：如果短时间内大量触发同一事件，只会执行一次函数。--滚动页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）function debounce(fn,delay){ let timer=null let that=this return function(){ if(timer){ clearTimeout(timer) }
2021-02-25 16:33:56
124
原创 vant表单回显之后无法编辑
遇到个坑，使用vant的表单组件van-form，回显之后，发现无法在输入框定义文字解决方案：必须在data中定义的表单所绑定的modal（不可以吧modal定义成{}）一.template中引入<van-field v-model="formData.test" name="test" label="xxx" clearable input-align="right" placeholder
2021-01-15 16:16:30
1450
原创 mac电脑前端环境整合链接汇总（自用）
新建位于文件夹位置的终端窗口：https://blog.youkuaiyun.com/victorai60/article/details/30503081node官网：https://nodejs.org/en/node淘宝镜像：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org绑定host：appstore下载iHostgit：https://www.jianshu.com/p/c058fbd7bb90vscod
2020-12-23 00:39:45
170
原创 git多人开发操作步骤
1.在开发完本地部分的内容后，先提交到本地仓库git add . #提交暂存区git commit -m '****' #提交本地仓库2.从远端拉取master分支的内容更新到本地 > git pull origin master #拉取master的代码，合并到本地（使用merge） > git pull --rebase origin mas...
2019-01-03 18:44:37
4930
原创 react路由跳转传递参数
需求：路由跳转的时候将参数传递给跳转之后的页面。路由： <Route path='/confirmOrder' component={ConfirmOrder} />方案一：使用query，特点是参数会出现在url上，刷新页面数据不会丢失browserHistory.push({pathname:'/confirmOrder', query : { deliveryPri...
2018-12-26 11:20:25
7788
1
原创 【echarts应用】--横轴每五分钟取一个点，动态时间轴实现
需求：折线图需要定点时间（例如五分钟）取一个点，在一段范围内（昨天的某个时间点到目前时间或者今天凌晨12点到目前的时间点），这种动态生成的时间轴。以下以从当天的十二点开始，到当前时间点为止（五分钟以及其他时间一个道理）的demo推荐一个很好用的获取时间以及改变想要的时间格式的插件moment.js（http://momentjs.cn/）1.封装function timeCo...
2018-12-05 16:07:20
8612
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人