前端
前端
Hello攻城狮
当你想要放弃的时候,想想当初为什么坚持到这里。
展开
-
如何将不标准的json字符串转换为json对象
如何将非标准json字符串转为标准json字符串原创 2023-05-25 11:26:54 · 1408 阅读 · 0 评论 -
vue2.x集成jest
vue2.x集成jest,步骤及问题解析原创 2023-01-06 15:58:06 · 878 阅读 · 2 评论 -
vue2.x和vue3.x 环境相关配置
vue配置多环境,vue2和vue3根据环境加载js文件原创 2022-12-01 14:45:20 · 705 阅读 · 0 评论 -
vue3兄弟组件通信-mitt
vue3兄弟节点通信使用mitt原创 2022-10-24 10:33:42 · 804 阅读 · 0 评论 -
Element Plus 表格后端排序
element、element plus 表格tabel后端排序,取消默认空状态原创 2022-08-12 11:19:56 · 3968 阅读 · 1 评论 -
使用template.js加lightgallery展示图片问题
问题描述:第一次点击可以预览图片,分页第二次获取图片后不生效解决办法:初始化lightgallery前,先销毁以前的实例 if($("#lightgallery").data("lightGallery")) $("#lightgallery").data("lightGallery").destroy(true); $('#lightgallery').lightGallery();...原创 2022-04-27 16:48:14 · 324 阅读 · 0 评论 -
前端解析后端文件流并下载
后端返回的文件流,前端下载1.首先指定返回数据格式为blob:responseType: 'blob'2.将文件流解析为路劲,并下载例如: // 通过id查询文件流,将文件流转为url API.common.downloadFile(fileId).then((res) => { if (!res.headers['content-disposition']) return this.$message.error('文件不存在') let fileType =原创 2021-12-21 15:57:19 · 807 阅读 · 0 评论 -
template.js动态展示轮播图,轮播图不显示问题
使用template.js把轮播图的图片渲染到页面后,发现无法显示;这一切是dom的缺失,还是bootstrap插件的沦丧?让我们走进代码的世界,找寻真相。首先,打开控制台发现,图片dom是生成了的,排除dom的缺失其次,换了一个插件Swiper,发现效果一样,排除插件的沦丧把动态数据换成假数据,发现没问题;那就只有从轮播图本身去寻找答案了最后发现,按道理轮播图的实例化是在dom生成后,所以假数据没问题,而采用template.js后实例化轮播图的时候dom还没生成完,所以最后dom虽然有了,但原创 2021-10-26 10:38:12 · 1802 阅读 · 0 评论 -
vue 首次进入首页加载缓慢解决方案
1.使用路由懒加载方式有很多种,我采用如下:注:webpackChunkName表示将打包后的放到一个模块中,使用后会减少生成的js个数2.使用cdn在打包后发现vendor.js 文件占用内存特别大,这里面主要是使用的一些第三方库,例如 vuex,vue-router,axios,elementUI 等文件我们除了在使用过程中单个组件引用,还可以使用CDN 加载。通过在index.html 中直接引入第三方资源来缓解我们服务器的压力,其原理是将我们的压力分给了其他服务器站点。3.将打包后比原创 2021-10-24 17:44:14 · 1779 阅读 · 0 评论 -
quill实现上传文件
1.首先工具栏配置加上upload,如图:这时会发现上传图片没有显示出来,需要自定义一个上传的图标,在阿里云矢量图标库下载一个就可以了2.图标样式修改/deep/.ql-upload{ background: url("./../../assets/img/upload.svg") !important; background-size: 20px 20px !important; background-position: center center !important; back原创 2021-10-20 14:46:41 · 3085 阅读 · 4 评论 -
vue 断开发送的请求,解决接口重复请求数据错误问题
1.问题描述,进入页面时第一个接口还在请求,立即切换tab请求第二个接口。但是第二个接口响应比第一个接口响应快,页面展示的时第一个接口的数据,如图:解决方法,判断如果是相同的接口,中断上一个接口,数据就永远是最新的接口返回的, 代码:let pending = [] //声明一个数组用于存储每个请求的取消函数和请求标识let cancelToken = axios.CancelTokenlet removePending = (ever) => { for (let p in pendi原创 2021-09-30 16:05:39 · 1265 阅读 · 0 评论 -
vue路由传参-使用encodeURI加密参数
在路由切换时页面需要使用地址栏传参,但地址栏会暴露参数的值,然后想到了encodeURI加密参数比如参数是一个对象objobj:{ id: 1, name: 'Tom'}那么需要将参数转换为JSON字符串,在使用encodeURI加密,需要注意的是通过路由跳转的时候会自动解密一次,所以需要加两次密 let param = { id: 1, name: 'Tom' } param = encodeURI(JSON.stringify(param))原创 2021-09-07 10:43:30 · 6679 阅读 · 0 评论 -
vue中使用tailwindcss
1.根据官方文档引入最新的tailwindcssnpm install tailwindcss@latest postcss@latest autoprefixer@latest遗憾的是现在不支持最新的 postcss8卸载8安装7卸载:npm uninstall tailwindcss postcss autoprefixer安装7:npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-co原创 2021-08-27 15:07:57 · 1443 阅读 · 2 评论 -
ant design vue 实现table组件合计栏
在table底部需要显示合计栏,主要实现方式:使用table底部插槽。实现效果:出现滚动条后,合计栏跟随table滚动css样式修改: table和合计栏数据对其,合计栏隐藏滚动条 /deep/ .ant-table-footer { padding: 0; } /deep/ .ant-table-footer .ant-table-body { overflow: hidden !important; } /deep/ .ant-table-footer原创 2021-07-23 16:18:24 · 4974 阅读 · 34 评论 -
解决ant design vue 在table中异步显示图片问题
遇到的问题是,table列表中有图片,但后端只给了id,而且图片预览有权限认证,所以直接把图片路劲放入src行不通,只能异步去拿,首先我想到的办法是,在插槽中去调用图片预览的方法:就像这种<--! htm --> <div class="custom-table-column-icon"> <span v-if="scope.headImgUrl" ><img heig原创 2021-07-19 10:15:07 · 1292 阅读 · 1 评论 -
前端将后端返回的文件流显示为图片
后端返回的文件流,前端怎么显示出来呢?1.多年前端开发经验的我目前用的最多的是:直接将请求地址写在src里面,如:<img src="/file/preview/picture.png" alt="图片">或者:<img src="/file/preview/picture2.png?token=eyJqdGkiOiIxIiwiaXNzIjoibHZqdW4iLCJpYXQiOjE2MjU3MDcxODAsInN alt="图片">",这样即直接又简单。2.但是由于后台加上鉴权后原创 2021-07-08 14:41:59 · 15741 阅读 · 2 评论 -
js中forEach、filter、map的区别
forEach、filter、map都可以遍历数组,那么三者有什么区别?区别:1.forEach遍历数组全部元素,利用回调函数对数组进行操作,不会返回新的数组,return只用于控制循环是否跳出当前循环;filter返回一个新的数组,filter方法需要在循环的时候判断一下是true还是false,是true才会返回这个元素;map根据当前数组映射出一个新的数组,返回新的被改变过值之后的数组,需要return。2.forEach主要用于改变当前数组里面的值,比如: let arrOne = [原创 2021-04-29 10:29:22 · 5520 阅读 · 0 评论 -
小程序中,echarts层级太高盖过了自定义时间组件问题
1.使用echarts画了两个柱状图,结果盖过了自定义的时间组件,如图:在网上找了各种解决方式都没起作用,最后还是想了个偏方解决的,方法是:在显示时间组件的时候隐藏echarts的图层,时间组件隐藏后显示echarts图层,完美解决...原创 2021-03-29 16:27:54 · 1264 阅读 · 1 评论 -
vue父组件内数据改变后,子组件页面不刷新问题
想要实现效果:问题描述:子组件是一个表单,表单内数据变化后,在父组件会自动保存并获取计算公式的值,但是获取到公式的值后页面无法刷新,如图:解决方法:(可能有朋友会说使用Vue的set来强制刷新,但是强制刷新的是父组件的数据和页面,子组件依旧没有刷新)我的办法是给子组件加一个key,得到公式 的值后key也随之改变,子组件也会跟着改变。如下图:timeRefusr的初始值我用的当前时间的时间戳:timeRefusr: new Date().getTime(),在公式值改变后刷新timeRef原创 2021-03-29 16:11:00 · 7023 阅读 · 5 评论 -
vue 使用scroll实现锚点
1.最近出来一个新需求,要求滚动分组时右边出现导航栏,可以通过导航栏跳转到相应分组,最开始毫无头绪,万万没想到,最后还是实现了,实现效果如下:2.首先监听滚动@scroll="scrollEvent",滚动方法实现如下:// 监听滚动 scrollEvent (e) { this.showMao = true // 显示导航栏 let scrollItems = document.querySelectorAll('.temp-items') for (let原创 2020-12-14 12:00:07 · 1075 阅读 · 0 评论 -
vue 两种拖拽插件及实现
vuedraggablevuedraggable 是标准的组件式封装,并且将可拖动元素放进了 transition-group 上面,过渡动画都比较好。vuedraggable 拖动后可以在updated中监听vuedraggable 的拖动规则是:拖动元素后到新位置,后面元素依次退一个位置,如:安装 vuedraggable :npm install vuedraggable --save在页面引用import vuedraggable from 'vuedraggable'; c原创 2020-09-15 14:56:26 · 5734 阅读 · 5 评论 -
webstrom导入代码格式配置文件
直接上配置文件<code_scheme name="Project-Name"> <option name="HTML_DO_NOT_INDENT_CHILDREN_OF" value="html,body,thead,tbody,tfoot,script" /> <option name="FORMATTER_TAGS_ENABLED" value="true" /> <HTMLCodeStyleSettings> <option原创 2020-09-03 18:23:37 · 448 阅读 · 0 评论 -
Element Tree树形组件懒加载,刷新数据
在项目中很多机构管理中会用到tree展示机构数据,当数据发生改变后该怎么刷新呢?在网上搜索了很久,最后结合网上的方案自己想到了一个办法。1.首先在第一次初始化的时候把node和resolve保存下来为rootNode和rootReslove,2.数据改变的时候删除保存下来的node的children,将rootNode和rootReslove做为参数手动调用load方法,比如说在新增成功后直接调用this.resetNode()就能刷新tree,相关代码: <el-tree原创 2020-08-31 10:44:32 · 5210 阅读 · 1 评论 -
解决浏览器不能自动播放音频问题
现在主流浏览器对音频做了一些限制audio的autoplay属性没有作用了解决方案一:使用embeb标签<embed src="music/G.E.M.邓紫棋-飘向北方(Live).mp3">方案二:使用iframe,不过iframe会阻断js执行,所以必须放在body最后...原创 2020-08-25 15:43:18 · 4001 阅读 · 0 评论 -
vue按需引入vant
1.首先下载vantnpm install vant save2.新建vant.js,在里面引入需要的组件:例如import Vue from 'vue'import { Button, NavBar, Dialog, Toast, Row, Col, Cell, CellGroup, Icon, Field, Loading, Form, Tabbar, Tab, Tabs, List, TabbarItem, PullRe原创 2020-08-25 11:29:52 · 567 阅读 · 0 评论 -
解决el-radio-group页面不刷新问题
问题:使用v-show后el-radio-group点击后页面不刷新了,但值是改变了的。如下图所示:解决办法:在el-radio-group加一个@change事件如: <el-form-item label-width="30px" v-if="!edit"> <el-radio-group @change="checkAddType" v-model="formData.resource"> <el-radio label="on原创 2020-08-19 10:39:42 · 2692 阅读 · 3 评论 -
前端初级挑战赛-面试题总结
前段时间疯狂面试了一个周,总结了一下面试题,希望能帮到小伙伴们1.javascript(1) es6用过哪些(2) 说说promise怎么使用(3) 克隆,深克隆怎么代码实现(4) 去掉页面上img标签的src属性的前面三个字符(5) 使用两种方法对数组arr排序(6) 以下代码输出什么:function test() { console.log(1); setTimeout(function () { console.log(2); },0) ; setTimeout(function (原创 2020-08-12 20:18:17 · 274 阅读 · 0 评论