- 博客(24)
- 收藏
- 关注
原创 uni-app中 pinia的使用
使用actions中的方法 在 pinia中 没有mutations,只有 actions,不管是同步还是异步的代码,都可以在actions中完成。使用storeToRefs解构出来的数据是响应式的。然后分别书写其他两个文件和上面的index文件一致。在index中引入我们定义好的两个模块。获取store中的数据。
2024-01-04 12:18:20
4691
原创 自用VSCode插件记录
1、汉化2、自动补全html tag3、代码截图4、为HTML和CSS文件提供高亮,自动完成,错误检查和格式化等功能5、图片预览6、缩进颜色7、ES6语法支持8、代码美化9、ts语法支持10、vue3语法支持11、uniapp语法支持12、git提交记录13、svn配置及记录14、前后tag一起变化
2024-01-04 12:15:11
452
原创 uni-app预览PDF
本文介绍了在项目中实现PDF预览功能的方法:1.下载GitHub上的pdf依赖包并按指定目录存放;2.通过axios或uni.request获取PDF文件流(需配置responseType为"arraybuffer");3.将arraybuffer数据转换为blob链接,并编码拼接为可访问的URL;4.最后通过web-view或iframe组件展示PDF文件。文中特别提到移动端需先获取arraybuffer再转换,以及弹窗展示时iframe的替代方案。该方案解决了文件流转换和不同端展示的
2023-09-09 18:21:30
2250
1
原创 uni-app 实现定点签到功能
摘要:本文介绍了微信小程序地图组件的使用,包括基础配置、圆形区域标识和标记点设置。通过circles属性配置圆形区域,定义经纬度、半径和颜色等参数;使用markers添加标记点和气泡提示。同时讲解了获取用户定位的方法,包括背景定位API和uni.getLocation的使用注意事项。最后说明如何通过计算两点间距离与圆形区域半径比较,实现打卡签到功能的地理围栏判断,核心是运用了球面距离计算公式将经纬度转换为实际距离。
2022-10-29 17:28:38
6329
7
原创 vue3 + ts 封装v-model模态框
<template> <div class="container"> <transition name="modal-fade"> <div class="modal-container" v-show="visible" :style="{ width: width }"> <!-- 头部标题 --> <div class="modal-header"> &.
2022-05-28 09:24:45
899
原创 vue2 封装modal模态框
<template> <div class="container"> <transition name="modal-fade"> <div class="modal-container" v-show="visible" :style="{ width: width }"> <!-- 头部标题 --> <div class="modal-header"> &.
2022-05-26 09:04:24
1083
原创 vue3中简单的使用百度地图
1、申请百度开发者账号百度地图开放平台 | 百度地图API SDK | 地图开发百度地图API是一套为开发者提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API,一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力,另一方面彻底解决所有LBS开发者基于位置数据的高并发检
2022-05-19 11:23:21
8898
2
原创 vue3使用添加在vue原型上的方法
1.、在main.js中导入我们需要的依赖import moment from 'moment'2、在原型上添加事件app.config.globalProperties.$moment = moment3、在我们需要使用的组件中引入getCurrentInstanceimport { getCurrentInstance } from 'vue'4、在setup中获取proxy对象const { proxy } = getCurrentInstance() as any
2022-05-19 11:09:33
3501
1
原创 uni-app中富文本(rich-text)样式添加
通过正则给需要渲染的数据添加类名.replace(/\<img/gi, '<img class="content-img"')然后通过类名添加样式但是不要添加scoped<style lang="less">.content-img { width: 100%;}</style>
2022-04-24 10:34:35
2639
原创 使用uni-app实现A-Z index (字母索引导航)
本文介绍了使用uni-app的scroll-view组件实现通讯录字母索引导航功能。通过设置scroll-into-view属性绑定toView变量,当点击右侧导航栏字母时,将对应字母id赋值给toView,即可实现平滑滚动到指定区域。关键步骤包括:1)准备带id的通讯录数据;2)为scroll-view设置固定高度和滚动参数;3)通过点击事件动态改变toView值实现跳转。该方法简单高效,适用于需要字母快速定位的场景。
2022-04-18 14:23:09
3900
8
原创 vue封装一个modal组件
<template> <div class="container"> <transition name="modal-fade"> <div class="modal-container" v-show="visible"> <!-- 头部标题 --> <div class="modal-header"> <div class="modal-title".
2022-04-01 16:49:54
1270
原创 如何在vue3中生成二维码
https://github.com/scopewu/qrcode.vue/blob/main/README-zh_cn.mdhttps://github.com/scopewu/qrcode.vue/blob/main/README-zh_cn.md这是我们所依赖的库1.添加qrcode.vue到我们的项目npm install --save qrcode.vueyarn add qrcode.vue2.在需要使用的组件中使用<t...
2022-03-24 10:50:37
8043
11
原创 使用一条带箭头的虚线连接两个div,并且div拖拽时保持虚线连接
本文介绍了使用SVG实现div之间带箭头虚线连接的方法。首先讲解了SVG path命令(M,L,H,V,C)绘制直线和曲线,通过stroke-dasharray属性创建虚线效果。然后详细说明了marker属性实现箭头的配置方法,包括markerWidth/Height、refX/refY等参数。接着介绍了鼠标坐标(clientX/Y,screenX/Y,offsetX/Y)的差异,以及实现div拖动的步骤。最后展示了如何动态更新path路径,使连接线始终保持在两个div的中心位置,并根据div相对位置自动调
2022-03-12 13:12:26
4551
3
原创 electron的安装
1.我使用有两种方式进行安装a.使用vue-cli(1) 通过vue-cli创建vue项目(2) 使用npm run build 进行打包 (提前在config中配置打包的路径 如果是vue-vli3 以上的用户需要自行创建vue.config.js文件)module.exports = { publicPath: "./", // 公共路径(必须有的) outputDir: "dist", // 输出文件目录 assetsDir...
2022-03-08 10:04:35
272
原创 split
一、什么是splitstr.(separator,limit)separator :每次拆分所响应的字符串limit:限定每次分割返回的数量二、split的应用我们可以将一个字符串分割并且存放于一个新的数组
2022-02-25 21:34:49
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人