- 博客(11)
- 收藏
- 关注
RSS订阅原创 vue仿手机桌面的元素移动换位效果
dragEnd中传入的形参e实际上和dragStart中的e都是被拖拽的dom，所以dragStart也可以不写。在这里拿到被拖拽的dom在数组中的下标dragindex，tarindex是上文中提到的全局变量，也就是被拖拽元素要被放在哪里所对应的下标，接下来就开始交换，我这里用的笨方法：定义一个第三者变量temp记录被拖拽的元素下标，把数组中这个下标所对应的数据删除，这样一来后面的数据下标自然会向前进1，然后再把temp放在目标下标的位置。这样就达到了文章开头gif图给出的结果。
2024-03-07 16:43:46
751
1
原创 函数式弹出框的封装探索
弹窗函数文件BiuCom.ts} */componentsOnClick(){})})弹窗组件BiuPage.vue<template></div></div>OnClick:{},})</script>.father{.item{top: 50%;left: 50%;</style>试验时传入的简单页面TestView.vue<template><h1>试验页面</h1>
2024-03-05 17:05:36
1301
1
原创 ts写法及ui组件封装记录之el-input
在使用形参中的name对对象属性进行操作时会出现上图的问题, 想了解出现这个问题的原因以及解决方法本次封装组建的尝试虽然有了定义类型的意识但是ts使用的实在不堪入目, 出现类型问题还是一脸懵, 道阻且长啊.
2024-03-03 17:04:22
1139
原创 element-plus el-table表格组件封装记录
昨天初步体验了一把form表单的封装,觉得还是有些浅显且有些地方没有理清,所以今天来试一试B端项目中同样常用的一个组件---el-table的二次封装,1.和el-form组件一样通过传入对象的形式对table表格进行条件渲染2.能够在实际调用场景下通过插槽来自定义标题,提交按钮等一些小东西3.能够通过v-bind绑定属性实现开关组件,编辑/删除,多选框等操作按钮的显示。
2024-03-01 21:49:19
2491
原创 element-plus el-form二次封装记录
---------------------------------------------------------分割线--------------------------------------------------------------:在父组件中的子组件标签上绑定ref值,且将其声明为ref响应式变量,此后就可以使用 变量名.value.子组件属性名 来获取子组件中的属性和方法.需要注意的是:子组件中的属性和方法必须通过defineExpose暴露父组件才能获取。
2024-03-01 11:29:45
2418
1
原创 node+vue支付宝沙箱支付流程
需要注意的是目前的支付宝沙箱页面与老的教程不同,所需公钥信息可以直接点击。以上配置需要在支付宝沙箱页面寻找,不会的可以csdn搜索支付宝沙箱。通过路由获取后调用接口向后端查询支付状态,返回后再根据支付状态进行下一步逻辑即可。7.用户完成支付跳转后端配置的页面后在url中会携带交易信息。4.在接口文件中引入上述alipay配置文件。5.后端(node)对接支付宝。6.前端拿到支付页面后进行跳转。1.服务器(node)端安装。获取而不需要下载其他密钥生成工具。
2024-02-01 16:10:07
390
1
原创 vue实现支付功能(pc端)
3.点击提交订单后选择支付方式,向后端传递订单号以及appid(公司提供)和支付方式,请求成功。会返回一个支付方式,后端返回的支付方式和用户点击相同则请求支付操作(发起支付)1.点击购买按钮发送订单金额,用户,商品id等等信息到后端.后端返回订单号等信息。4.把相关数据传递给支付宝||微信支付官方。1.支付方式(微信)(支付宝)2.拿到订单号跳转到订单页面。6.支付完成跳转的链接。一.支付可能需要哪些东西。
2024-02-01 12:25:51
809
1
原创 node模拟接口笔记
sql接受sql语句,val接受传值,返回一个promise并且执行mysql对象查询方法,查询报错则reject,查询成功则result。上图就是url为localhost:5000/query的一个接口,他的作用则是从bd文件指定的数据库中查找user表中的所有数据并且返回,由_data接收后交给前端。在index.js中引入刚刚完成的bd.js数据库文件跨域以及body处理依赖,引入后use链式挂载,如下图。获取body请求参数:npm i koa-bodyparser -s。
2024-01-11 17:17:30
493
1
原创 热手之二----技术栈的确定与配置
pinia:状态管理工具 相比于vuex更加适配于vue3+ts。vue-router:路由管理工具 项目初始化时选中。axios:请求管理工具。
2024-01-08 14:41:04
426
原创 前端学习之vue3项目初始化
一月份没找到工作,在家学习找工作时想着搓个项目热热手,顺便开始记录一下过程中遇到的问题.所谓走过留痕。4.可以把多余页面更改或删除，在熟练之前建议先保留，可以给你一些提示。1.vue-cli初始化项目指令：vue create 项目名。3.根据提示启动项目即可。
2024-01-08 14:33:06
442
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人