- 博客(19)
- 收藏
- 关注
RSS订阅原创 ref、reactive、toRefs、toRef、unref的用法
1.ref 用来定义双向响应式数据（一般用来定义原始数据类型）,数据发生变化页面上会同时响应。没有使用toRefs时，直接解构出current，数据发生变化时，页面没有更新。解构时将对象使用toRefs包裹，数据是响应式的，数据变化，页面也会发生变化。2.reactive 用于初始化响应式数据（一般用于引用数据类型）3.通过toRefs遍历引用数据类型，将对象的属性改为响应式数据。对比不适用ref的情况：数据发生变化，但页面未变。
2024-09-04 10:46:37
238
原创 使用＜component＞标签优雅的处理动态组件，实现条件渲染不同组件的效果
这里我将自定义组件单独在一个ts文件引入，并将componentMap设置为Map结构，通过变量flowNode的值使用get方法去匹配componentMap中对应的自定义组件，属性绑定之后即可生效，方便后期维护。记得引入componentMap。
2024-09-02 16:43:01
243
原创 前端在上传文件时，修改文件名称
在一些特定的使用场景中，可能会需要前端在上传文件时修改文件的名称之后再传给后端，而文件名在创建对象时确定，并且不可更改。若需“修改”文件名，实际上是需要创建一个新的。可以看到，上传的文件名已经修改，只需要把修改后的file对象传给后端就可以了。对象，指向新的文件名，或者对文件系统进行操作以重命名文件。2.上传文件组件绑定change事件，在方法中修改文件名称。
2024-08-30 17:31:51
254
原创 通过window.navigator.userAgent判断当前访问系统的用户是移动端还是pc端
1.公共判断当前访问系统的用户是移动端还是pc端方法。
2024-08-29 11:59:14
150
原创 arco-design表格二次封装，支持表头配置和表格导出，并增加插槽支持扩展
【代码】arco-design表格二次封装，支持表头配置和表格导出，并增加插槽支持扩展。
2024-08-26 11:31:36
292
原创 前端通过proxy代理解决跨域问题
原理：客户端请求服务端的数据存在跨域问题，而服务器和服务器之间可以相互请求数据，没有跨域的概念（前提是服务器没有设置禁止跨域的权限问题），也就是说，可以配置一个代理的服务器请求另一个服务器中的数据，然后把请求出来的数据返回到代理服务器中，代理服务器再返回数据给我们的客户端，如此即可实现跨域访问数据。1.配置baseURL（即下面代码段中的 VITE_API_BASE_URL = /api，作用是我们每次发送的请求都会带一个/api/的前缀。2.配置代理（vite.config.ts文件）
2024-08-23 16:48:21
127
原创 antv/x6使用vue组件渲染节点
需要注意的是，x6 的版本要和 x6-vue-shape 的版本匹配，也就是两个包需要用同一个大版本。1.antv x6 提供了一个独立的包。2.注册vue节点，并创建流程图数据。来使用 Vue 组件渲染节点。
2024-08-22 10:33:20
491
原创 form表单提交文件（调接口传文件类型数据）
2.当用户选择文件后，使用组件的change时间获取文件信息，并将其中的文件对象存在form表单的对应的数据中。3.提交时一并传给后端，注意：后端接受数据格式为form-data，要转一下。1.首先form表单中添加选择文件组件。
2024-08-20 15:07:31
263
原创 使用render函数通过createVNode创建虚拟dom
说明：我这里使用的是arco-design组件库，不同组件库属性名可能不一样，自行修改即可，例如这里的dataIndex在element中应该是prop。以表格为例：在开发中可能需要对某一列进行特殊处理，可以使用render函数通过createVNode创建虚拟dom。直接看表格column配置，
2024-08-08 15:39:48
285
原创 通过createVNode创建dom并传自定义组件和自定义方法
其中getColumns是表头的配置，因为要传入操作的方法，所以是函数形式，传入的方法columnActions是一个对象。1.应用场景：表格自定义列和操作列。
2024-08-08 15:29:34
184
原创 使用Animate.css插件快速实现css动画，超简单教程
（1）首先去官网选择喜欢的动画并复制，此时复制的是动画类名。2.安装Animate.css插件。3.在main.js文件中引入插件。
2024-08-07 15:34:36
356
原创 vue3+vite项目通过unplugin-auto-import插件实现自动引入
重启项目后会发现会自动生成一个叫做auto-imports.d.ts的文件。未使用时需要手动引入ref、reactive等。2.修改vite.config.js配置。
2024-08-01 10:48:07
332
原创 sortablejs实现可拖拽排序表格
sortablejs是功能强大的JavaScript 拖拽库。2.以拖拽表格为例，先在模板中写一个表格。1.安装sortablejs。
2024-07-31 22:02:18
146
原创 echarts雷达图每个维度比例不一致问题
首先，使用echarts绘制雷达图时，在options里面会有一个radar属性，该属性的indicator属性为雷达图的每一个轴上的信息，包括name,max,min,分别设置每个轴上的min和max都一样就可以实现等比例了，注意：如果数据中有负值，只设置max会出现图形胡乱，因为默认min为0。我这里雷达图的数据是根据下拉框请求得到，在获取数据之前并不知道max和min的值，所以要在请求里面计算。这里为了图形相对美观，最大值取了数据最大值的120%，最小值也是。
2023-11-14 14:22:32
1405
原创 Echarts折线图x轴增加时间滚动条
filterMode: 'filter', //间滚动条的过滤模式,'filter'表示滑动时间条时会直接过滤掉不在时间范围内的数据，'weakFilter'表示滑动时间条时会逐渐过滤掉不在时间范围内的数据。type: 'slider', //type的作用是指定数据缩放的类型，slider表示使用滑动条进行缩放，inside表示使用鼠标滚轮进行缩放。xAxisIndex: 0, //作用在x轴的下标（因为x轴可以有多个）start: 0, //默认开始位置（百分比）
2023-04-13 16:42:15
2891
1
原创 树形控件加入筛选功能（弹窗中实现）
filter-node-method :树节点是可以被过滤的,其值为过滤函数，对树节点进行筛选时执行， 返回false则表示这个节点会被隐藏。node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的，设置目前勾选的节点或者特殊场景需要使用。.getCheckedNodes(true, false) 可以获取选中的子节点。empty-text 内容为空的时候展示的文本，可以设置为加载中或者数据为空。show-checkbox：节点是否可被选择，默认值false。设置默认展开和默认选中的节点。
2023-03-17 14:56:41
1189
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人