- 博客(37)
- 收藏
- 关注
RSS订阅原创 可拖拽、缩放、旋转组件之 - 多元素组合与拆分功能
基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件在线示例源码地址这节主要来分享如何使用es-drager，根据现有功能实现多个元素组合与拆分功能es-drager 的1.x版本支持移动端啦另外最近还在使用es-drager开发一个低代码编辑器（还未成型），也算是一个es-drager的综合使用案例吧，老铁们可以先到 编辑器案例 中查看在开始讲组合之前，先来介绍一下如何使用svg画一个指定大小的网格。前面的demo都是使用css的方式，感
2023-08-07 10:09:07
425
4
原创 可拖拽、缩放、旋转组件之 - 生成辅助线和撤销回退功能
基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件在线示例源码地址这节主要来分享如何使用es-drager，根据现有功能实现拖拽时生成辅助线、撤销重做等画布常用功能话不多说，咱们开始吧！这里只是一个简单的画布模板循环渲染组件到画布上生成辅助线当拖拽元素时，通过比较拖拽元素与画布上其他元素的位置，当某个元素与拖拽元素的距离接近时，显示辅助线看下图可以清晰的理解这几种对齐方式理解了这几种对齐方式，接下来就用代码来实现吧！监听拖拽开始事件
2023-08-07 10:07:43
369
原创 可拖拽、缩放、旋转组件网格效果及使用方法
基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件拖拽&区域拖拽支持缩放旋转网格拖拽缩放在线示例源码地址上一篇实现细节的文章遗留下了两个问题旋转后再缩放会很奇怪旋转后鼠标经过缩放圆点上时的样式也不相称由于这两个问题代码量较多，建议大家直接去看源代码这篇文章主要分享一下网格拖拽和缩放比的实现及es-drager组件的具体使用，建议大家先看看第一篇文章可拖拽、缩放、旋转组件实现细节。
2023-08-07 10:05:30
859
原创 高效开发大屏可视化项目第二弹：入场动画和无缝滚动
上一篇文章分享了大屏适配、图表组件(Echarts)封装、拖拽布局以及地图组件等功能的封装高效开发大屏可视化项目：公共组件封装指南今天主要分享大屏入场动画和无缝滚动相关功能的实现本文介绍了入场动画和无缝滚动方面的实现，你可以根据示例代码进行实践和定制如果你对该项目模板感兴趣，可以通过源码地址和在线示例链接来获取更多信息，并进行进一步的学习和应用。
2023-08-07 09:53:37
295
原创 高效开发大屏可视化项目：公共组件封装指南
本文主要介绍了在开发大屏项目时的一些常见功能并对其进行了封装，为大屏可视化开发提供了一些基础的解决方案，你可以根据示例代码进行实践和定制关于入场动画和无缝滚动请参考另一篇文章入场动画和无缝滚动。
2023-08-07 09:51:55
255
原创 可拖拽、缩放、旋转组件实现细节
基于 vue3.x + CompositionAPI + typescript + vite 的可拖拽、缩放、旋转的组件目标效果源码地址虽然叫拖拽，但却跟拖拽事件没有一点关系，主要使用mousedown、mousemove、mouseup事件来实现可以看到，核心逻辑主要在 onMousedown 事件处理函数中步骤分析：区域拖拽主要是为了限制元素只能在最近定位父级元素中移动边界值说明：可以看到元素周围有8个小圆点，可以从不同的方向放大或缩小元素selected 选中拖拽元素时显示缩放小圆点主要关注
2023-05-17 09:37:16
1483
原创 基于midwayjs搭建的一套基础后台管理系统(三)-自定义组件&装饰器
在第一篇项目搭建的文章中，我们实现了BaseEntity和对一些公共的属性和方法进行抽离，但在Controller层很难直接做到对通用接口的抽离，只能将一些不是请求接口的方法封装起来。这篇文章就来实现一个Controller装饰器，该装饰器同时具有middwayjs Controller的功能和我们自定义的功能例如：大部分的Controller都会有添加、新增、删除、分页等接口，我想让这些接口使用简单的配置就能添加到路由表中原本的方式使用自定义装饰器后import {
2023-04-12 13:47:14
474
原创 基于midwayjs搭建的一套基础后台管理系统(二)-登录功能
由于项目还在开发中，目前就实现了这些功能，后面会不断完善，也会出一些相关文章。done…！！(●’◡’●)
2023-04-03 15:55:46
475
原创 基于midwayjs搭建的一套基础后台管理系统
由于项目还在开发中，目前就实现了这些功能，后面会不断完善，也会出一些相关文章。done…！！(●’◡’●)
2023-03-31 11:35:47
476
原创 vue3 组件库 (六)：Tree 组件
在工作中我们经常会用到Tree组件，今天就来实现一个简易版的Tree组件，完整的代码请到仓库获取在线预览github 地址数据展示先来看看用户传递过来的数据从上面的使用可以了解到需要定义接收 data、props属性，触发一个node-click事件getNodes 将用户传递过来的数据进行转换renderContext 使用转换后的数据渲染，需要考虑有子节点和没有子节点的情况初次渲染的效果renderContext中给content添加is-expand类，展开条件判断
2023-03-23 14:53:02
6587
原创 手把手从零搭建一个 vue3 组件库 (五)：封装 Message 组件
可以看到抛开ts类型代码还是挺简单的，主要还是理解Transition、createVNode、render的基本使用上面消息框使用Icon组件，vangle中使用了一种便利的方式封装Icon，可直接参考源码完整代码请参考github 地址gitee 地址记得点个星星噢(●’◡’●)
2023-02-07 13:17:16
1145
2
原创 手把手从零搭建一个 vue3 组件库 (四)：使用 vite 打包并发布到 npm
前面几篇文章分享了一个组件库的搭建、组件的编写、样式的处理和编写组件库文档。今天这篇文章主要来分享一下组件库的打包和发布话不多说，开搞！！！
2022-09-05 09:33:09
5773
3
原创 手把手从零搭建一个 vue3 组件库 (三)：模拟 element-plus 组件库文档
前两天有空看了一下 element-plus 的组件库文档实现部分，在这里总结一下。上期讲过文档项目的搭建流程，对这一部分不熟悉的朋友可以先参考参考哈手把手从零搭建一个 vue3 组件库 (二)：为组件编写文档...
2022-08-27 13:59:52
1972
原创 手把手从零搭建一个 vue3 组件库 (二)：为组件编写文档
手把手从零搭建一个 vue3 组件库 (二)：为组件编写文档 本期任务如下： 抽离 eslint-config 定义 css 变量 编写一个 Button 组件 使用 vitepress 为组件编写文
2022-08-23 07:30:00
2140
原创 手把手从零搭建一个 vue3 组件库 (一)
这篇文章会带着你从零搭建一个基于 vue3 的组件库，github地址：https://github.com/vangleer/vangle。话不多说，开搞。
2022-08-17 17:55:30
3213
1
原创 Github Actions 自动部署前端项目
GitHub Action持续集成服务，目前已经免费开放使用，由于大部分人的个人项目都是放在Github上，那么使用它来发布、测试、部署，是非常方便的。最近写了一个基于Vue3 + Vant4 的移动端模板，由于每次想查看线上效果都要手动去打包部署，就去学习了一下Github actions 自动打包发布 项目地址 欢迎 star (_)如果对 Github actions 还不了解的可以看一下阮一峰老师这篇文档 参考文档修改部署配置在package.json中添加一个homepage字段"h
2022-05-19 14:24:25
314
原创 Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目
项目搭建参考vite官网：https://vitejs.cnpnpm create vite代码规范集成 editorconfig 配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | spac
2022-04-27 17:44:38
752
原创 2022三四月前端面试总结
说啥也不能浪费金三银四啊最近出去面试了几次，想着出去试试这一年的学习成果，结果。。。html、css相关盒模型标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ）IE盒子模型：盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 wid
2022-04-01 19:48:45
139
原创 野路子中高级前端进阶之路
前端入门请移步=>前端学习路线如果你感觉到焦虑，每天都想学点啥，确不知道从何学起 别担心这是正常的，因为我也经历过每次计划一个小的技术范围逐个击破，例如：我想话3天把webpack再深入一下，2天把git搞搞，学习完后尽量整理一篇技术文章，我说的是尽量哈，毕竟我也没有这么做(狗头。。。)先申明一下，我个人学习的方式是视频结合书籍或文档的方式，一般我会先看视频过一遍然后再通过书籍或文档复习一边之所以叫野路子是因为这是我自己学习的方法东拼西凑起来的为什么说中高级，3年了大哥，还说初级有点不合适吧
2022-03-22 14:13:29
1375
原创 多个docker-compose共享网络并相互调用服务
在工作中我们可能需要数据库和api接口分开部署的情况，如果都用docker-compose部署的话，在有的操作系统中可能无法使用（ip+端口）连接数据库，必须使用服务名称去连接。这时我们就需要让这两个docker-compose启动的服务共享网络，这样就可以相互调用服务了数据库的docker-compose文件我们可以使用 docker network create my_net 创建一个网络，之后每个docker-compose.yml引用即可也可以先启动数据库服务，最后api服务的docke
2022-03-02 15:23:29
5188
3
原创 docker+nginx部署vue项目
打包vue项目 npm run build / yarn build 此时工程根目录下多出一个 dist 文件夹, 其它项目也可以只要打包好静态文件就行Nginx 是一个高性能的 HTTP 和反向代理服务器，此处我们选用 Nginx 镜像作为基础来构建我们的vue应用镜像。在项目根目录下创建 nginx 文件夹，该文件夹下新建文件 default.conf, 写入如下配置proxy_pass 需改成请求的地址，如果请求地址没有api就重写为空，否则不用 rewriteserver { .
2021-12-28 18:13:21
1555
原创 docker部署eggjs项目，搭建数据库环境 mysql, redis
使用docker部署eggjs项目，看这篇文章之前建议您熟悉一下docker的基本命令安装 redis# 拉取redis镜像docker pull redis# 启动容器docker run -itd --name redis-server -p 6379:6379 redis安装 mysql# 拉取mysql镜像docker pull mysql:5.7# 启动容器docker run -itd --name mysql -p 3306:3306 -e MYSQL_ROOT_PASS
2021-12-28 10:16:34
815
原创 前端书籍推荐
前端书籍推荐如果是刚入门的话，还是建议先看视频学习。等有点基础了看书会得心应手一点。（个人经验,喜欢看书学习例外）推荐入门学习视频书的顺序不分先顺序后哟（虽然标了序号），但建议先看一下 JavaScript 高级程序设计在看其它的一、书名: JavaScript 高级程序设计（第 3 版/第 4 版）作者: [美] 马特 • 弗里斯比2012 年是这本被誉为 JavaScript“红宝书”的著作第 3 版出版的时间。生逢其时，第 3 版狂销几十万册，影响深远，甚至改变了很多人的命运（包括本书译者
2021-02-03 17:16:17
411
原创 js 基础算法题（二）
一、判断一个数是不是质数(素数)质数又称素数。一个大于 1 的自然数，除了 1 和它自身外，不能被其他自然数整除的数叫做质数；否则称为合数。0 和 1 既不是质数也不是合数，最小的质数是 2function isPrime(num) { // 这里特殊处理了一下小于等于3的数，因为小于等于3的自然数只有2和3是质数。 if (num <= 3) return n > 1 // 循环2到num之间的数，不能超过num for (let i = 2; i <
2020-11-11 14:19:54
604
原创 js 基础算法题（一）
一、转驼峰user-top-info-name 变为驼峰 userTopInfoName方法 1-利用数组function toCamelCase(str) { if (!str) return '' // 首先将字符串转换为小写 str = str.toLowerCase() // 使用 split 将字符串转换为数组 let strArr = str.split('-') // 使用 map 遍历数组，数组第一个不用转，其它的都转 /* strArr =
2020-11-10 09:30:46
414
原创 asyn/await 的语法和使用
一、 async 函数函数的返回值为 promise 对象promise 对象的结果由 async 函数执行的返回值决定async function fn() { // return 1 返回一个成功的promise，值为 1 // throw 2 返回一个失败的promise，值为 2 // return Promise.reject(3) 返回一个失败的promise，值为 3 return Promise.resolve(4) // 返回一个成功的promise，值为 4}
2020-11-04 16:36:42
643
原创 手写 promise
一、 Promise 的理解Promise 是 JS 中进行异步编程的新解决方案promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值promise 有 3 种状态，pending、resolved、rejectedpromise 的状态改变(只有 2 种, 只能改变一次)，pending 变为 resolved， pending 变为 rejected二、Promise 构造函数/* Promise构造函数 */const PENDING = 'pending'
2020-11-04 12:32:12
106
原创 原生 ajax 封装
一、AJAX 简介AJAX 全称为 Asynchronous Javascript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，不是新的一门独立的技术，而是一种使用现有标准的新方法。二、AJAX 的工作原理Ajax 的工作原理相当于在用户和服务器之间加了一个中间层(Ajax 引擎)，使用户操作与服务器响应异步化。三、AJAX 的特点AJAX 的优点可以无需刷新页面而与服
2020-11-03 09:05:26
247
原创 Git使用总结
一、Git的安装Windows版的Git，从https://git-scm.com/download/win下载然后按默认选项安装即可。安装完成后，右键打开菜单栏找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！安装完成后，还需要最后一步设置，在命令行输入：git config --global user.name “Your Name”git config --global user.email “email@example.com”备注
2020-11-02 11:17:59
65
原创 Vue 实现 Switch 组件-通过vue.use()注册
组件封装代码 components/switch/switch.vue<template> <div class="sun-switch" :class="{'sun-switch-on':value,'sun-switch-disabled':disabled}" :style="{fontSize:size,backgroundColor:CalBgColor}" @click="handleChange" > <div
2020-09-21 10:07:51
745
原创 js深拷贝和浅拷贝
浅拷贝与深拷贝的区别解释:浅拷贝: 只是复制了对象属性或数组元素本身(只是引用地址值)深拷贝: 不仅复制了对象属性或数组元素本身, 还复制了指向的对象(使用递归)举例:浅拷贝: 只是拷贝了每个 person 对象的引用地址值, 每个 person 对象只有一份深拷贝: 每个 person 对象也被复制了一份新的浅拷贝实现利用 ES6 语法function shadowClone1(target) { // 如果是数组 if (target instanceof
2020-09-09 09:02:49
257
原创 js数组去重
一、理解根据当前数组产生一个去除重复元素后的新数组如: [6,9,8,7,2,5,6,5,4,5,6,4,5] ==> [6,9,8,7,2,5,4]二、实现代码forEach()和indexOf() 说明: 本质是双重遍历, 效率差些 /* 接收一个数组为参数,返回一个去重的数组 */ function unique (array) { // 定义一个空数组 const resultArr = [] // 循环遍历未去重的数组 a
2020-09-04 08:54:43
571
原创 数组声明式系列方法:map、reduce、filter、some等的实现
map() Array.prototype.myMap = function (callback) { const arr = [] // 遍历当前数组每个元素, 调用callback得到一个结果数据, 添加arr for (let index = 0; index < this.length; index++) { const element = this[index]; const result = callback(element, inde
2020-09-03 09:20:49
177
原创 函数的节流(throttle)与防抖(debounce)
一、事件频繁触发可能造成的问题?一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题如果向后台发送请求，频繁触发，对服务器造成不必要的压力二、如何限制事件处理函数频繁调用函数节流函数防抖三、函数节流(throttle)理解:在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次适合多次事件按时间做平均分配触发场景：窗口调整（resize）页面滚动（scroll）DOM
2020-09-01 09:37:41
214
原创 call、apply、bind的区别和自定义
区别call()/apply()/bind()call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值注意: 如果obj是null/undefined, this为window应用call()/bind()应用: 根据伪数组生成真数组bind(): react中组件的自定义方法 / vue中的事件回调函数内部自定义call()/apply(
2020-08-31 09:51:28
139
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人