- 博客(10)
- 收藏
- 关注
原创 ElTable&ElPagination二次封装
在ui库中表格没有附带的分页器,我们在实际业务中需要使用两个组件来完成布局,以及交互操作。为了简化每次使用表格加分页器的成本,将表格和分页器结合二次封装拿来即用期望给组件传入:列配置,操作列配置,请求方法、筛选条件完成组件的功能;当然还有分页页数,自定义渲染单元格等配置。。。由于表格封装是由筛选条件的选项去触发请求,将请求方法设于组件内以便于分页器的事件内部调用,条件触发则通过ref调用方法二、使用columnscolumns 同 el-table-column-属性一致添加了和用来渲染自定单元格
2024-12-16 14:17:29
758
原创 echarts多个地图之间飞线
遇到这么一个场景,一个容器内需要由两个地图一个全国,一个具体省/市的地图具体效果如下图就希望全国的地图飞线到单独省市的地图内很直观的看出哪些地区和该省有关系。
2024-12-12 16:28:12
646
原创 echarts点击事件那点事
在柱状图、折线图、堆叠图、象形图等等,有xy轴的图表中设置点击事件去做一些交互操作时,通常都是由刻度的标题去区分点击内容在实际添加事件中,都需要具体点击到折线图、柱状图…的图形才可触发事件,在一些差值较大的情况下很小的值图形甚至与都不展示或点击不到,还可以通过添加label的形式点击label也可触发,但也局限简单单一的图表期望的时点击就去触发点击事件完成一些交互这里就通过echarts实例,设置转换像素坐标值到逻辑坐标系上的点。
2024-12-12 15:22:26
570
原创 富文本编辑器@opentiny/fluent-editor自定义样式
需求要一个富文本编辑器,对录音转的文本进行编辑使用@opentiny/fluent-editor库作为编辑器,样式则不同于自带要还原ui这里使用dom.click()形式去触发原有事件做到自己的结构样式,有着同样的功能下载并在编辑组件内引入一,添加dom容器实例fluent-editor准备props组件属性,展示默认内容,用来禁用输入和隐藏顶部操作栏(是否预览) 变量操作栏配置项 更多点击查看文档二、自定义操作栏样式思路文档没有找到什么可以动态的设置字体大小、字体加粗斜体、等等方法;审
2024-11-29 11:31:05
1194
原创 vue3一个echarts编辑器和预览的demo
使用作为代码编辑器,echarts预览采用iframe引入一个页面形式/独立的一个容器内不影响外部的操作。
2024-09-29 14:59:56
1064
原创 echarts饼图下钻-导航指定层级
-echarts实现一个饼图下钻的图表,带一个层级导航点击层级到指定的内容使用到这些工具/框架库jvideo实际用呢,用来跳转页面的,后面介绍跳过跳转页面;有兴趣可查看demo仓库 gitee; 用到了vite插件将文件作为页面3.挂载ant-design-vue用编辑器打开该项目 在中加入以下代码二、页面的布局二、布局所需的变量,事件层级导航通过变量渲染层级导航点击事件,通过下标 截取记录变量以更新记录首先获取最后一个记录,用来判断当前点击和最后一项是否相等如果是则不再截取判断是否为
2024-09-27 09:48:47
1577
原创 react一个收起周/展开月日历
一个可以鼠标按下上下拖动,抬起收起/展开显示的日历;在拖动途中当前周一直可展示利用css粘性定位实现;可通过div定位关系设置sticky模拟topheight的调整观察这里不展开介绍;通过给选中行设置粘性定位,调整该元素所在的父元素定位top还用到了css中的var()--*(自定义属性、变量),具体实现就是通过调整css变量实现拖拽交互;现已上传npm可下载尝试:https://www.npmjs.com/package/sa-calendar-react用来处理用于时间相关数组的方法,包含。
2024-09-26 18:37:09
830
原创 vue3组件作为antv-x6节点
一个用于物流行业的一个功能;需求需要一个画布可以拖拽节点(条形码,文字等等信息)组成一个信息图(类似快递上的物流信息),;每个节点(条形码,文字等等)可以拖拽编辑,这里使用vue作为antv-x6的节点来实现交互和导出图片可以对节点拖拽,有容器节点;选中节点可以在右侧对节点一些属性修改,这些是和节点组件可通信的;这里只是示例,可通过自定义的扩展节点组件和右侧表单字段扩展。
2024-09-26 18:31:28
1607
3
原创 echarts时间轴;计划时间实际时间
最近遇到一个图表需要展示的和常用echarts的大佬知道这是一个xy轴刻度对应两条柱子的图;但是由于多个任务(刻度)开始的时间不一致可能不在0开始(多任务柱子开始位置)
2023-06-12 16:13:11
1950
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人