- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue预加载图片
应用场景是项目中有一些访问频率较高的页面，且不希望压缩图片保证显示效果，例如一些宣传类的视觉。这时候我们选择牺牲一些首屏的加载时间，保证后续的访问速度。
2024-04-24 09:47:37
348
2
原创 分享webpack插件generate-asset-webpack-plugin，vue打包自动生成额外文件
我们在vue项目实际开发的过程中会有很多公共的配置，比如一些第三方服务的接口、图片服务器地址、cdn地址等等，一般情况下不同的环境会有不同的配置信息。常规的方法是在pubilc目录下新增config.js，然后在index.html中引入，这样也方便打包部署后，运维根据需求直接修改config.js中的某些地址，而不用重复打包部署。就像这样：config.jsindex.html我在近期的项目中新增了一些额外的文件（比如xxx.h...
2022-04-22 14:29:26
2571
原创 分享两种vue.config配置webpack插件的方法
vue.config.js中通过设置configureWebpack来配置webpack插件，configureWebpack有两种形式，一种是对象形式，一种是函数的形式，并且都对生产环境和开发环境做了判断。
2022-04-15 17:26:23
6959
原创 echarts柱状图根据不同颜色，反映数据涨跌趋势
拿到这样一个需求，用柱状图展示商品不同日期的不同价格，并且需要反映出数据的涨跌（红色柱子表示同比前一天上涨，绿色柱子表示同比前一天下跌），类似股票的展现形式。实现出来的效果是这样的老样子，文字说明都在代码注释里，vue项目直接跑<template> <!-- echarts柱状图根据不同颜色，反映数据涨跌趋势 --> <div id="main" ref="charts"></div></template>
2022-04-11 10:30:50
1784
原创 仿知乎步骤条导航（我自己起的名字）
最近项目中有需求需要做一个类似于步骤条的导航，从使用vue以后，基本上element ui实现不了的效果我都偏爱自己写，算是一个积累吧，之后有类似需求可以直接拿过来用。还记得当年jquery的时候，那个插件库是真的全，自己啥效果也不想写，需求来了直接找，我那里边现在应该还有100多块钱的jq币哈哈哈。原项目中根据实际需求还加了媒体查询对不同分辨率的适配，比如超出1440收起导航，显示展开按钮，大家可以根据实际需求改动做成组件。废话不多说了，贴代码，一些文字说明还是写在了注释里<tem
2022-02-23 10:29:11
425
原创 理解el-table合并单元格原理，实现简单的动态合并功能
最近有需求需要将第一列按需合并，看了一下element的文档也没明白怎么回事儿，一边试一边找规律发现了一些原理，纯属个人理解需求：要把相同日期的单元格合并，默认数据按照时间排序好效果：还是老规矩直接上代码，所有的文字描述都用注释标注好了，也方便测试，有环境的话直接复制出来就可以看了<template> <el-table :data="tableData" :span-method="objectSpanMethodAuto"
2022-02-10 17:31:32
4777
2
原创 小于12px字体的处理方法
项目中有文字标签需要固定宽度，所以需要对超过字数限制的标签做特殊处理，预设的字体是12px，产品那边让继续缩小字体，常规的话肯定是不能缩小了，所以想到了用scale缩放，但是缩放的话也遇到了一些问题，都放在代码注释里了，可以自己运行起来看下效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小于12px字体处理方案&l...
2021-12-30 17:49:54
1445
原创 基于element实现组合式时间选择组件
需求是这样的左侧是时间段筛选按钮，格式是YYYY-MM-DD，这里你可以按照你的需求自己改，不知道怎么改看下moment的文档右侧是el-date-picker，自定义时间段左侧选择后，清空右侧选项，右侧选择完成后，左侧重置为都不选中的状态 ，右侧支持清空，清空后左侧默认选择全部最后输出的都是起止时间startTime和endTime...
2021-12-30 15:37:58
817
原创 vuex在modules模式下使用vuex-persistedstate插件做持久化
vuex在modules模式下使用vuex-persistedstate插件做持久化
2021-11-23 10:47:24
1357
原创 百度地图创建多个带文本标注的点
实现原理就是两部第一步创建标记点，官方文档：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay第二部创建文本标注，官方文档https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/label直接上我的垃圾代码，没有任何优化，自己看吧<!DOCTYPE html><html> <head> .
2021-08-13 14:43:51
1379
原创 下拉框美化
一个老掉牙的项目需要维护，老板说下拉框不好看，然后拾起了好久没用的jQuery没有用伪元素之类的，就简单写了写勿喷！长这样：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .selectContent{ text-align: cen
2021-08-13 14:20:40
411
原创 js递归函数中的执行顺序问题
首先输出的a5、a4、a3应该不难理解，主要是最后两个个输出的执行顺序很容易乱套。我们知道js是单线程，并且有一个堆栈的概念，函数的执行是放到栈里执行的，abc(--num)入栈顺序应该是abc(4)>abc(3)，根据‘后入先出’的概念（栈就好像垃圾桶，入栈就是往垃圾桶扔垃圾，出栈就是倒垃圾），首先执行的应该是abc(3)，所以先输出b3，再输出b4。画个草图，这个是入栈的过程...
2021-07-20 23:54:11
711
原创 vue3如何挂载全局方法
一般用vue都会封装axios，然后挂载到全局，比如这样import { get, post} from 'xxx/axios.js'Vue.prototype.$get = get...这个是vue2
2021-06-03 16:27:56
4419
5
原创 vue3 devtools不生效问题，看这篇就够了
查了好多教程，都不管用，感觉应该不是配置的问题，应该就是vue-devtools版本的原因。然后打开谷歌商店，搜了一下，出现了这两个devtools
2021-05-28 15:40:30
4444
10
原创 正则表达式截取字符串
最近在研究用前端技术爬取网页内容，发现很多标签命名很随意，就导致无法使用选择器获取到想要的内容，这时候正则表达式就派上用场了，因为本来就很少写正则，碰到了一个掐头去尾的问题var str = '153赞 · 10评论 · 42万展现 · 12分钟前' // 目标字符串，需要截取评论数，点赞量等信息以截取评论数为例，起初是这么实现的并没有实现我想要的效果正确写法应该是这样菜鸟上是这么说的https://www.runoob.com/regexp/regexp-syntax
2021-03-05 16:42:56
583
原创 解决 Cannot find module ‘webpack-cli/bin/config-yargs‘报错
能看到这个文章，报错一定是这样的在尝试了很多文章的教程后，终于发现了问题的本质，webpack-cli 4.x版本是没有这个config-yargs这个文件的，3.x版本才有这个文件为了大家少走弯路，用我这个方法就可以了卸载npm uninstall webpack-cli重装npm install webpack-cli@3 -D...
2020-11-27 15:30:20
242
2
原创 监听剪切板复制粘贴图片，上传图片到服务器
document.addEventListener('paste', function (event) { var items = (event.clipboardData || window.clipboardData).items; var file = null; if (items && items.length) { // 搜索剪切板items for (var i = 0; i < items.length; i++) { if (items[i].t.
2020-10-27 16:39:57
402
原创 使用Promise实现顺序执行
Promise.resolve().then(res => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(1) resolve() }, 1000) })}).then(() => { return new Promise((resolve, reject) => { setTimeout(() => {.
2020-08-31 17:07:46
749
1
原创 zTree扁平化数据转化为element tree结构化数据的方法及工作原理
/* * zTree数据是扁平化数据，element tree是结构化数据，需要找到各项之间的关系，简单来讲就是找爸爸，谁的id对应我的pid谁就是我爸爸 * 此时我们可以遍历出一个以id为key值的map（idMap），这里用到对象的继承特性 * 然后通过一个方法将map中的各项关系走一遍，就是我们说的找爸爸，利用对象的继承属性，我们可以得到一个体积比原idMap大的map，根节点上的所有数据就是我们想要的element tree数据 * 打了debugger，可以通过chrome调试工具了解工.
2020-08-20 16:49:38
583
原创 伪元素实现0.25像素或者0.5像素边框
经常碰到这种细边框的情况，我们可以通过缩放来实现功能。本质就是，我们需要一条1px的线，按照需求纵向或者横向缩放一定的比例，然后再通过定位固定到相应的位置。所以对于使用:after或者:before并没有什么约束，要记住我们需要的只是1px的辅助元素。下边是我项目中的实现方案.content .selectContent li{ position: relative;}.content .selectContent li:after { //下边框 content: " "; posit
2020-08-06 21:37:27
199
原创 EchartsY轴刻度自适应，解决数据变化较小且值过大问题
当折线图数据变化较小，数据值普遍较大时会出现这种情况，看起来很不美观（比较啰嗦，可以直接拉到底看最终代码）解决方案很容易想到，给Y轴设置最大值最小值，这样：yAxis：{ min: (value) => { return value.min }, max: (value) => { return value.max }}但是这种情况会出现Y轴刻度这样：考虑这种情况，我们可以对返回值取整，看起来好看一些，这样：yAxis...
2020-07-10 10:53:48
18786
7
原创 element-ui中的el-table-column加v-if不生效，表头错乱
项目中需要按照不同的媒体类型，展示不同的表头且数据字段也不同。可以增加不同key值解决v-if不生效问题。<el-table-column prop="author" align="center" :key="Math.random()" v-if="pathIndex == '微博' || pathIndex == '微信'" sortable="c.
2020-07-02 14:52:07
3416
3
原创 后端设置Access-Control-Allow-Origin=* 不生效问题
最近用node包了一层科大讯飞的接口，设置了任意域名跨域，前端还是报跨域的错，排查了很长时间才明白怎么回事儿前端项目用的axios，在同事随手复制的一个axios的封装文件中找到了这行代码axios.defaults.withCredentials = true当设置withCredentials为true时，后端配置Access-Control-Allow-Origin不能设置为*...
2020-04-22 21:39:37
6845
原创 npm 安装同一个包的多个版本
项目中同时使用了echarts2.x和echarts4.x，很鸡肋但是又必须解决首先安装echarts2.xnpm install echarts2@npm:echarts@2安装echarts4.xnpm install echarts4@npm:echarts@4之后你的项目中的node_modules中会出现echarts2和echarts4两个文件夹，正常按需im...
2020-04-14 09:37:58
6332
原创 vue中index.html文件为什么可以使用模板语法
今天无意间看到在项目的index.html文件中，使用了ejs的语法（后来知道是lodash），就非常费解，之前在node项目中，需要指定使用ejs模板引擎，在中间件中rander到前台页面。我理解的大概就是这个原理查看了官方的解释也就是webpack中的HtmlWebpackPlugin将index.html作为模板，所以才具备了使用模板语法的能力webpack中找到的配置项...
2020-04-09 15:05:45
1722
原创 小程序配置服务器域名不生效问题
最近公司有几个小程序的项目，之前也没接触过，学了两天发现上手很快，期间也是碰到了不少问题，有一个非常简单但是困扰了我好长时间的问题：明明在小程序平台配置了服务器域名，但是接口怎么也调不通面向浏览器编程的我经过多方“研究”，找到了答案在配置好域名以后，需要在小程序中手动刷新配置才能生效这个问题有点傻，但是我觉得应该会有人碰到同样的问题，分享给大家...
2020-03-29 12:46:26
3742
2
原创 随机生成小球（万家灯火的感觉）
事发年前（新冠之前），拿到一张psd，全部静态，老板说想让他动起来，在我们这种老板吃死技术的小公司只能自己想办法，你想要ui，no我们只有美工哈哈哈，独立自强的我瞬间想到transition、enter、leave、cubic-bezier之类的，搞搞搞。结果领导很满意，唰~唰~唰~很不错，这里就不展开说正题来了，首页老板说想要万家灯火的感觉，我记得之前我看到过一个类似的动效，凭着我...
2020-03-24 16:00:07
827
1
原创 根据起始时间，获取之间所有的时间（基于momentjs）
最近做echarts，由于后台数据不全，需要自己根据起始时间获取一个时间的列表。长期基于google coding，准备copy代码，感觉都不是很好看，勉强动手写了一个，欢迎复制与拓展。自行npm momentlet arr = [], startTime = moment(this.startTime).format('YYYY-MM-DD'), endTime = m...
2019-12-19 18:02:45
2215
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人