- 博客(28)
- 收藏
- 关注
RSS订阅原创 antV X6 2.0 自定义节点
使用G6去实现血缘图与DAG图同样也是可以的，但是因为我们使用的技术栈是vue3，G6文档中对于自定义节点的支持没那么好，也就是所我们想以单独组件的形式实现（例如在其中写antd的checkbox，下拉菜单）并没有x6友好（2023.3.9）1、节点宽度需要根据内容宽度自适应，超出一定宽度展示...，这个操作相对比较复杂，我这里的实现依旧是第一篇文章中的在创建节点前确定文字的宽度，用...替换字符，然后根据宽度创建节点来实现。在移动端，需要支持展示和简单交互，对性能的要求更高，因此这种需求优选 G6。
2025-02-24 03:11:47
1040
1
原创 Antv X6 血缘关系图原始图表方案
2、在图上的html中可以看到，即使定义了html元素是div, 在其上面依然有一个svg的rect标签, 并且此标签的宽度依旧需要被提前定义好, 设置auto、不设置、100%都不生效, 并且在图中可以看到标签右侧空出了很大一块空白区域, 就是因为设置了宽度。1、注册新节点：使用antv-x6提供的自定义节点注册新节点 Graph.registerNode，注册的新节点可以处理成ui图的样式，问题：我在实现过程中遇到 注册只能注册一次，如果放到组件中注册，当组件重新打开时会提示重复注册的报错。
2025-02-24 03:11:30
1097
原创 Vue3的ref与reactive
声明的变量在读取和修改时都需要加 .value小尾巴，但是正因为有这个小尾巴，我们在 review 代码的时候就很清楚知道这是一个 ref声明的响应式数据。更像是Vue2时代的option API中的data的替代品，可以存放任何数据类型，而reactive声明的数据类型则仅限于对象。ref声明的响应式变量携带迷人的 .value小尾巴，让我们一眼就能确定它是一个响应式变量。// 使用 toRefs 解构，后的属性为 ref 的响应式变量。使用 toRefs解构，解构后的属性是 ref的响应式变量。
2025-02-24 03:10:04
601
原创 Vue3.4版本更新
与之前基于正则表达式的解析器相比，新的解析器使用基于状态机的标记化技术，它通过单次遍历整个模板字符串来解析模板，显著提高了解析速度，模板解析器速度提高了2倍。而在 Vue 3.4 中，优化后的系统确保只有在计算结果实际变化时，相关的效果才会被触发，从而减少了组件的不必要渲染，提升了整体的性能。暂时还是老老实实写旧语法吧。除了基准测试中显示的收益外，这应该会减少许多场景中不必要的组件重新渲染，同时保持完全的向后兼容性。这样的改进为开发者提供了更精确的类型支持，减少了类型相关的错误，使得代码更加健壮和可维护。
2025-02-24 03:09:51
956
原创 对于Modal框免清除数据与避免v-if无动画效果的实践
Modal开启一次后：始终存在页面上添加destroyOnClose：Modal 与Modal内元素随开启与关闭进行创建与销毁onMounted 执行次数：1次Modal元素初始时是否创建：不创建，开启一次后创建Modal内容封装 + 添加destroyOnCloseonMounted 执行次数：每次开启都执行Modal元素初始时是否创建：不创建，每次开启时重新创建、关闭后销毁onMounted 执行次数：页面创建时执行onMounted（相当于子组件的onMounted，与Modal无关）
2025-02-22 17:48:12
947
原创 可视化图表分类及其用途理解
每个扇形的弧长（以及圆心角和面积）大小，表示该种类占总体的比例，且这些扇形合在一起刚好是一个完全的圆形，饼图最显著的功能在于表现“占比”。曲线面积图，或称区域图，是一种随有序变量的变化，反映数值变化的统计图表，原理与折线图相似。条形图是一种以长方形的长度为变量的统计图表。气泡图是一种多变量的统计图表，由笛卡尔坐标系（直角坐标系）和大小不一的圆组成，可以看作是散点图的变形。圆环图属于饼图的一种可视化变形，是数据可视化中最常见的图形之一，用于观测各类数据大小以及占总数据的比例，显示了各个部分与整体之间的关系。
2024-12-20 13:28:00
240
原创 拖拽技术方案调研
因为是数据传递，不改变dom所以拖拽到的位置需要自行计算（而且提供的api返回的位置是相对浏览器left\top，需要在hover方法中获取元素对应浏览器位置进行计算）结论：简单的同类拖拽使用sortable.js或vuedraggable即可，不同类型拖拽可以选择vue3-dnd。因为插件刚出来3个月，下载量>1还始于1个月前，坑多、用法复杂、大部分功能需要在官方文档-案例-代码中寻找用法。不同类型拖拽需要删除已拖拽dom，重新创建或通过数据创建相应dom（可能会有dom闪烁的情况）
2024-12-19 16:43:49
351
原创 代码开发规范
而对于绑定在当前模板内容内的事件，尽管在onUnmounted阶段DOM通常已被销毁，导致无法直接注销监听器，现代浏览器已优化处理未与DOM关联的监听事件，自动释放它们。因此，为了确保应用程序的内存管理高效无漏，应在onUnmounted生命周期钩口中，主动调用插件提供的实例销毁方法，从而释放这些潜在的内存占用，维持应用的轻量与性能。你需要保证组件的 props 能应对不同的情况。在 Vue.js 中，组件的 props 即 API，一个稳定并可预测的 API 会使得你的组件更容易被其他开发者使用。
2024-08-26 14:48:44
795
原创 div上下拖拽（resize）
实现拖拽的方式有很多种，css实现可能不是最好的实现方式，仅供参考。话不多说，先上图需求介绍：主要实现的是 中间区域（红框）内可以托住上下拖动.功能实现所需： resize: css3新增属性，放在div上即可使其可以拖拽，详见:resize介绍文档(https://www.w3school.com.cn/cssref/pr_resize.asp) cursor:ns-resize，上下拖拽鼠标图标.详见：[cursor属性](https://developer.mozilla.org/zh.
2022-04-21 22:19:46
3395
1
原创 vue2总结 (完整搭建、风格指南融合)
1、项目搭建vuex部分1、我们都知道vuex的取值、提交可以通过两种方式例如：this.store...mapState()为了方便统一，并且简化模块化后this.store ...mapState() 为了方便统一，并且简化模块化后this.store...mapState()为了方便统一，并且简化模块化后this.store.commit()/dispatch()/getters() 第一个参数都需要通过 模块名/字段名 的形式操作 我们统一使用…mapState()…mapGetter
2021-09-23 18:34:41
1082
原创 匹配文本内容高亮
老规矩，先图后解：方法一：brightenKeyword(val) { // this.keyword为输入框绑定的值 if (val.includes(this.keyword) && this.keyword !== "") { return val.replace( // 替换掉keyword 加上颜色标签 this.keyword,
2021-04-19 17:45:02
560
原创 百度地图开发探索 angular7地图原始宽高固定、初始化、工具条/比例尺、缩略图/混合图，地图类型切换（卫星、三位、混合）、定位/版权/城市列表控件
1、地图宽高固定（整页背景）通过ID获取地图，高度随窗口变化而变化const height = window.innerHeight - 123;const map = document.getElementById('allmap');map.style.height = height + 'px';2、地图初始化
2021-01-15 10:51:14
573
原创 百度地图开发探索 定位功能（搜索获取位置，地图自带定位，点击获取定位） typescript angular
百度地图定位定位控件：如图// 定位控件 locationControl() { // 添加带有定位的导航控件,就是缩放控件+定位按钮 const navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: BMAP_NAVIGATION_CONTROL_LARGE, /
2021-01-15 10:51:05
3743
2
原创 百度地图开发探索 angular7 (typescript) 添加参考点、定位点与自定义弹窗
添加参考点并获取位置话不多说，看图说话分析一下此点和弹窗的组成：1、上图的蓝色图标为一个marker2、生成一个marker需要point，生成point需要两个坐标（经纬度）3、上方的弹窗是依赖于marker生成的（弹窗自定义样式下面会有整理）// 参考点 referencePoint(e: any) { const point = new BMap.Point(e.point.lng, e.point.lat); // 创建point const poiIcon = n
2021-01-15 10:50:57
1108
原创 百度地图开发探索 添加覆盖物（圆形、多边形、行政区）围栏 typescript angular
添加覆盖物话不多说，先上图，看图写代码（添加点的在上一章有整理）1、圆形围栏：2、多边形围栏：3、行政区围栏：图形的展示：// 画围栏 drawFence(fenceDetail: any) { this.fenceDetail = null; const pointArr: any = []; this.fencePolygon = []; let pointView: any = []; let points: any = []; c
2021-01-15 10:50:49
1330
原创 百度地图开发探索 轨迹（路书） typescript angular
上图为先：轨迹的组成：起点、终点、一条线、线上的小车主要功能：添加轨迹、小车在轨迹上跑动、小车回到起点、小车回到重点、小车速度调节、轨迹的粗细调节实现方式：路书还有一种是在轨迹线不断的对小车进行添加和删除操作，感觉会更灵活，因为可以时刻记录你想要的数据，但是路书是封装好的方式，我也没有研究很全面添加轨迹// 画轨迹 drawTrack(trackArr: Array<any>, startOrEnd?: any) { this.lushuPointArr = [];
2021-01-15 10:50:40
1281
原创 大型动态表单实例整合 angular7 4-具体应用与数据库配置 与总结
先上代码：，引用app-dynamic-form组件<ng-container *ngFor="let tab of emergencyArr"> <div class="container-fluid product-info" *ngIf="!tab.componentName"> <div class="row form-customer"> <app-dynamic-form #emergencyInfo [config]="t
2021-01-15 10:50:17
216
原创 大型动态表单实例整合 angular7 3-具体动态模版组件库 动态input、动态日期选择框
总组件首先是动态模版的最外层组件dynamic-form首先来看模版HTML<ng-container *ngFor="let field of config"> <ng-container dynamicField [config]="field" [group]="form" *ngIf="!field.isComponent" [model]="model"> </ng-container> <app-multi-linkage *ngI.
2021-01-15 10:50:05
360
原创 大型动态表单实例整合 angular7 2-引入与模版接口定义
接下来，整理一下动态表单的module.ts结构与其接口的模版dynamic-form.module.ts先上代码，再整理解析import { TestFormComponent } from './components/test-form/test-form.component';import { FormCheckboxComponent } from './components/form-checkbox/form-checkbox.component';import { FormDate
2021-01-15 10:49:52
192
原创 大型动态表单实例整合 angular7 1-动态指令
大型动态表单：独白：最近突然想要整理一下动态表单的相关知识，但是量太大，分散又不好理解。我想尽量做到详细且结构清晰，容易记忆，所以只能慢慢整理，最后再调整一下结构。限于本人才疏尚浅，对于动态表单的理解也并非无所不能，如果有所偏差，希望可以得到一些建议适用情况：本案例介绍尽量适配于大量无冗杂操作逻辑的表单尽量适用于表单的展示，当然也可以进行修改，但是如果仅是查看那就更加适配了。...
2021-01-15 10:49:40
360
1
原创 OSS方式、canvas方式图片压缩（宽高、质量百分比）、EXIF图片数据解析（旋转角、数据）
利用FileReader、Canvas对图片进行压缩：注意这里的压缩指的是宽高压缩还有质量的百分比压缩，而不是压缩到指定的多少k（但是观察oss的压缩我发现，当使用Q_10时，图片总是在500K以下）利用EXIF对图片进行解析，以获取图片的旋转角度、大小等各类数据1、OSS方式质量/大小压缩与解析质量压缩不改变大小：图片url后面拼接 ?x-oss-process=image/quality,Q_10因为这种方式只支持jpg、jpeg、webp所以需要判断一下我这里压缩到Q.
2020-12-29 10:59:14
1314
原创 angular7 service存储组件间的传值 取值的时候获取不到的问题
在service中放存取的方法：存储的属性：personalInfo public personalInfo: any = { applicationNum: '', status: 0, name: '' }; constructor(private http: HttpClient, private router: Router) { super(); } setPersonalInfo(value: any) { this.personalInfo
2020-11-26 18:06:24
594
原创 canvas基础学习笔记
1、绘制基础、直线 <!-- 画布：width/height同时也规定了canvas内里的元素的精度 ，也可以通过js来写canvas.width --> <canvas id="canvas" width='1024' height="768" style="border: 1px solid;margin:100px auto;"> 当前浏览器不支持Canvas,请更换浏览器再试 </canvas> <script>
2020-11-18 10:45:13
232
原创 JavaScript设计模式--状态模式（TypeScript）学习
状态模式：本文纯属自学阶段笔记：学习自各大网站状态模式 隶属于 行为模式模型：环境类（原始对象），状态类，无数子类将具体执行逻辑放于子类中，主要不变的方法放在环境类中，状态类单纯用来管理状态优点： 避免使用多重条件判断 扩展性良好缺点： 如果状态太多，会造成类太多，也会造成逻辑分散在各个类中，过于复杂用途：在 TypeScript 语言中， 状态模式通常被用于将基于 switch语句的大型状态机转换为对象。核心：让你能在一个对象的内部状态变化时改变其行为， 使其看上去就像改变了自身所
2020-11-04 16:26:07
266
原创 angular7 文件下载/导出功能 二进制流数据处理/Blob
话不多说，先上代码// 导出 exportData() { // const curDate: any = new Date(); this.visualSplineService.exportLoanDetailLst(this.businessList, 'exportDistributorBusiness') .pipe(finalize(() => this.loading = false)) .subscribe((response: any)
2020-11-02 12:12:11
1684
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人