- 博客(33)
- 收藏
- 关注
RSS订阅转载 【前端面试】面试官：纯前端如何实现录屏并保存视频到本地？
作为一个资深的切图仔，我们难免会需要用到把自己写的页面的一些功能通过视频的方式分享给别人。还有一个场景，就是当我们面试的时候，我们需要把我们的屏幕分享给面试官看，那么这些都是怎么实 现的呢？那么接下来我们就通过这篇文章来学习一下如何实现一个浏览器录屏的功能。
2023-11-08 14:13:39
311
2
原创 vue2之 vue-i18n 插件报错-Uncaught TypeError: Cannot read properties of undefined (reading ‘0‘)
vue2 vue-i18n 插件报错 Uncaught TypeError: Cannot read properties of undefined (reading '0') 根本原因 _watchers[0].constructor _watchers undefined·导致开发环境页面白屏
2023-09-18 11:29:43
1622
原创 google 浏览器出现 ERR_PROXY_CONNECTION_FAILED 无法访问网络
关于解决浏览器出现 ERR_PROXY_CONNECTION_FALLED
2022-12-26 09:25:59
2554
2
原创 el-form之表单校验自动定位到报错位置
使用 elementui 的 el-from 组件表单校验不通过，自动定位到校验失败的表单项的位置，提高用户体验。
2022-07-09 10:41:48
4827
7
原创 js 合并两个二维数组成为数组对象
使用场景在使用element-ui的级联选择器展示省市区（多选），后端需要传递数组对象格式里面包含每个选中的省市区的name和code数据.但是只能直接取到选中的code，可以使用ref来拿到级联选择器的getCheckedNodes方法来获取当前选中的省市区name；最终将两个二维数组合成一个数组对象的格式传给后端，数据结构以及代码如下：模板代码 <el-cascader ref="serveArea" v-model="form.installServiceArea"
2022-01-23 18:54:53
2476
原创 vue 中使用节流和防抖
今天事情比较少，就特意研究了下在vue中如何使用节流和防抖，还有节流防抖我真的是傻傻的分不清楚，不知道什么时候使用节流，什么时候使用防抖…1. 节流-方法1在 utils.js 文件里面加入下面的方法// 节流export function _throttle(fn, wait = 200) { let last; timer; return function() { let th = this; let args = arguments; let now = +
2021-04-22 17:14:05
5122
6
原创 css 完美解决图片变形问题
开发 h5 的时候测试给提了一个 bug 图片变形，开发的时候还真没注意，确实变形了开起来怪怪的，然后就顺利找到了解决办法，废话不多说先呈上解决方法：<div class="imgWrap"> <img src="@/assets/images/copter.jpg" alt=""></div> .imgWrap { width: 300px; height: 300px; border: 2px solid skyblue;
2021-04-22 11:33:09
3026
原创 elementui el-pagination 分页组件封装
分页组件是比较常用的，有表格的地方基本上都存在分页，使用 elementui 里面的分页进行封装方便使用。一. 后端分页<template> <div class="pagination"> <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="propP
2021-04-20 12:02:11
905
原创 ElementUI upload 组件封装
开发中遇到了个上传合同的需求，使用的是 elementui 的上传组件，项目中使用比较多，进行了封装，开发完成后总结一下，供大家和自己使用时查看。上代码！1. 模板代码<template> <div class="uploadFile" style="margin-top:15px;"> <!-- 上传组件 --> <el-upload v-loading="loading" mult
2021-04-15 18:53:08
1196
原创 vue pdf 预览下载功能 vue-pdf
开发新项目的时候遇到了合同的预览下载功能，之前没有做过，实现之后记录一下，方便以后查阅。1. 下载 vue-pdf 插件npm install --save vue-pdf或者cnpm install --save vue-pdf2. 所需页面引入 vue-pdf我的 pdf 预览是在弹窗中展示， 根据自己的项目实际情况来展示<!-- 模板代码 --！><div class="pdfPreview"> <el-dialog :close-o
2021-04-05 15:56:29
2817
16
原创 elementui el-dialog 作为子组件使用关闭时报错
1. 弹窗作为子组件父组件通过点击事件来打开弹窗，然而，在弹窗中点击窗外之外的空白区域或者右上角叉时候一直报错:翻译：避免直接改变一个道具，因为当父组件重新渲染时，这个值会被覆盖。相反，使用基于道具值的数据或计算属性。正在发生突变的道具:“editVisible”2. 原因分析从翻译来看，子组件中不能直接更改父组件传递过来的数据，然后就按照提示将传递过来的数据在 data 和 computed 都重新复制一遍，仍然报同样的错。3. 解决方法最后通过一行代码顺利解决，在弹窗上加上 :before
2021-03-23 14:51:39
1155
原创 elementui dialog组件固定高度
弹窗高度过大，想设置个自适应的高度，固定头尾/deep/.el-dialog { margin: 5vh auto !important;}/deep/ .el-dialog__body { height: 70vh; overflow: auto;}margin，height 可根据实际情况设置大小。效果图：欢迎大家留言交流！...
2021-03-16 17:14:23
5283
2
原创 最全数组方法（ES5,ES6）总结
总结一些经常用到的数组的方法，便于自己和大家开发使用中的查阅。arr.push() 从后面添加元素，返回值为添加完后的数组的长度let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素下面展示一些 内联代码片。let arr = [1,2,3,4,5]console.log(arr.pop())
2021-02-01 17:38:45
273
原创 vue使用 vue-qr 和 html2canvas 链接生成普通二维码和海报二维码
首先下载插件npm i vue-qr --savenpm i html2canvass --save链接生成二维码并下载到本地// 模板中的代码 <el-dialog :visible.sync="showDownloadDialog" title="测评下载" width="35%"> <div class="dialog-content"> <el-
2020-11-20 15:30:56
2204
3
原创 element tooltip组件在table组件中的使用
需求：在表格中超出两行后显示省略号，鼠标进入在tooltip框中显示文本信息，随后将tooltip封装成立组件使用。OverFlowText.vue<!-- 组件功能：文本溢出时，显示tooltip --><template> <el-tooltip manual v-model="isShow" :disabled="!isShow" :width="tableWidth"
2020-11-19 18:14:36
2597
2
原创 element table组件用css实现鼠标进入表格当前行显示删除图片
现在有一个需求鼠标进入表格的当前行，显示操作列的删除图标，鼠标移出隐藏，发现一种超级简单的实现方法，只用ss就能实现。直接上代码在需要隐藏显示的元素上加上 delImg 就可以了 就这么简餐粗暴.delImg { cursor: pointer; opacity: 0;}.el-table__body tr:hover { .delImg { opacity: 1; }}ps：说下为什么要用 opacity 属性进行显示隐藏，如果用display 属性进行操作的话，
2020-11-16 09:56:13
642
原创 使用css实现滚动到页面对应的位置
废话不多说先上代码<div class="back-top-item" @click="turnFeeConsultation"> <div class="feeConsultation"></div> <p class="text">收费咨询</p></div>turnFeeConsultation() { this.$nextTick(() => document.g
2020-10-29 10:07:42
1828
原创 vue.js学习总结（持续更新）
一. vue.js教程总结1. Object.freeze()阻止 数据改变时，视图会进行重渲染的现象。2. vue暴露了一些有用的实例属性与方法，加上前缀 $vm.$data === data // => truevm.$el === document.getElementById('example') // => true// $watch 是一个实例方法vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm
2020-09-04 13:42:02
792
原创 element 上传组件使用
1. 单张图片上传第一次使用element的上传组件，总结一下希望能够帮助到大家，也便于自己以后使用。（大家可以根据自己所需来添加更改绑定的属性。）<el-upload class="avatar-uploader" accept="image/jpeg" :show-file-list="false" :headers="{ token: token}" :action="actionUrl" :on-success="handleAvatarSuccess" :be
2020-08-21 15:26:36
556
原创 element 开关组件显示开关文字总结
1. 显示开关文字表格中使用开关组件，官方例子的文字描述是显示在开关组件的后面，如何显示在组件上呢？废话不多说直接上教程。html<el-table-column label="是否显示"> <template v-slot="scope"> <el-switch v-model="scope.row.show" class="switchStyle" :active-value="1" :inactive-
2020-08-21 14:40:12
2641
2
原创 vue 路由拆分
1. 问题随着项目越来越大，路由会越来越多，如果路由都写在同一个文件中会显得页面混乱，可读性很差，不易查找维护。2. 解决方法拆分路由：在 router 文件夹中创建新的文件shoppingMallBusiness.js 文件里面还按照正常路由写法index.js 文件引入const router = new Router({ routes: [ ...shoppingMallBusiness, // 电商商户端 ],})...
2020-08-19 16:27:36
742
原创 CSS 水平居中，垂直居中，水平垂直居中总结
1. 水平居中 <div class="father"> <div class="son">水平居中</div> </div>1. /* 行内元素 */.father { text-align: center;}.son { background: red;}/* 块级元素 */2. /* 已知宽度 */.son { width: 200px; background: red; margin: 0 au
2020-06-30 15:50:15
218
原创 H5和Android ios交互
1. 判断手机是安卓或者ios方法1.1 添加判断机型方法（适用于Android和ios调用方法不一样）// checkDeciveTyoe.jsfunction checkDevice() { // js判断是否是苹果设备 function checkIsAppleDevice() { var u = navigator.userAgent, app = navigator.appVersion; var ios = !!u.match(/\(i[
2020-06-30 14:23:18
188
原创 图片和span标签水平垂直对齐
HTML<ul class="topUl"> <li> <img src="@/assets/propertyPayCost.png"> <span>物业缴费</span> </li></ul>CSS.topUl li { height: 60px; line-height: 60px;}.topUl img { width: 24px; margin-right: 8p
2020-05-27 15:28:32
1671
原创 vue使用vant的list组件使用
模板代码<van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="pullupLoadMore"> <ul v-for="(item,id) in allHouseDetail" :key="id" > <li @click="chooseRoom(item.roomAddress,item)">{{ ite
2020-05-26 17:21:46
3588
2
原创 vue移动端长按事件触发删除按钮
利用移动端的touchstart touchend touchmove 事件结合 实现长按事件的触发<div class="item" @touchstart="gtouchstart(item)" @touchmove="gtouchmove()" @touchend="gtouchend()" v-for="(item) in userHouseDetail" :key="item.id"><p class="cancel" v-sh
2020-05-25 17:32:02
2154
3
原创 vue输入框使用模糊搜索
实现原理:利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置。模板中的代码<div class="search"><!--输入框使用的是vant的输入框组件--> <van-search @input="autoSearch" v-model="value" placeholder="请输入搜索关键词" style="width:90%; display:inline-block;"
2020-05-25 10:15:13
2692
原创 js数组求和方法
方法一：for循环遍历每一项相加 function sumArr (arr) { var sum = 0; for(var i = 0;i<=arr.length;i++){ sum += arr[i]; // 若果不是数字类型 // sum += +arr[i]; } return sum;}方法二：es6的forEach方法function sumArr (arr) { var sum = 0; arr.f
2020-05-20 17:08:32
1668
原创 CSS文字自动换行
word-break属性:normal 只在允许的断字点换行（浏览器保持默认处理）。break-word 在长单词或 URL 地址内部进行换行。white-space属性:normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wrap 保留空白符序列，但是正常地进行换行。pre-line 合并空白符序列，但是保留换行符
2020-05-19 11:56:02
12894
原创 vue页面刷新文本框自动获取焦点
使用Vue.nextTick实现进入页面文本框自动获取焦点场景:页面加载时需要让文本框获取焦点用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM<input type="text" ref="inputs">mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick this.$nextTick(() => { this.$refs.inputs.focus() //
2020-05-15 17:27:33
1215
4
原创 vue.config.js 常用配置总结
第一次写博客，哈哈哈。。。1. publicPath部署应用包时的基本 URLpublicPath:' ' 或者 publicPath:'./'2. outputDir打包生成文件出口outputDir: 'dist'3. asstsDir放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。3. indexPath指定输出路径 相当于outputDir，绝对路径idnexPath: 'index.htnl'4. filenam
2020-05-13 14:28:28
2096
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人