05 2024 档案
摘要：问题 前面自定义节点的样式坐标位置不对，我们希望自定义节点的坐标和rect元素的位置是一样的 效果图 代码 <template> <div class="app"> <div ref="myholder" id="paper"></div> </div> </template> <script> i
阅读全文
摘要：背景 有的时候我们本地开发的时候使用的px为单位，但是我们想要使用vw单位，这样可以在不同的屏幕下自动伸缩元素的大小进而达到自适应 解决方案 使用postcss-px-to-viewport第三方插件。 原理：它主要用于将 CSS 文件中的 px 单位转换为 vw/vh 单位，以便实现响应式布局。然
阅读全文
摘要：效果图 自定义路径设计 本示例假设当前节点和其他节点不在同一纵坐标的情况下 代码 <template> <div class="app"> <div ref="myholder" id="paper"></div> </div> </template> <script> import * as jo
阅读全文
摘要：效果图 代码 <template> <div class="app"> <div ref="myholder" id="paper"></div> </div> </template> <script> import * as joint from '@joint/core' import $ fr
阅读全文
摘要：需求 在开发H5页面的时候希望获取用户的地理位置信息，这里演示在用户上传图片的时候将用户的地理位置信息作为水印显示。 问题 在安卓手机使用vant-upload组件是没问题的，但是在IOS手机上有，报下面的提示信息。 原因 苹果的IOS做了限制，如果需要使用IOS的服务，必须是HTTS协议的域名，不
阅读全文
摘要：背景 有的时候我们表格的数据不想使用分页组件展示，想要显示所有的数据，但是显示所有数据会导致服务器负荷严重(比如CPU过载)，我们可以使用懒加载的形式，此方式利用监听是否滚动到元素底部，如果到元素底部就去请求下一页的数据 原理 效果图 示例代码 <template> <div class="app"
阅读全文
摘要：背景 有的时候我们需要在上传图片中添加一些水印标识，然后上传至服务器 效果图 代码 需求： 点击直接预览图片，而不需要使用dialog 上传图片添加水印后才预览图片 上传图片文件添加水印。使用watermarkjs库转换 将添加水印的图片转换成base64,更新预览图片的内容，否则预览的图片还是旧的
阅读全文
摘要：效果图 原理 joinjs中通过svg来绘制流程图，然后我们可以使用localToClientRect这个方法对节点（element）复制，它会在原来的element在svg位置上生成一个html元素，但是这样会造成原来的element节点监听的点击事件无法触发，我们可以使用原生来操作对这个元素（比
阅读全文
