- 博客(79)
- 收藏
- 关注
RSS订阅原创 VUE3-如何引入百度地图api并在页面上展示
这样就绘制成了一个基本的百度地图了，中心就是你的地址，初始缩放比可以配置。1、首先需要注册百度开发者账号，并且申请百度地图api的密钥。2、拿到密钥之后，可以进行导入百度地图api。bmpgl_lib.js文件代码。
2024-08-01 08:27:03
850
原创 前端-如何通过docker打包Vue服务成镜像并在本地运行（本地可以通过http://localhost:8080/访问前端服务）
接着就可以在本地通过http://localhost:8080/访问前端服务。首先下载vue的依赖，并且打包在本地生成dist文件。另外准备一份nginx.conf文件（网上可搜）dockerfile文件：基本配置如下。然后运行docker命令。
2024-07-31 08:22:27
534
原创 Vue3-如何自己写一个“返回顶部”功能
在屏幕的右下角固定一个“返回顶部”按钮，只有当用户滚动屏幕一定程度后出现，否则隐藏。1、给窗口挂载滚动事件，监听视口的滚动，当滚动距离超出设定阈值后，出现按钮。点击按钮，网页平滑的滚动到页面顶部。环境：Vue3,js，antd。2、点击按钮，滚动窗口。
2024-07-29 11:24:35
869
原创 uni-data-select的下拉框可选项无法滑动如何解决
使用Uniapp的选择器，下拉框可选项无法滑动。这样子会让下拉框有固定高度，并且可以滑动选择。修改uni-data-select源代码。也可以单独为页面添加这个样式。
2024-07-16 14:35:11
468
原创 uni-app 扫描二维码获取信息功能
然后现在是可以扫描二维码的状态，扫描之后，可以看到首先是出发上一个页面的事件，然后返回上一页面。这样就可以扫描二维码之后，传递数据给上一页面。首先是扫描二维码的功能，可以参考这篇博文。接下来需要在扫描界面的上一页面做处理。最后设置事件中获取数据的方法。在mounted里挂载事件。需要在data里设置。
2024-07-12 08:39:27
744
1
原创 echartsBug-dataZoom拖拽无效果
之前的写法是将myChart定义在data()之中，但是无效果，改成以下代码后生效。遇到问题：想要给图表增加dataZoom,但是拉拽的时候不生效。项目情况："vue": "3.2.4",使用vue2语法开发。这个情况同样也会发生在tooltip不生效上。
2024-07-09 11:44:34
489
原创 uni-app-H5页面调用设备摄像头扫描二维码
应用场景：APK里面webView，访问用uniapp写的H5页面，需要调用设备摄像头扫描二维码。这样就可以打开扫描界面，返回你扫描得到的信息。H5页面的环境必须是HTTPS！H5页面的环境必须是HTTPS！H5页面的环境必须是HTTPS！插入好之后，新建页面用于展示扫描界面。
2024-07-05 13:32:54
1180
原创 a-date-picker 的值是dayjs格式的BUG如何解决
使用a-date-picker时，当想要选择的格式是月份的时候，他需要绑定的值默认是dayjs格式的，如果想要绑定的值是 YYYY-DD格式的，就需要增加配置。
2024-07-04 13:24:07
320
原创 前端-a-select搜选时查询的值是value而不是label如何解决
使用a-select搜选时查询的值是value而不是label，需要在代码做一些配置。在代码中“添加配置”的地方，添加自己的配置就可以了。
2024-06-27 09:14:05
442
原创 前端-echarts tooltip展示多项自定义数据
效果如图，鼠标滑动到某一个柱子的时候，出现这一项数据的多个自定义数据，外加自己的模板样式渲染。主要是在data中，value就是实际展示的主数据，其他字段名为自定义的数据。希望能展示每一列中的多个自定义数据。
2024-06-26 11:40:28
1211
原创 前端-a-table点击某一行时调用自定义函数
clickRecords就是自定义函数，定义如下。注意是return了 “点击函数”record是这一行的值。
2024-06-24 15:20:28
438
原创 前端-echarts5.0 tooltip不显示问题
在echarts官网完成绘制后，将配置复制到本地，结果tooltip无法显示。如果将myChart定义在了data（）里面，那么tooltip就会不显示。项目使用vue3,echarts5.0,代码写的是vue2。排查了半天问题，发现这部分代码不正确。需要通过let来定义，就可以显示了。
2024-06-18 14:20:34
840
原创 前端BUG记录-a-spin和a-pagination
给分页所在盒子设置margin-top: -20px之后，可以切换页面size，但是无法点击第二页进行切换，经过排查时margin-top: -20px的问题，删除后可以生效。一、使用a-spin时，把你需要绘制样式的盒子要放在里面。二、a-pagination切换到第二页无效。不然样式容易效果不正确。
2024-06-14 09:23:52
507
原创 a-date-picker报错TypeError: date4.locale is not a function
目前看来是dayjs识别不了Format字段，必须使用valueFormat。
2024-06-05 16:38:32
404
原创 vue-在子路由前加/形成绝对路由
可以匹配 `/sys/user`（并且 `Layout` 和 `System` 组件会生效）、`/app/system`，但是无法匹配 `/app/system/user`，`/app/system/sys/user`。在vue-router中，通常我们添加子路由时不会前缀加/，但是也可以加，加上之后，就可以形成类似“绝对路由”的效果。这样子的绝对路由，前面不能添加任何路由信息。在上面这个例子里，通过访问路由。方便一些情况下的访问。
2024-05-13 16:12:47
445
原创 如何在前后端一体的项目中引入element-ui，即引入index.js、index.css等文件。
然后是需要tff和woff ，这2个文件是图标文件，也是必须的，不然会出现方框BUG等情况。24年接手了一个18年的项目，想使用el-ui的组件库，得自己手动引入。这里，因为需要添加tff和css之间的联系，需要修改css文件内容。打开保存的css文件搜 @font-face 修改成如下路径。随后，在自己的文件里面添加这4个文件，我的目录如下所示。接着，就可以在html文件里使用el组件了，例如。添加完后，最后还需要在html文件里引入。通过官网可以知道，首先得准备以下文件。
2024-04-09 10:15:57
813
1
原创 前端后端-新手如何开发一个验证码需求
从逻辑顺序来讲，前端发送获取验证码请求，后端接收到之后，生成验证码图片，返回图片的信息（url,codeKey），前端拿到返回结果之后，可以通过url展示图片。接着用户输入信息之后，发送登录请求，后端拿到验证码信息（用户输入的值和codeKey）之后，和存储在redis中的数据进行对比校验，相等的情况下，通过。
2024-03-18 11:44:00
900
原创 前端BUG-导出excel提示文件出错，文件内容为[object,object]
【代码】前端BUG-导出excel提示文件出错，文件内容为[object,object]
2024-03-12 16:47:42
983
原创 Vue3-customRef的使用
坐个比喻，本来的ref，你就是你直接去车店，直接买车，都是车店做好了的，你只能选择他给你的，定死了，你没法有更细的要求自定义ref，就好比你去车店，你说你要买什么车（要绑定的初始值），以及你有什么要求（例如本文的延时要求，也就是delay参数），给出这2个条件之后，车店会根据你的要求，返回一个车子给你，也就是帮你自定义ref过后的值（msg返回值）。自定义ref，放置到hooks中，给出要绑定的初始值（"你好"），要延时的参数（delay），得到自定义ref的返回值赋值给msg。
2024-01-14 13:08:28
682
原创 Vue3-完成任意组件之间的传值
引入，调用，暴露然后是在需要传值之间的组件引入mitt，先绑定事件，用来组件之间传值，然后传值的组件触发这个事件。一般来看，接收的一方是绑定事件的，就如同父子组件之间的子传父一般，传值的一方触发接收一方的事件，从而调用回调函数来接收值。要记得解绑事件，减少内存负担改成想传的变量值的名子组件中修改接收的变量名和触发事件名$refs用于:父一>子。$parent用于:子一>父。
2024-01-13 18:09:00
1684
2
原创 element-ui 如何修改el-popconfirm的样式
找到自己想要修改的样式，再进行更具体的修改，例如下面可以看到这个弹窗的最外层的样式名为my-popconfirm，然后接着在这个名称下找到更细节的模块样式名称修改。
2024-01-12 13:57:13
1219
原创 Vue3-watchEffect实现
官网:立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。都能监听响应式数据的变化，不同的是监听数据变化的方式不同。watch 对比 watchEffect。
2024-01-12 09:47:56
581
原创 Vue3-路由知识点
优点: URL 更加美观,不带有 # ，更接近传统的网站 URL缺点:后期项目上线，需要服务端配合处理路径问题，否则刷新会有 404 错误history:createWebHistory()，//history模式}）
2024-01-11 09:35:00
922
原创 Vue3-toRefs与toRef（把一个响应式对象的属性解构拿出来并且使其成为响应式）
把一个由reactive所定义的对象，转变成一个个由ref所组成的对象把其中的每一组key-value拿出来，形成一个新的对象。
2024-01-10 08:29:54
558
原创 Vue3-watch的用法
监视 ref 定义的[基本类型]数据: 直接写数据名即可，监视的是其 value 值的改变监视 ref 定义的[对象类型]数据: 直接写数据名，监视的是对象的[地址值]若想监视对象内部的数据，要手动开启深度监视。注意若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象若修改整个ref 定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了监视reactive定义的对象类型数据，且默认开启了深度监视。
2024-01-09 15:53:02
756
原创 Vue3前端 响应式数据 知识点
定义一个响应式对象 (基本类型不要用它，要用 ref，否则报错)let 响应式对象= reactive(源对象)。一个 Proxy 的实例对象，简称:响应式对象注意点: reactive 定义的响应式数据是“深层次”的。
2024-01-09 11:20:52
871
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人