- 博客(47)
- 收藏
- 关注
RSS订阅原创 如何在scss中巧妙的使用js变量
随着前端开发技术的不断发展，scss 和 js 之前的壁垒逐渐打破，而双方的变量互用也极大地便利了我们的开发。
2023-03-31 10:39:29
3692
原创 纯css实现虚点线渐变效果
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/实现思路：渐变背景色+与背景色相同的边框虚点线+background-origin设置背景图定位效果图：代码：<!--虚点线元素容器-->body { background-color: #636465; position: relative; height: 100vh;}.demo { width: 200px; height:.
2022-01-25 14:15:14
2347
原创 Vue组件自我调用，实现递归展示
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/相信大家开发过程中都曾遇到过以下这种类型的数据：dataList:[ { name:'名称1', children:[ { name:'名称1-1' children:[ { name:.
2021-11-17 18:35:29
1807
原创 分享一个类优惠券样式-带内圆角，带阴影
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/在前端日常开发排版布局过程中，虽然万物都可切图搞定，但是难免会不太灵活，所以针对一些不太常见的设计样式，如下图这种类似优惠券的一种样式，如果能有方式在代码层面搞定，尽量还是不要选择切图了。乍一看感觉也没什么难度，仔细一看，才发现事情并不简单。通常想要实现这种内圆角的效果，首先想到的就是使用背景渐变来实现，但这边比较麻烦的点在于，不规则的内圆角下面的阴影。进过一番尝试，最终使用drop-shad.
2021-05-20 17:43:42
230
1
原创 vue+storybook构建过程及问题记录
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/Storybook是一个开源UI开发工具，能够有效的可视化项目组件，便于组件复用，避免重复造轮子。最近刚接触到这个工具，觉得很有意思，于是决定写个demo实践一下。之前创建过一个关于echarts的实例仓库，要是早些时候接触storybook，也许就可以用这个方法来实现了，之后有机会可以考虑重构一下。因为目前工作的技术栈多是围绕着Vue，所以这里的记录针对 storybook for vue创建.
2021-02-01 14:43:28
718
原创 关于String.replaceAll()兼容性问题
之前在项目中维护同事代码，发现部分浏览器及低版本Chrome浏览器都出现报错情况。排查发现是由于replaceAll()函数兼容性问题所导致解决方案利用splite()和join()let str = '2021.01.25'//要将其转换成2021-01-25console.log(str.split('.').join('-'))//2021-01-25使用replace()代替let str = '2021.01.25'//要将其转换成2021-01-25console
2021-01-25 17:29:27
6327
原创 axios跨域问题小记
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/问题描述：后端设置了允许跨域，前端访问接口时依旧提示跨域原因：设置axios实例时，设置了withCredentials:true.let myHttp = axios.create({ baseURL: env.apiPath, timeout: 30000, headers: { 'Content-Type': `application/json.
2020-12-16 14:58:00
207
原创 获取渐变色的中间色值
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/需求场景：一个进度条渐变色块，使用标签表明当前进度，标签背景色要与当前位置色值统一。思路：根据渐变的两个色值，计算得到两个色值中间100个色值列表，根据百分比，取对应的色值。代码：//css.gradientDiv{ width: 300px; height: 10px; background: linear-gradient(90deg,#FAD961,#F76B1C); p.
2020-12-11 14:26:03
2314
原创 echart实例仓库（基于vue）
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/对于一个在大数据公司搬砖的前端，这几年除了地图，遇到最多的就是各种图表的需求了。基本上Echart作为一个图表库，已经能满足绝大多数项目中的图表需求了。BUT～常规的配置基本是无法满足产品大大们高端的品味的，So～难免也会遇到一些个性化的配置需求。可能也是年纪大了，不太好，你们也知道，一些特别个性化的配置频率是很低的，基本也是配完一次就丢在那边了，等到下次突然发现有个类似的配置需求时，作为一个程序员.
2020-12-01 16:36:36
721
原创 横向上下交错时间线列表布局
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/分享一个横向上下交错时间线列表布局完整代码<template><div class="timelineBox-wrap"> <div class="timelineBox" id="box"> <div class="timeline-up"> <div :cl.
2020-10-10 16:56:26
811
原创 JS原生date对象的实际应用，满满的干货！
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/Date对象用于处理日期和时间一、new Date()默认状态下，new Date()会返回当前日期和时间，格式如下var date = new Date() //Tue Sep 29 2020 16:38:00 GMT+0800 (中国标准时间)创建特定的时间，传参如下：new Date(“month dd,yyyy hh:mm:ss”);new Date(“month dd,yyy.
2020-09-29 17:19:28
126
原创 toLocaleString也太好用了吧！（超方便转千分位，中文数字等）
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/基本概念目前，我查找了一下，下面三种数据类型都可以使用toLocaleString的方法number.toLocaleString([locales [, options]])：返回这个数字在特定语言环境下的表示字符串array.toLocaleString([locales [, options]])：返回一个字符串表示数组中的元素date.toLocaleString([locales .
2020-09-29 13:42:48
5810
原创 字节跳动笔试之解答篇
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/看见一篇博文，列出了博主关于字节跳动的线上面试题：https://blog.csdn.net/handsomezhanghui/article/details/108691314，针对这些题目，我试着做了以下解答，以供参考。（部分解答参考网上其他资料）题一问题：把下面的纯文整理为3行4列aaaa "dd" f g;fd分1 "2dd" 113 512 q 'w' er,-/.
2020-09-28 13:58:47
1799
原创 关于gitbook构建的第一本书：业务代码干货宝典
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/关于为何会构建这本书：起因是对于开发过程中一些复用率比较高的代码片段，每次遇到都要想着去之前项目中出现的地方，进行参考复用，时间久了，找起来就很麻烦，于是准备在github建一个仓库，用来整理存放一些常用的代码干货。仓库建完搁置一段时间，想到之前希望自己平时的写作也有像github一样的仓库进行管理，于是去了解到了gitbook，后来写作方面一直也没有什么进展，于是也是搁置。于是两件事碰撞到一起.
2020-09-02 10:43:13
200
原创 关于clientHeight，offsetHeight，scrollHeight ，offsetTop，scrollTop...想要搞清楚，看这一篇就够了！
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/网上关于clientHeight， offsetHeight，scrollHeight…的相关文章其实很多，整理这篇文章的主要目的还是在于加深一下自己对于这些元素的记忆，每次用到的时候，总是模棱两可的，需要再去查阅一下，希望自己总结之后，彻底把这几种height搞明白！以height为例，width相关方法与其相同详细列举除了各种height所代表的具体值容易把人搞晕之外，js和jquery.
2020-08-19 17:37:15
289
原创 代码大全2——变量名的力量知识点总结！
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/前言：你是否在开发过程中随心所欲的进行变量命名？作为一个码龄差不多四五年的程序员，在开发过程中常常要面对各种类、变量、函数的命名。虽然这些年也差不多也逐渐形成了一些个人风格的命名规则，但并没有成一个比较规范的系统，因此很多时候还是比较随心的。最近看了《代码大全2》中变量名的力量一章，于是把书中的知识点挑出了一些列了出来。相信，对于有一定经验的程序员，可以帮助重新审视自己的日常编码习惯，从而改.
2020-08-11 17:18:42
363
原创 elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解决方案（亲测有效！）
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/记录一个刚刚遇到的问题，以及解决方法。希望可以帮助之后遇到同样问题的小伙伴们！问题描述使用elementui的级联选择控件，并需要对其设置默认值，以及修改默认值时，发现问题：先贴出相关核心代码如下：<el-cascader ref="locationCascader" v-model="location" placeholder="省份/城市/区域" :o.
2020-07-31 16:44:05
5230
3
原创 Vue多页面+单页应用集合的项目配置开源~
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/近两年因为公司的业务主要都是toB的，因此工作内容也都是偏定制，系统化的一些中小型产品，大多也都是一个产品一个仓库。年前写了一个小项目，当初构建项目的时候也是纯粹把它当成一个独立产品去做的，结果今年被产品告知，年前的那个项目，现在要追加几个子项目，最终集成一个系列项目，并且要求代码放在一起，统一管理。这就比较尴尬了，工期又比较紧，所以重构项目架构也不是太现实，最后权衡之下，也就只能采取配置路由的下策.
2020-07-23 10:30:18
646
原创 多node版本控制工具：nvm
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/有时候，不同的项目对于node版本的要求不同，如何快捷的控制我们电脑的node版本就成了我们需要考虑的问题这里记录一下我平常使用的node版本控制工具：nvmnvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-c.
2020-07-03 10:41:49
127
原创 CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/在日常开发过程中，有一些前端业务场景可能需要让元素在尺寸变化的同时，保证宽高比不变，所以在此记录一下具体的实现方法和应用场景。一、如何实现其实关于实现元素的固定宽高比，思路很简单，就是在于找到设置宽高的一个固定基准。关于这个基准是什么，我们其实可以很容易的找到。其实，最先能够联想到的是图片元素它本身的等比缩放特性，通过固定一边，讲另一边设置为auto，就能轻易的实现，但是这种方式有很多局限性，运.
2020-06-30 16:44:17
2430
原创 使用JS实现数值动态变化动画效果
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/本文主要回顾整理一下之前（大概一年前，????，这一年实在比较忙 ）写的一个页面动画。之前其实写了两种方案，最终使用的如下的方案：不过本篇文章会将两种方案都整理出来，方便日后有同样的需求时可以快速复用，同时也可以给正在实现这个需求的同学们一些参考！话不多说，开整！一、滚动式变化这一种的呈现方式也是我在项目中最终应用的方式，个人觉得更好看一点 ????1.关于实现原理其实想要实现这种滚动式
2020-06-03 15:43:42
13393
8
原创 gulp+babel解决传统项目IE环境ES6语法兼容问题
前言ES6给我们带来便利的同时，也给我们带来了一下麻烦。当然自从chrome等浏览器对于ES6语法的全面支持以来，这种麻烦也已经降到了最低，如果你的项目完全不需要考虑兼容问题，现在你在项目中可以尽情的使用ES6，且不用做特殊处理。当然这是理想情况。前几年我主要做的都是H5方面的开发，所以对于浏览器的兼容问题关注也不是很多。近两年的开发也都是基于VUE框架，对于vue,如果需要使用ES6并且需要...
2019-11-28 15:47:01
1105
原创 Echarts使用干货整理（持续更新）
1. 纵坐标轴标签溢出问题：grid配置之前的设置倾向于： grid:{ left:"", right:"", bottom:"", top:"" }grid有个属性是containLabel1。containLabel 为 false 的时候：(默认为false)grid.left grid.rig...
2019-09-29 14:40:42
328
原创 你不知道大概也不会去用但可以了解一下的Console隐藏骚操作！
console.log()差不多是我们平时开发过程中最常用的调试手法了，但其实关于Console还有很多其他方法可以帮助我们提高开发效率，虽然不常用，但可以作为扩展知识，稍作了解。关于控制台可以先全面了解一下 console 控制台选项卡中的内容。第一行：清空 console 控制台top — 在默认状态下，Console 的上下文（context）为 top（顶级）。不过当你检查元素...
2019-07-30 15:34:14
794
原创 Array方法汇总（干货）
Array.from()从一个类似数组或可迭代对象中创建一个新的，浅拷贝的数组实例用途：字符串转数组结合new Set()，进行数组去重遍历数组生成一个数字序列<!--字符串转数组-->Array.from('foo');// ["f", "o", "o"]<!--去重-->let s = new Set(['1', '2','2','3']); ...
2019-07-02 15:06:51
474
原创 网页性能提升之WebP
鉴于之前做的大屏的项目，全屏背景图过大，传统的写法导致页面渲染过慢，因而非常影响用户体验。除此以外，很多时候在开发过程中会出现很多图片的情况，图片过多或大，会直接影响页面的响应时间，从而导致页面性能变差。针对以上，我们可以使用WebP来有效的改善。关于WebPWebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服...
2019-05-21 12:58:29
789
原创 (干货！！）js遍历：for..in，for..of，forEach
前言日常开发中，数组或是对象的遍历是一个经常会遇到的事情，关于遍历，其实Js提供了很多方法，但是对于他们之间的区别却理解的不是很透彻，通常情况就是抓起来一个forEach就用。为了提高代码质量，我认为有必要深入了解一下不同遍历的特点。当然，本文不作太多深入讲解，只是就各种的特点进行整理展示。一、for..in，for..of，forEach1、遍历对象for..in：输出 索引let o...
2018-11-07 17:21:44
438
原创 页面平滑滚动：scroll-behavior&scrollIntoView
从前我们在网页中会需要内容定位，或者返回顶部之类的功能，通常使用锚点来实现，但是页面跳转太过生硬，用户体验不够，于是会通过一大串的js来实现平滑滚动的效果，近两年出现了一些新的属性可以很方便的完成这种交互，很大程度的减小了开发难度。一、CSS：scroll-behavior约莫是去年开始出现的这个属性，只需要在需要滚动的地方增加一行如下属性，即可。scroll-behavior:smooth...
2018-11-07 09:29:45
5123
2
原创 js 关于正确率的控制
经常会遇到一些开发场景需要我们按照一定的概率执行某件事，经常遇到的比如电商活动的抽奖，前段时间写一个类似头脑王者的答题小程序，如果没有玩家匹配时，需要与机器人，而机器人的答题正确率需要设定。那么关于正确率具体实现的思路是什么呢，其实很简单，就是利用“随机数”实现代码如下：//首先创建一个随机数nlet n = Math.floor(Math.random() * 100);//然后根据给...
2018-11-06 15:11:55
676
原创 Vue——深度监听
通常我们需要使用VUE的watch去监听一些值的变化，从而去进行一些操作，但是对于对象的监听，我们往往会遇到一些问题，对象内部的某个属性改变的时候无法触发watch函数，这个时候就需要使用vue的深度监听，具体如下：watch:{ myObj:{ handler(newValue, oldValue) { //执行操作 }, deep: tru...
2018-11-06 14:45:46
1530
原创 关于引用类型：数组和对象的赋值
js中的数组和对象都是引用类型，其实说白了，数组的数据类型也是对象，因此我们在实际项目中需要注意，如果直接将一个对象赋值给另一个空对象，这个操作仅仅是让两个对象的指针指向了同一个地方。此时的两个对象中的任意一个的值发生改变，势必都会影响到另一个。let arr1=[1,2,3];let arr2=arr1;console.log(arr1,arr2)//[1,2,3],[1,2,3]ar...
2018-10-26 10:42:00
620
原创 Vue 组件复用多次自定义参数
场景：当项目中多处出现相同的模块时，此时的正常考虑是将其做成公共组建，通过传参不同，实现多处复用具体：背景：项目使用的技术是VUE+ElementUI此处，多处出现的模块是select选择框，封装成组件后，传给它option的值，代码如下：<!--组件文件 比如说这个组件叫 vSelect 下面会用--><template> <el-select...
2018-09-30 15:56:02
7436
7
原创 小程序初涉——倒计时效果
近期做的一个类似头脑王者小程序项目，其中需要实现一个倒计时圆环的效果，如下图：如果是平时的pc或H5的项目，要实现这个效果，可能选择性还会再多一些，包括使用SVG,transform等来实现。考虑到小程序的一些局限性，所以选择用canvas+js来实现。canvas画圆环话不多说直接贴代码,首先是wxml部分，需要定义canvas的canvas-id，也就是canvas的唯一标...
2018-08-14 14:14:41
547
原创 小程序初涉——页面滑动以及canvas层级问题
关于canvas的层级问题在小程序里，map、canvas、video、textarea等 组件是由客户端创建的原生组件，它们的层级是最高的，不能通过 z-index 控制层级，因此在实际开发过程中就会遇到很多由此产生的问题。最近在做一个小程序的项目，就这个现象遇到了以下问题：问题一：浮动问题联动的页面滑动问题如上图，页面只有一屏，在开发工具中都可以正常展示，但在真机环境下...
2018-08-13 14:27:35
4733
原创 小程序初涉——入口页设置&事件绑定
情景一：小程序初始化页面根目录下的app.json文件中，控制pages数组，设置在第一行的页面就是默认启动页面例如下面的设置中，home页就是启动页面，想要修改启动页，只需要改变排列顺序即可。//app.json{ "pages":[ "pages/home/home", "pages/login/login", //....
2018-08-10 15:08:54
4495
原创 纯干货~常用布局汇总（持续更新）
文本溢出省略号单行省略.div{ //... overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}多行省略.div{ //... overflow: hidden; text-overflow: ellipsis; display:...
2018-06-20 18:39:10
302
原创 webpack之watch
webpack在手动配置开发环境时，需要实时在网页中看到代码的更改，又不想要每次修改代码都手动npm run build一下，webpack提供三种解决方案，在此记录一下。 - 观察者模式 - webpack-dev-server - webpack-dev-middleware观察者模式在package.json文件中添加一个用于启动webpack观察者模式的npm...
2018-05-25 14:10:48
4222
1
原创 百度地图自定义覆盖物手机端添加点击事件无效
最近在做百度地图添加自定义覆盖物时，遇到一个问题。起先参照api都很顺利，但是当我在给自定义的覆盖物添加点击事件时，问题来了：无法触发。去网上找了一些解决方案，包括注册点击事件之类的，都没有解决。之后无意发现，当把调试模式切出手机模式时，点击事件就能够正确的触发，由此得出结论，问题点在于页面是在手机端运行，所以尝试写入了手机端的常见事件，如touch，touchstart…，依旧无法解决，...
2018-05-17 16:36:56
5193
原创 百度地图初始化中心点偏移问题
最近做的项目涉及到了很多数据可视化的操作，所以用到了大量的ECharts以及百度地图，记录一下前两天刚刚遇到的一个问题。 一个地图展示页面，其中包含一个tab切，展现数据的两种展现形式，（实际情况是tab切页面中还有子tab切，但这不是关键），两个地图实例都设置了相同的中心点point，但是当tab切换到第二个地图时，出现了中心点偏移。出现这种现象的原因是，页面初始化时，两个地图都会...
2018-05-15 09:58:18
3774
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人