- 博客(19)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 详细剖析外边距折叠，轻松摆脱margin带来父子元素和相邻元素外边距塌陷
外边距折叠，其实就是字面意思，可能大家没有接触这个名词，但是大家在码css时一定会遇到过，可能没深入了解，就是外边距和实际预想的不一样，比如相邻元素外边距会相互影响，子元素外边距会导致父元素共享子元素边距等，其实就是外边距折叠；没有设定边框、内边距、行级内容、高度（height）或最小高度（min-height）来分隔块级元素的下边距（margin）与其内部的一个或多个后代后代块元素的下边距（margin-bottom），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。
2023-09-26 14:36:47
347
原创 el-select应用虚拟列表，避免过多数据导致浏览器卡死
在传统的列表中，当用户滚动到底部时，列表会加载所有的数据，这可能导致性能问题和内存泄漏。当用户滚动到新的区域时，虚拟列表会自动加载新的数据，从而提高性能和响应速度。这种技术通常与虚拟滚动结合使用，可以在保持高性能和流畅性的同时，支持大量的数据呈现。在做管理系统，下拉选择框是个必备功能，在实际开发中，下拉数据量是不可控的，el-select虽然有过滤筛选等功能，但是如果数据过大的时候，会导致浏览器卡死，在切换页面时，销毁这个也很耗时，导致页面切换体验性很差，所以需要处理这种情况！
2023-10-08 17:21:42
1140
2
原创 弹性布局flex或者grid元素平分，实际会被内容撑大，问题剖析
控制flex元素，有三个属性控制，flex-basis，flex-shrink，flex-grow。通过上面弹性布局和元素width分析，当元素支持收缩时，min-width默认是auto，即元素内容的宽度，所以会导致item撑出平分的宽度！如果设置宽度，由于是弹性布局，宽度也会被伸缩！flex-grow 值为整数，默认是0， 分配可用空间，如果其他元素也被允许延展，那么他们会各自占据可用空间的一部分；元素item平分，就需要在每个item设置flex:1，即自动伸缩，每个item伸缩等级都一样！
2023-09-22 16:50:23
1042
1
原创 结合el-tooltip，实现内容过长省略，移上显示全部
在系统中，内容过长需要省略，鼠标移上显示全部，这个是常用的功能，也有很多方案解决这种。
2023-09-20 17:46:47
1148
1
原创 前端自定义导出PPT
前端导出PPT，刚接触这个需求，还是比较懵逼，然后就在网上查找资料，最终确认是可行的；这个需求也是合理的，我们做了一个可视化数据报表，报表导出成PPT，将在线报表转成文档类型留存； 实现这种复杂的功能，都得依赖前辈匠人，还好有一个比较完善好用的库：pptxgenjs只有英文文档：Quick Start Guide | PptxGenJS，还可以搭配大家比较熟悉的库：html2canvas，更好的实现完善的PPT引入，生成一个简单的PPT文档
2023-09-19 18:07:16
1460
1
原创 vue3.0 + vite+ vant3.0
由于项目都是vue框架的spa页面，然后项目需要一个活动页和微信的分享，这样用vue框架很累赘；以前我是直接用h5；刚好最近vue3.0出来了，然后撸一个活动页面练练手。这个过程还是蛮曲折的；
2020-11-19 18:28:51
6054
2
原创 html2canvas渲染Dom问题
html2canvas是将dom渲染成canvas，然后生成图片；在使用过程中，发现触发dom外的iframe的渲染，由于项目中下载文件用iframe，导致会重新下载iframe上面的文件。查看一些资料，发现虽然只渲染你传的部分dom，但是html2canvas会加载dom外的js 和 css和iframe。这是个问题呀，要决解，然后就找资料呀，发现html2canvas需要排除渲染的元素，只要在元素上添加属性 data-html2canvas-ignore=’true‘，就可以！<
2020-06-16 14:20:43
2402
2
原创 wangEditor在Vue框架封装及第一次鼠标全选删除不触发onchange事件决解
封装一vue封装wangEditor，带字数统计及字数限制<template> <div> <div :ref="id" :wordNumber="wordNumber"></div> <div class="gl-word-number" v-if="isCount"> <span>字数统计：</span> <span>{{ count }} / {{ wo
2020-06-14 17:26:45
2259
1
原创 vue项目router切换太慢问题
问题定位：随着项目增大，有一天突然发现页面切换时候，要等1-2s页面才切换过去，然后就开始定位问题，刚开始以为时页面组件太多导致的，通过删除组件，发现没啥改善，然后就在两个页面打印日志，第二页面created周期时间和路由切换时间相差不大，可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志，发现destroyed->router切换耗时1.5s左右，这时候定位问题是vue的destroyed周期耗时。destroyed周期耗时：这时候就考虑destroyed为啥要
2020-05-21 20:11:21
11233
2
原创 el-cascader用filterable时，change获取不到值得问题
el-cascader得用法 <el-cascader v-model="" :options="" :props="" size="small" @change="changeCity" style="width: 100%" ref="cascaderCity"
2020-05-21 19:54:01
4821
3
原创 VUE组件间传值详解
在Vue . 2.x 中， 推荐使用一个空的Vue 实例作为中央事件总线（bus），组件A传值组件B，这时候需要bus总线的中间件，组件A bus.$emit("bfun","aa"),这样发送数据aa，组件B 需要通过 bus.$on("bfun", function(message){console.log(message)});不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。取而代之的是，你只能提供你想要绑定的属性名，类似。
2019-03-22 11:18:26
2162
1
原创 vue的生命周期详解
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
2019-03-21 16:06:59
722
原创 vue实战时遇见棘手问题
后续开发中发现一个问题，在我刷新页面之后，vue实例变成空的，其实vue在创建实例的时候就开始渲染页面，导致在其他other还 没有设置vue实例；然后我就想到再创建根实例的时候就传vue的实例给other。问题描述，静态资源文件放在static文件夹中，在vue组件和css文件中用相对位置访问是没有问题，但是在部署时，放在apache等服务器组件下，就会存在问题？我在main.js中引用other.js ，然后通过other中的方法设置取vue的实例other.set(vue);
2018-11-23 15:16:29
733
原创 element-ui遇见的问题
1、表单校验el-form-item 中的prop属性的名字要和输入框的名字一致 <el-form-item label="组件名称:" prop="componentName"> <el-input v-model="uploadComponent.componentName" :disabled="checkTip !== 1">&l
2018-11-19 16:56:29
643
原创 vue+vue-router的详细用法
1. vue安装vue-routernpm install -save vue-router //package文件的dependencies节点写入依赖 dependencies部署是需要的 depenDencies 开发依赖，部署时不需要2. vue 引用vue-routersrc目录 下面创建router文件夹在router文件夹下创建index.js文件index.j...
2018-11-16 16:46:17
424
翻译 nginx在centos7部署详细说明
Nginx 安装gcc安装yum install gcc-c++下载的Nginx是源码，需进行编译，编译环境依赖gcc环境；pcre pcre-devel 安装nginx的http模块使用pcre来解析正则表达式，所以需要安装pcre库，pcre-devel是使用pcre开发的一个二次开发库yum install -有pcre pcre-develzlib安装 http包的内...
2018-11-16 14:52:56
318
翻译 vue+axios封装
封装api.js// 读取配置的根目录地址const root = process.env.API_ROOT;// 引入axioslet axios = require('axios');function toType (obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();...
2018-11-13 17:56:29
471
原创 Lajax前端日志在vue中运用
1.封装公共接口import Lajax from 'lajax/src/lajax-module';const logger = new Lajax({ url: process.env.LOG_URL, //日志发送地址，在配置文件中配置 interval: 10000, maxErrorReq: 3});export default logger;2.加入到vu...
2018-11-13 17:40:00
1236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人