web前端
以实战为线索,逐步深入前端开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
天高任鸟飞dyz
一名技术狂热追求者,一直在奔跑从未停止过。
展开
-
上传下载传输列表进度条展示
【代码】上传下载传输列表进度条展示。原创 2024-07-16 16:43:25 · 162 阅读 · 0 评论 -
js常用方法(日常更新)
【代码】js常用方法。原创 2024-04-25 11:10:51 · 132 阅读 · 0 评论 -
js上传文件、文件夹
【代码】js上传文件、文件夹。原创 2024-04-18 14:29:46 · 349 阅读 · 0 评论 -
WebSocket使用
【代码】WebSocket使用。原创 2024-04-18 14:19:09 · 250 阅读 · 0 评论 -
微前端(qiankun)vue2、vue3微应用嵌入
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。原创 2024-02-18 17:55:56 · 4478 阅读 · 0 评论 -
vue计算排列布局
【代码】vue计算排列布局。原创 2023-12-04 18:52:08 · 519 阅读 · 0 评论 -
post请求下载文件
【代码】post请求下载文件。原创 2023-06-15 18:14:05 · 959 阅读 · 0 评论 -
G6 Graph配置
SVG 除支持内置的所有节点/边类型以及自定义节点/边时使用与 Canvas 相同的图形外,还支持在自定义节点/边时使用 'dom' 图形,详见。中文字“图”在大家的传统认知里指的是图画、图像,而图论与可视化中的“图”—— Graph 则有着更精确的定位:主体(objects)与关系(relationships)的组成。在 G6 中,Graph 对象是图的载体,它包含了图上的所有元素(节点、边等),同时挂载了图的相关操作(如交互监听、元素操作、渲染等)。除默认状态外的其他状态下节点的样式配置。原创 2023-01-10 11:57:11 · 1770 阅读 · 1 评论 -
字母制作头像
字母头像原创 2022-12-15 16:23:00 · 532 阅读 · 0 评论 -
element-plus el-date-picker限制一个月范围
vue3 时间选择器限制时间范围一个月原创 2022-12-07 14:38:26 · 2625 阅读 · 1 评论 -
地图制作生成html文件
地图生成html原创 2022-10-17 19:12:52 · 231 阅读 · 0 评论 -
cookie插件(js-cookie)
js-cookie原创 2022-09-22 19:17:34 · 1284 阅读 · 0 评论 -
数组reduce方法详解
很多前端开发中都知道数组的reduce方法可以用来给数组求和,但是你问到里面的具体参数代表的时候什么,很多人却不知道。原创 2022-08-24 14:31:22 · 436 阅读 · 0 评论 -
sse数据接收
SSE(Server-Sent Events):是一种基于HTTP的,以流的形式由服务端持续向客户端发送数据的技术。原创 2022-08-23 10:59:24 · 1691 阅读 · 0 评论 -
drone-js 接口文档
【代码】drone-js 接口文档。原创 2022-08-22 18:43:26 · 413 阅读 · 0 评论 -
js对象转FormData对象(一般用于上传)
js对象转FormData对象(一般用于上传)原创 2022-08-09 15:41:19 · 1743 阅读 · 0 评论 -
axios中断请求
axios中断接口请求原创 2022-06-29 15:07:15 · 1013 阅读 · 0 评论 -
列表加入计时器(正计时、倒计时)
列表加入计时器(正计时、倒计时),列表每一行都有独立计时!原创 2022-06-28 16:29:46 · 421 阅读 · 1 评论 -
vue大文件下载(下载进度展示)
vue大文件下载(下载进度展示) 提示框展示下载进度原创 2022-06-28 15:37:58 · 5098 阅读 · 0 评论 -
yarn使用
安装yarn卸载yarn查看yarn配置查看当前yarn源修改yarn源(下方为淘宝的源)查看yarn 版本yarn安装依赖yarn 卸载依赖yarn 查看全局安装过的包原创 2022-06-14 15:52:25 · 784 阅读 · 0 评论 -
您的连接不是私密连接(解决方法)
解决浏览器 不是https加密连接无法进入问题原创 2022-06-02 11:47:46 · 2871 阅读 · 0 评论 -
vue3+ts+vite+elementPlus项目模版
仓库地址:https://gitee.com/DingYuanzhi/vue3-ts-vite-elementPlus原创 2022-04-25 11:13:55 · 1367 阅读 · 0 评论 -
vue全局注册组件
在components文件夹下新建index.js文件@/components/index.jsimport Vue from 'vue'// require.context 是webpack的一个apiconst req = require.context('./', true, /\.vue$/)// 全局注册req.keys().forEach((element,index) => { let name = element.replace(/(\.\/)|(\.vue)原创 2022-04-22 16:51:58 · 4711 阅读 · 0 评论 -
vue3 语法使用
Vue3语法原创 2022-04-15 16:40:39 · 9193 阅读 · 3 评论 -
AntV-G6 Tooltip基础配置
G6 Tooltip基础配置原创 2022-04-13 14:29:31 · 3341 阅读 · 0 评论 -
url 传参转译
encodeURIComponent(URL)编码decodeURIComponent(URL)解码原创 2022-04-11 11:18:49 · 739 阅读 · 0 评论 -
SSH密钥生成
cd ~/.ssh 查看ssh文件夹下是否存在文件open ~/.ssh 打开ssh 密钥会包含id_rsa和id_rsa.pub两个文件,分别表示生成的私钥和公钥生成ssh密钥ssh-keygen -t rsa -C "dingyuanzhi@wodcloud.com"一路回车原创 2022-04-06 19:09:10 · 3939 阅读 · 0 评论 -
js事件循环机制(Event Loop)
event loop它最主要是分三部分:主线程、宏队列(macrotask)、微队列(microtask)原创 2022-02-11 09:52:41 · 1746 阅读 · 3 评论 -
this指向详解(apply,call,bind区别)
一、普通函数this指向函数的this指向遵循一个基本原则:谁调用的函数,函数的this就指向谁,否则指向全局示例var name = 'window'let obj = { name: 'yuanzhi', show1: function () { console.log(this.name) }, show2: function () { return function () { console.log(this.name) } .原创 2021-12-01 17:59:37 · 588 阅读 · 2 评论 -
防抖(debounce)和节流(throttle)
一、防抖动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。具体方法是:在上一次事件触发之后的time时间内如果事件没有再次触发,那么就在time时间后触发,否则将触发的时间作为新的起始点通俗理解就是,将密集的时间触发事件看作一个时间整体,整个整体只触发一次事件,密集的界定就是相邻事件触发时间小于time,则以这个整体的最后一次事件触发为起始点...原创 2021-11-10 11:52:03 · 3551 阅读 · 1 评论 -
Vue 强制页面刷新(provide 和 inject)
一、常规方法location.reload();this.$rotuer.go(0);存在问题:1.强制刷新页面,出现短暂的空白闪烁。2.h5页面在安卓机方法不兼容。this.$rotuer.go(0) 安卓、ios都不支持、pc支持 location.reload() 安卓不支持 、 ios支持、pc支持二、provide和inject实现页面刷新祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。1、在 App.vue 文件原创 2021-11-03 16:27:28 · 6025 阅读 · 6 评论 -
Mac 终端启动本地服务
使用场景:访问打包后文件首先需要安装,直接在终端运行即可:sudo npm i serve -g --save完成后安装后,cd至你要访问的文件下(默认访问的是:index.html)。最后输入:serve如图表示已经启动,而且会自动带上端口(注:每次启动端口号不一样),其实原理都是使用了Mac自带的Apache服务。...原创 2021-10-29 10:03:48 · 369 阅读 · 0 评论 -
vue路由守卫 beforeEach、钩子
1、全局钩子2、某个路由独享的钩子3、组件内钩子1.全局钩子主要包括beforeEach和aftrEach,beforeEach函数有三个参数:to:router即将进入的路由对象from:当前导航即将离开的路由next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。afterEach函数不用传next()函数这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例...原创 2021-10-26 16:27:53 · 967 阅读 · 0 评论 -
element-ui tree添加提示线
1.页面渲染<template> <div class='mytree'> <el-tree :indent='0'></el-tree> </div></template><-- 注意: :indent='0'这一项设置一下,否则线跟节点之间会有很大的缝隙-->2.样式<style lang="scss" scoped>.mytree /deep/{ .原创 2021-09-17 11:04:16 · 442 阅读 · 2 评论 -
element tree组件半节点回显问题
一、需求keys:[半选节点key+勾选节点key] 通过keys进行tree树回显节点为全选,则设置为全选。若改节点下未全部勾选,父节点设置为半全选。样式:keys:keys:[1,4,9]data:data: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' },原创 2021-09-02 13:03:09 · 779 阅读 · 0 评论 -
数组方法
整理目前所用过的数组方法,学习了新增的es6方法。1arr.push()从后面添加元素,返回值为添加完后的数组的长度let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]2arr.pop()从后面删除元素,只能是一个,返回值是删除的元素let arr = [1,2,3,4,5]console.log(arr.pop()) // 5console.lo...转载 2021-08-27 14:19:35 · 681 阅读 · 0 评论 -
Ts 常用写法
/* bad */const str: String = 'foo';const bool: Boolean = true;const num: Number = 1;const symb: Symbol = Symbol('foo');const func: Function = () => 1;const lowerObj: object = {};const capitalObj1: Object = 1;const capitalObj2: Object = { a: 's..原创 2021-08-25 16:57:15 · 1267 阅读 · 0 评论 -
Vue响应式原理初探
一、数据侦测(一)侦测 Object1. Object.defineProperty(obj, prop, descriptor)该方法用于设置对象属性,其接受 3 个参数,第一个参数是需要定义的对象,第二个是需要定义的属性,第三个则被称为描述符。JS 中的对象身上有两种描述符,第一种是数据描述符,具有以下键值:configurable,用于描述数据的可配置性,是否可通过 delete 操作符删除,默认值为 false; enumerable,表示该属性是否可枚举,即可通过 for..原创 2021-08-16 14:41:45 · 160 阅读 · 2 评论 -
vue鼠标悬浮框
效果:html:<div @mouseenter="enter" @mouseleave="leave" @mousemove="move">鼠标触碰元素</div><div v-show="popUpShow" class="hover_con" :style="positionStyle">悬浮框</div>js:export default { name: '', data() {原创 2021-08-13 15:52:06 · 2211 阅读 · 0 评论 -
tinymce富文本编辑器(vue)
TinyMC编辑器简介TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费。TinyMCE的优势:开源可商用,基于LGPL2.1插件丰富,自带插件基本涵盖日常所需功能接口丰富,可扩展性强,有能力可以无限拓展功能界面好看,符合现代审美提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)对标准支持优秀(自v5开始)多语言支持,官网可下载几十种语言。下图为开启全部功能的截图Tiny原创 2021-08-10 10:06:04 · 49491 阅读 · 16 评论