![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 65
Dreamy_lin
做好当下
展开
-
create-vue源码学习之 gradient-string 渐变色打印
在使用 create-vue 脚手架时,想实现如下的打印效果。原创 2024-07-22 11:28:41 · 291 阅读 · 0 评论 -
下载后端返回的图片,而不是打开图片
使用 window.location.href 和 window.open 后都是打开图片,原因是,当浏览器发现是浏览器支持的文件类型,例如 jpg、png、svg 等,默认是浏览器打开。原创 2024-06-27 23:40:25 · 359 阅读 · 0 评论 -
Vue3 父事件覆盖子事件,Vue2 的 v-on=“$listeners“ 的替代方案
子组件代码,需要特别注意的是事件名为 on 开头,例如 onBack。不确定的可以通过给父组件传递 事件或属性,再打印子组件的 attrs = useAttrs(),来确定传值。在 Vue3 中,$listeners 被删除。原创 2024-01-11 17:12:26 · 1089 阅读 · 0 评论 -
textarea 内容自适应,高度向上扩展
屏幕录制 2024-01-07 111723。原创 2024-01-07 11:36:19 · 1073 阅读 · 0 评论 -
单点登录方案调研与实现
在一个系统登录后,其他系统也能共享该登录状态,无需重新登录。原创 2023-12-05 16:11:56 · 466 阅读 · 0 评论 -
Symbol 小试
Symbol 较为实用的介绍原创 2022-07-17 17:48:23 · 162 阅读 · 0 评论 -
函数式编程之 compose 实现
原打算研究下 compose 实现就好了,可是顺藤摸瓜,看到了一个更大的世界。先来看看函数式编程,再来学学compose的实现吧。原创 2022-07-16 19:48:37 · 353 阅读 · 0 评论 -
前端设计流程参考
较为详细的设计流程参考原创 2022-07-03 18:03:42 · 366 阅读 · 0 评论 -
用 Vue 实现原生日期选择器
效果:原创 2022-01-03 12:38:33 · 5745 阅读 · 9 评论 -
前端 UI 实现自检清单
通过自检清单,提高前端和 UI 间的工作和沟通效率。自检清单:1、易忽略的实现:字体颜色、框线、背景颜色、分割线、字体粗细、hover、icon2、对齐:图像和文字居中对齐、文字换行对齐、模块间对齐(左对齐,右对齐)、标题和按钮对齐3、hover 前后样式变化:背景色、字体颜色、圆角4、间距:模块和分割线的边距、按钮间间距、模块间间距、标题内外的间距:5、文字:颜色、文案内容需确认和 prd 或 UI 的一致、一般不换行6、表格:有多种情况和布局要求,在实现过程中最好和 UI 多沟通。表格文原创 2021-03-31 11:28:30 · 659 阅读 · 0 评论 -
git worktree:在一台电脑上,同时开启不同分支的同一个项目
使用场景:平常为了修bug等,会切换分支,而切换分支的会花费许多的等待时间。不如再开启一个新项目。可采用方法:clone 多份 repo 的方法:会导致重复和各种同步问题git clone:多个项目时,会占用硬盘空间。项目管理不如 git worktree 方便git worktree:git worktree 会将新分支取出来新建一个文件夹,他们的 local repo 是同一个注意事项:都需要修改相应的端口号,避免端口冲突。提交到远程时,别忘了将端口号修改回来,不然就尴尬了。当然原创 2021-03-21 17:01:11 · 2093 阅读 · 0 评论 -
width:100%、width:auto、绝对定位、box-sizing:border-box、box-sizing:content-box 的混搭结论分析
在开始之前,先回顾些知识点。一、CSS盒模型CSS的盒模型由外到内分别为 margin、border、padding、content。分为标准盒模型与IE盒模型,可使用 box-sizing 属性去切换盒模型。标准盒模型:box-sizing:content-box; 意味着该盒子的 width 包裹的是 content 盒子即 content 部分。IE盒模型:box-sizing:border-box; 意味着该盒子的 width 包裹的是 border 盒子即 border + paddin原创 2021-01-10 15:54:56 · 760 阅读 · 3 评论 -
网络安全初探析——XSS、CSP、CSRF
一、XSS1、概述Cross-Site Scripting(跨站脚本攻击)简称 XSS,是一种代码注入攻击。攻击者通过给目标网站注入脚本,诱导用户点击,使得脚本最终在用户的浏览器上执行。为了和 CSS区分,改名为 XSS。利用注入的脚本,能干的坏事有:注入脚本获取信息窃取用户Cookie,为接下来的CSRF做准备绕过网页过滤进行攻击劫持流量,实现恶意跳转2、XSS 分类2.1、 存储型 XSS(持久型XSS)攻击步骤:恶意代码被攻击者提交到目标网站上,最终存储在目标网站的数据库中原创 2020-12-27 18:21:12 · 958 阅读 · 1 评论 -
JavaScript 的显式转换和隐式转换(超详)
1、js数据类型最新的ECMAScript 标准定义了8 种数据类型。7种基本类型(也就是原始值):Undefined、Null、Boolean、Number、String、Symbol(es6)、BigInt(es10)(这里不讨论 Symbol、BigInt 两种类型。)Undefined、Null的特殊情况以及Boolean的转换都比较好记忆。剩下的只需要关注好 String、Number 这两种类型。1种对象类型:Object2、类型转换数据类型间的转换可分为:原始值间的转换原创 2020-12-24 16:02:39 · 5064 阅读 · 0 评论 -
webpackChunkName 魔法注释失效解决,只能显示 id 的解决方案
问题路由懒加载时,采用ES6的按需加载方式,却无法显示webpackChunkNameconst BackHome = () => import(/* webpackChunkName: 'backHome' */ '@/views/back/back_home');const ArticleMgt = () => import(/* webpackChunkName: 'articleMgt'*/ '@/views/back/article_mgt');const CommentMgt原创 2020-12-08 18:39:55 · 2892 阅读 · 4 评论 -
腾讯云Centos配置Nginx + node
一、环境Linux:CentOS 7.6 64位Nginx:nginx-1.13.1安装目录:/usr/local配置文件:/usr/local/nginx/conf/nginx.conf其他nginx版本下载二、安装和配置1、安装Nginx依赖yum install gcc yum install gcc-c++yum -y install pcre*yum -y install zlib*// openssl (若需要支持 https 协议)yum -y instal原创 2020-12-03 12:29:04 · 277 阅读 · 1 评论 -
box-shadow的模糊距离和阴影扩展半径的关系
box-shadow: 2px 2px 4px 1px red insert;参数从左到右依次是,水平阴影位置(必须)、垂直阴影位置(必须)、模糊距离(可选)、阴影扩展半径(可选) 阴影颜色(可选)、阴影向内(可选,不选向外)1、水平阴影位置、垂直阴影位置也就是阴影水平/垂直移动的距离box-shadow: 200px 10px 0px 0px black; (这里的矩形宽度为200px)2、阴影扩展半径:也就是在原矩形阴影的基础上,向外延伸阴影扩展半径区域box-shadow: 210px 0原创 2020-07-10 21:32:56 · 2150 阅读 · 0 评论 -
Vue的favicon设置,打包生产开发条件下均可
主要是模仿了vue-cli的方式,第一步,将favicon.ico放在static目录下,通过vue-cli 的拷贝插件copy-webpack-plugin,打包后将生成在dist/static的目录下。第二步,修改打包前的index.html,在head里引入favicon.ico,如下,之后运行起来就可以看到了。 <link rel="icon" href="/static/favicon.ico" type="image/x-icon">不用vue-cli的话,自己配置拷贝插原创 2020-07-10 11:30:09 · 1401 阅读 · 0 评论 -
前后端分离开发思路,用Node作为中间件
前言随着公司技术革新,Node.js逐渐应用在新技术体系中,从2009年发布至今Node.js逐渐成熟和日趋稳定。一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Node.js上面来,也有一些公司将Node.js作为前后端分离的一个解决方案去施行。国内最早淘宝网完成了前后端分离,也提供了一个很大的开发导向。前端分离之前生今世在最初的web开发中,行业主要将浏览器作为前后端的分界线,将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码转载 2020-06-12 11:39:49 · 1399 阅读 · 0 评论 -
HTML内嵌Markdown编辑器
实现步骤1、获取markdown的开源库,这里用的是开源项目showdown。将showdown.min.js和showdown-table.min.js(用于支持表格转换)拷贝到项目中。showdown: https://github.com/showdownjs/showdownshowdown的showdown-table: https://github.com/showdownjs/table-extension2、选择喜欢的Markdown样式,直接引用该css到自己的项目,还可原创 2020-05-23 18:49:53 · 3505 阅读 · 0 评论 -
纯CSS实现自定义复选框样式
复选框和单选框在绝大多数浏览器里无法设置样式(无法修改颜色),而有时需要修改它的样式。可以通过给input或label增加伪类的方式,但input增加伪类会存在浏览器不支持的情况。采用给label增加伪类的方式更好,还能与复选框关联,触发开关。通过对label增加伪元素。并基于复选框的状态来为其设置样式,并美化。再把真正的复选框隐藏起来(最好不要用display:none和visibility:hidden方法,因为它们会将复选框从tab键切换焦点的队列中完全删除)。实现代码:<style>原创 2020-05-23 13:11:56 · 643 阅读 · 0 评论 -
原生Javascript实现表格行上下拖拽
拖放事件拖动元素时,以此触发的事件:dragstart 按下鼠标并移动时触发drag 拖动期间持续触发dragend 松开鼠标触发拖动到有效的放置目标上时,依次触发:dragenter 元素被拖到放置目标上dragover 被拖元素在放置目标内移动,持续触发dragleave或drop dragleave,元素被拖到放置目标外触发。drop元素被拖到有效的放置目标上(默认无效),并松开鼠标触发。实现代码如下:<!DOCTYPE html><html>&原创 2020-05-22 18:31:41 · 3749 阅读 · 1 评论 -
IconFont使用
IconFont优点:相比加载许多图片,IconFont将多个图标合并到一个字体文件中,可以减少http请求,提高网页性能;因为是字体,可自由的变换大小(字体大小即为图标大小)和颜色;矢量图不失真;适用于多个平台(浏览器、iOS App、Android App)。IconFont缺点:单色;创建自己的字体图标很费时间,维护成本高;使用版权的限制,有的字体收费。使用方法(这里以阿里巴巴矢量图标库为例。https://www.iconfont.cn/):一、选择图标加入购物车,点击购物车,选原创 2020-05-13 23:24:39 · 345 阅读 · 0 评论 -
清除浮动 clearfix:after
现象:在父元素div内,添加两个子元素,都为float。会发现父元素没有包裹子元素(高度塌陷)。原因是子元素由于增加浮动而脱离标准流(块级元素,从上到下排列,称为标准流)导致的,如图一。此时往父元素同级或内部增加元素,会被遮挡或布局错乱,如图二。 图一 图二代码部分:<style> header { border: 2px solid yellow; } header > div:nth-child(1) {原创 2020-05-15 12:11:36 · 380 阅读 · 0 评论 -
最简单的SVG图标使用方式
简介Icon Sprite :CSS精灵或雪碧图,是一种网页图片应用处理方式。原理是,把网页中一些Icon整合到一张图片文件中。再通过一定方式从图片文件中取出所需Icon并显示。其中CSS Sprite、Icon Font使用最多。CSS Sprite:原理是将多个icon按一定规律整合到图片文件中,再利用CSS的"background-image",“background-repeat”,"background-position"的组合进行图片定位并显示。优点:技术成熟,兼容性好;缺点:在实际需求中原创 2020-05-19 17:50:38 · 6851 阅读 · 0 评论 -
浏览器窗口缩小后,滚动条拉至右边显示空白
问题描述:当浏览器缩小后,出现滚动条,拉至右边,显示出来的部分为空白.原因:通过控制台的查看,可得知,浏览器窗口缩小后,子元素的宽度大于父元素的宽度,子元素将父元素撑开所致,如图:解决方案:在父元素上添加样式:style="width:expression(document.body.clientWidth <= 1200? '1200px': 'auto');min-width:1200px"由于IE6不支持min、max,为了兼容,故使用width:expression(docu原创 2020-05-13 18:19:18 · 2604 阅读 · 0 评论