前端
文章平均质量分 66
qsya
树叶的一生 只是为了归根吗
展开
-
webpack5中css兼容性处理
» 场景webpack5 通过 postcss 来处理 css 兼容性问题webpack版本:“webpack”: “^5.52.1”,“webpack-cli”: “^4.8.0”» 步骤1.安装 postcss 插件npm i postcss postcss-loader postcss-preset-env -D插件版本:“postcss”: “^8.3.7”,“postcss-loader”: “^6.1.1”,“postcss-preset-env”: “^6.7.原创 2021-11-02 22:40:56 · 636 阅读 · 0 评论 -
svg写一个好看的时钟
» 介绍浏览大佬的博客主页时,发现一个款好看、个性的svg时钟,动手实现一下,效果如下:预览地址:https://hq88l.csb.app/博客地址:https://www.cnblogs.com/a-cat/» 实现1.表盘» 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg环形进度条</titl原创 2021-10-31 12:46:52 · 543 阅读 · 0 评论 -
canvas画一个渐变色的环形进度环
» 介绍之前用canvas画了一个环形进度条,想要实现从0到100颜色渐变效果,现有的线性渐变和径向渐变都无法满足,找到一种思路,经供参考,先看效果:预览地址:https://codesandbox.io/s/charming-herschel-b3mk0» 原理原理也很简单:把圆环分成n份,计算初始颜色到终止颜色中间n份颜色的值,每一份圆环一个颜色,从而达到渐变效果。» 代码<!DOCTYPE html><html lang="en"><head>原创 2021-09-30 17:34:08 · 2415 阅读 · 1 评论 -
canvas画一个环形进度条
» 介绍用canvas画一个环形进度条,效果如下:预览地址:https://codesandbox.io/s/nice-murdock-ux93p» 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas环形进度条</title> <style> body {原创 2021-09-30 16:01:14 · 1479 阅读 · 2 评论 -
svg画一个环形进度条
» 介绍在做数据可视化图表时一般会使用 百度echarts 或者 蚂蚁AntV 等成熟的工具库,但如果要自己动手画一个好像有点蒙,本文将简单介绍下如果用svg画一个环形进度条,效果如下:1.WebSockethtml5提供的全双工通讯的协议,浏览器和服务器之间建立一条不受限的双向通信的通道,双向数据传输,需要服务端支持。使用方法可参考:nodejs搭建websocket服务实现多页面通信// 数组去重const unique = (arr)=>{- return Array.fr原创 2021-09-30 14:50:15 · 1087 阅读 · 0 评论 -
浏览器窗口通信的多种方式
» 介绍WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。用 nodejs 简单的搭建 websocket 服务实现多页面通信,效果如下:» nodejs搭建websocket服务新建文件夹 websocket执行 npm init -y 初始化项目执行 npm i ws 安装 ws 依赖新建 server.js 文件执行 node server.js 启动服原创 2021-09-22 16:54:05 · 1728 阅读 · 0 评论 -
nodejs搭建websocket服务实现多页面通信
» 介绍WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。用 nodejs 简单的搭建 websocket 服务实现多页面通信,效果如下:» nodejs搭建websocket服务新建文件夹 websocket执行 npm init -y 初始化项目执行 npm i ws 安装 ws 依赖新建 server.js 文件执行 node server.js 启动原创 2021-09-18 18:18:28 · 1220 阅读 · 0 评论 -
webpack5打包图片资源
场景:在做webpack5打包图片资源时,发现图片无法显示,各种报错,特此记录一下。插件版本:“webpack”: “^5.52.1”,“webpack-cli”: “^4.8.0”1.针对 css 中引入的资源方法一:使用 url-loader 处理图片资源,添加 type: ‘javascript/auto’ 使得webpack5中能够支持旧版语法。需要下载插件:npm i url-loader file-loader -Dwebpack.config.js 中配置:{原创 2021-09-11 18:48:02 · 1418 阅读 · 3 评论 -
mac vscode终端执行全局安装命令报错没有权限EACCESS:permission denied,symlink
报错:原因:当前用户没有对全局仓库(文件夹)的权限,赋予权限即可。sudo chown -R [user] [path]原创 2021-09-09 23:02:12 · 1229 阅读 · 0 评论 -
Element表格设置fixed后popover弹出窗图表无法显示
场景:element表格点击操作列,弹出窗显示图表信息。分析:echarts图表一般定义一个div,然后通过id初始化,渲染图表数据。我们可以通过一个currentId元素控制dom的唯一。 //dom <el-table-column label="操作"> <template slot-scope="scope"> <el-popover placement="left" :width="原创 2021-07-13 18:32:26 · 1174 阅读 · 0 评论 -
Vue滚动到指定位置的多种方式
需求:当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域。方法一:锚点锚点通过在元素上设置id,然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。 //dom <a href="#li50">跳到50</a> <ul class="ul" id="ul"> <li v-for原创 2021-07-13 11:37:39 · 41761 阅读 · 5 评论 -
Element上传组件监听fileList导致图片闪烁
学习目标:提示:这里可以添加学习目标例如:一周掌握 Java 入门知识学习内容:提示:这里可以添加要学的内容例如:1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间:提示:这里可以添加计划学习的时间例如:1、 周一至周五晚上 7 点—晚上9点2、 周六上午 9 点-上午 11 点3、 周日下午 3 点-下午 6 点学习产出:提示:这里统计学习计划的总量例如:1、 技术笔记 2 遍2、CSDN 技术博客 3 篇原创 2021-07-12 18:05:49 · 1417 阅读 · 0 评论 -
Element日期选择器带快捷选项切换日期类型
需求:如图,日期选择器弹出框快捷选项切换日期类型,高亮显示。思路:两种类型的日期弹窗点击快捷选项切换显示,通过ref控制弹出关闭handleClose()和聚焦显示focus()。实现代码:dom: <el-form-item label="日期:"> <el-date-picker key="date" ref="date" size="mini" v-model="time" @focus="focus" v-if="timeType=='d原创 2021-07-12 14:13:27 · 1191 阅读 · 0 评论 -
Echarts点击x轴获取x轴数据
需求:如图所示,点击echart图表的x轴线或者x轴坐标,获取x轴的数据,高亮显示x轴坐标。关键代码: //设置x轴坐标可以点击 xAxis: [{ triggerEvent: true, axisLabel: { color: function (value, index) { return value == time ? '#21aced' : '#fff'; }, clickable: true, }, }],原创 2021-07-12 11:19:12 · 5633 阅读 · 0 评论 -
IconFont使用介绍
IconFont使用介绍前言一、iconfont的优势二、使用步骤1.单个使用2.添加到项目,vue项目引入3.项目使用4.项目追加图标5.上传自定义图标总结前言之前项目对图标的需求不大,基本使用框架自带的图标或FontAwesome能满足日常需求,也有用到了IconFont的但一直没认真去看,决心了解下如何添加、引用。一、iconfont的优势总结几点:图标海量项目管理,多人协同兼容低版本浏览器按需下载,自由搭配线上模式…其他对比:1、IconFont和FontAwesome的原创 2021-04-01 16:53:23 · 558 阅读 · 0 评论