- 博客(75)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 基于element封装的树形组件
方法判断选中还是取消选中，如果选中则判断是否为一级组织，如果是那么全选该组织下子组织；实现逻辑：左边未查询下级则仅选中当前组织，根据。
2023-04-25 16:04:28
196
原创 使用template.js加lightgallery展示图片问题
问题描述：第一次点击可以预览图片，分页第二次获取图片后不生效解决办法：初始化lightgallery前，先销毁以前的实例 if($("#lightgallery").data("lightGallery")) $("#lightgallery").data("lightGallery").destroy(true); $('#lightgallery').lightGallery();...
2022-04-27 16:48:14
278
原创 微信小程序图片自适应高度问题
微信小程序，想实现图片高度自适应只需加上一个属性：<image src="{{url}}" mode="widthFix" style=“height: 80vh” />
2022-03-31 10:50:20
299
原创 vue路由history模式404问题
1.vue路由使用history部署到服务器后发现回车或者刷新网页404解决方法：nginx配置文件加入 try_files $uri $uri/ /index.html last;如：
2021-12-21 16:38:05
213
原创 前端解析后端文件流并下载
后端返回的文件流，前端下载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
752
原创 template.js动态展示轮播图，轮播图不显示问题
使用template.js把轮播图的图片渲染到页面后，发现无法显示；这一切是dom的缺失，还是bootstrap插件的沦丧？让我们走进代码的世界，找寻真相。首先，打开控制台发现，图片dom是生成了的，排除dom的缺失其次，换了一个插件Swiper，发现效果一样，排除插件的沦丧把动态数据换成假数据，发现没问题；那就只有从轮播图本身去寻找答案了最后发现，按道理轮播图的实例化是在dom生成后，所以假数据没问题，而采用template.js后实例化轮播图的时候dom还没生成完，所以最后dom虽然有了，但
2021-10-26 10:38:12
1647
原创 vue 首次进入首页加载缓慢解决方案
1.使用路由懒加载方式有很多种，我采用如下：注：webpackChunkName表示将打包后的放到一个模块中，使用后会减少生成的js个数2.使用cdn在打包后发现vendor.js 文件占用内存特别大，这里面主要是使用的一些第三方库，例如 vuex,vue-router,axios，elementUI 等文件我们除了在使用过程中单个组件引用，还可以使用CDN 加载。通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。3.将打包后比
2021-10-24 17:44:14
1682
原创 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
2782
4
原创 vue 断开发送的请求，解决接口重复请求数据错误问题
1.问题描述，进入页面时第一个接口还在请求，立即切换tab请求第二个接口。但是第二个接口响应比第一个接口响应快，页面展示的时第一个接口的数据，如图：解决方法，判断如果是相同的接口，中断上一个接口，数据就永远是最新的接口返回的， 代码：let pending = [] //声明一个数组用于存储每个请求的取消函数和请求标识let cancelToken = axios.CancelTokenlet removePending = (ever) => { for (let p in pendi
2021-09-30 16:05:39
1156
原创 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
6096
原创 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
1318
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
4728
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
1194
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
14149
2
原创 二次封装element table组件
element的table组件其实已经很完善了，不过调用的时候需要些很多重复的标签比较臃肿，所以我打算封装一个通用tabel的组件。首先是页面： <div class="table-container"> <el-table fit :height="config.height" :size="config.size" ref="tableList" tooltip-effect="light"
2021-06-15 15:24:44
293
原创 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
5208
原创 小程序中，echarts层级太高盖过了自定义时间组件问题
1.使用echarts画了两个柱状图，结果盖过了自定义的时间组件，如图：在网上找了各种解决方式都没起作用，最后还是想了个偏方解决的，方法是：在显示时间组件的时候隐藏echarts的图层，时间组件隐藏后显示echarts图层，完美解决...
2021-03-29 16:27:54
1192
1
原创 vue父组件内数据改变后，子组件页面不刷新问题
想要实现效果：问题描述：子组件是一个表单，表单内数据变化后，在父组件会自动保存并获取计算公式的值，但是获取到公式的值后页面无法刷新，如图：解决方法：（可能有朋友会说使用Vue的set来强制刷新，但是强制刷新的是父组件的数据和页面，子组件依旧没有刷新）我的办法是给子组件加一个key,得到公式 的值后key也随之改变，子组件也会跟着改变。如下图：timeRefusr的初始值我用的当前时间的时间戳：timeRefusr: new Date().getTime(),在公式值改变后刷新timeRef
2021-03-29 16:11:00
6888
5
原创 element树形组件tree节点增删改操作
1.目的：使用element树形组件tree懒加载方式显示数据，对数据进行增加、删除、修改，效果如下图：2.使用tree懒加载方式，对数据操作，最重要的就是记住当前操作的节点，如果是新增、修改则刷新当前节点，如果是删除则是刷新父级节点3.上代码，tree页面代码<el-container v-loading="loading" class="area-manage page-container"> <el-aside width="250px"> <e
2021-01-06 11:42:25
5869
4
原创 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
1041
原创 vue 两种拖拽插件及实现
vuedraggablevuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。vuedraggable 拖动后可以在updated中监听vuedraggable 的拖动规则是：拖动元素后到新位置，后面元素依次退一个位置，如：安装 vuedraggable ：npm install vuedraggable --save在页面引用import vuedraggable from 'vuedraggable'; c
2020-09-15 14:56:26
5425
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
390
原创 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
4960
1
原创 m3u8格式直播地址
CCTV-1到CCTV-14，改为相应cctv1hd就可以http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8CHC高清电影http://ivi.bupt.edu.cn/hls/chchd.m3u8北京卫视高清http://ivi.bupt.edu.cn/hls/btv1hd.m3u8北京文艺高清http://ivi.bupt.edu.cn/hls/btv2hd.m3u8北京体育高清http://ivi.bupt.edu.cn/hls/btv6hd.m3u
2020-08-26 15:20:41
30385
2
原创 解决浏览器不能自动播放音频问题
现在主流浏览器对音频做了一些限制audio的autoplay属性没有作用了解决方案一：使用embeb标签<embed src="music/G.E.M.邓紫棋-飘向北方(Live).mp3">方案二：使用iframe,不过iframe会阻断js执行，所以必须放在body最后...
2020-08-25 15:43:18
3788
原创 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
525
hibernate.5.1.0.jar全部
2018-08-14
Spring4.3+springmvc全套jar包
2018-08-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人