- 博客(23)
- 收藏
- 关注
RSS订阅转载 web前端性能优化
一、页面内容优化1.减少http请求次数2.减少DNS查询次数3.避免页面跳转4.缓存ajax5.延迟加载6.预加载7.减少dom元素数量8.减少iframe数量9.避免404二、css优化1.将样式表置顶2.用link代替@import3.避免使用filters4.css文件合并压缩三、js代码优化1.将脚本置底2.使用外部js文件和css文件3.去除重复脚本，避免重复的资源请求4.减少dom访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页
2022-03-15 12:14:37
795
原创 v-html 点击事件不生效解决办法
保姆级教程从后台获取的字符串中含有@click事件，而鼠标点进去却不生效，解决办法就是使用组件渲染而不是v-html。具体代码如下：<template> <div><!-- props中的字符串 从后台获取到的 传给子组件 --> <article :html="matchcontent"></article> </div></template><script> import {
2020-09-01 14:34:05
1843
原创 vue 后退不刷新
假设有两个页面:列表页A和详情页B，现需求从A页面进入B页面刷新，从B页面回退A页面不刷新。解决方案使用keepAlive在 App.vue 插入以下代码： <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 Home！ --> </router-view> </keep-alive>
2020-08-20 13:37:25
691
原创 vue 子组件调用父组件中的方法
第一种在子组件中通过this.$parent.event来调用；父组件：<template> <div> <testchild></testchild> </div></template><script> import testchild from "./testchild"; export default { components: { testchild },
2020-07-22 20:42:49
160
原创 echarts图例分页和图例之间的间距
echarts图例分页和图例之间的间距在配置文件中找到legend属性添加type="scroll"即可，感兴趣的小朋友可以一试。开发过程中，我们经常会遇到各种各样的奇葩需求，这时就需要我们随机应变啦！当我们使用echarts图表时，数据量一般都会很大，图例往往会多的挤到下面的图中，若是能把图例写成分页就可以很好的解决这一问题。 <div id="main" style="height:600px;"></div> <script> var m
2020-06-20 15:38:44
6730
原创 elementui表格分页功能的实现
elementui表格分页功能的实现废话不多说，直接上代码最终实现效果废话不多说，直接上代码<templat
2020-06-13 18:02:08
247
原创 表格td的宽度不随内容自适应
表格td的宽度不随内容自适应在table上添加 style=”table-layout:fixed;word-break:break-all;”然后在相应的td上添加宽高即可。语法：word-break:normal;使用浏览器默认的换行规则；word-break:break-all;允许在单词内换行；word-break:keep-all;只能在半角空格或连字符处换行；table-layout:automatic;默认，列宽度由单元格内容设定；table-layout:fixed;列宽由表
2020-05-29 18:35:57
2633
原创 数组对象去重
数组对象去重var list=[{name:"aaa",value:"111111"},{name:"bbb",value:"22222"},{name:"ccc",value:"33333"},{name:"aaa",value:"4444"}];//数组对象去重function unique(arr){ // 利用对象访问属性的方法，判断对象中是否存在key var newArr = []; var obj = {}; for (var i = 0; i
2020-05-14 11:39:06
179
原创 关于echarts的y轴文字超出的解决方案
关于echarts的y轴文字超出的解决方案类似这种，文字超出用“…”替换，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2019-09-16 10:37:45
3684
原创 下拉多选插件
关于下拉多选插件select2的使用方法formSelect的用法见下目前我了解到的下拉多选的插件有两个，一个是select2,另一个是formSelect。本文主要介绍如何使用这两个插件。select2的使用方法到github上选择一个版本下载到本地github网址: https://github.com/select2/select2/tags;select2网址：https://...
2019-07-26 18:24:32
276
原创 什么是伪数组，如何将伪数组转为真数组
什么是伪数组，如何将伪数组转为真数组注意：如果length的属性值为0，那么这个对象有没有元素都无所谓；若是length的值不为0，则这个对象中一定会有下标为length-1的属性值。什么是伪数组？常见的伪数组有：a.具有length属性；例如：var obj={0:“lily”,1:21,2:“abc”} //不是伪数组，没有length属性var obj={0:“lily”,1:...
2019-07-19 17:42:39
533
原创 jquery动态添加、删除dom元素
jquery动态添加、删除dom元素点击标签，在下方动态添加选中的元素及内容，再次点击标签，在下方动态删除选中的标签及元素点击标签，在下方动态添加选中的元素及内容，再次点击标签，在下方动态删除选中的标签及元素如图默认状态点击1和2时，如图再次点击1，效果如图具体代码html代码如下：<div class="layui-card"> <div class=...
2019-07-10 18:03:55
864
原创 echarts图表与tab页连用时图表不显示问题
echarts图表与tab页连用时图表不显示问题有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换...
2019-06-26 18:00:31
1711
2
原创 iconFont的三种使用方法--Font class
iconFont的三种使用方法--Font class如何避免样式冲突打开iconfont的官网，搜索你想要的图标，以“文件”为例点击购物车添加至项目，点击确定。如果没有项目，新建一个即可点击确定后会进入下面的界面先更新代码 然后再复制到项目中去复制到项目中直接在标签里引用类名即可如何避免样式冲突一般我们在项目中定义的样式很容易冲突，如何避免呢？在我的项目...
2019-06-21 19:49:48
7868
2
原创 layui中layui-form与select2下拉多选样式冲突的解决方案
layui中layui-form与select2下拉多选样式冲突的解决方案@TOC去掉搜索按钮打开控制面板f12 查看元素可以看到搜索按钮是由after动态生成，找到这个样式文件，然后注释清除浏览器缓存（ctrl+shift+del），刷新，可以看到小按钮已经没有了。去除layui-form的搜索框还是老样子 查看页面元素f12确定元素所在位置，通过jquery删...
2019-06-15 15:07:17
5853
2
原创 layui中select下拉显示不全解决方案
layui中select下拉显示不全解决方案@TOC解决方案 td[data-field='wjxyioc'] .layui-table-cell{ overflow: visible !important; } .layui-table-body{ overflow: visible !important; ...
2019-06-13 14:21:45
3450
原创 vue中引入font-awesome字体
vue中引入font-awesome字体@TOCvue中引入font-awesome字体1.打开控制面板npm install font-awesome --save2.在入口文件main.js中引入import 'font-awesome/css/font-awesome.min.css'结束...
2019-05-29 17:45:22
396
原创 vue路由传参的两种方式
vue路由传参的两种方式路由传参的两种方式params和queryparams相当于post，参数信息不会显示在地址栏中，query相当于get,会把参数信息暴露在地址栏中params传参第一步 在router.js中配置路由例：() import params from '../components/params/index' import routerTo from '../com...
2019-04-10 14:31:14
560
原创 Vue中引入element-ui
Vue中引入element-ui1.安装npm i element-ui -s2.在main.js入口文件中引入element-ui() //引入完整的element import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); ()3.使用组件比...
2019-04-09 14:25:21
532
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人