- 博客(72)
- 收藏
- 关注
RSS订阅
原创 TypeScript 梳理
readonly gender：string //只读属性age?:number //可选属性const user: UserInterface = { //对象 user 使用 UserInterface 接口name:'张三'，gender:'男',age:18,run(n) {( a: number, b: number): number //参数a，b均为number，返回值也是numberage：18//定义了同名的接口，那这两个接口的属性合并为了一个age：18。
2025-11-05 01:01:29
921
原创 Vue3组件通信
子 => 父注意区分好：原生事件、自定义事件事件名是特定的（clickmosueenter等等）事件对象$event: 是包含事件相关信息的对象（pageXpageYtargetkeyCode自定义事件事件名是任意名称事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！//父组件<template><h3>父组件，</h3><h4>我的车：{{ car }}</h4><h4>儿子给的玩具：{{ toy }}</h4></div>// 数据。
2025-10-28 22:34:27
163
原创 Vue3的Pinia详解
Pinia 是由 Vue 官方团队开发的轻量级状态管理库，旨在为 Vue 应用提供更简洁、模块化的状态管理方案。`Store`是一个保存：''状态''、''业务逻辑'' 的实体，每个组件都可以''读取''、''写入''它。它有三个概念：`state`、`getter`、`action`，相当于组件中的： `data`、 `computed` 和 `methods`。
2025-10-28 19:40:01
386
原创 Vue3的自定义Hooks
那么有没有一种方法让一个代码文件都是一个功能牵扯到的所有的数据和方法，主页再进行调用，这样如果后续我要维护相关的功能的话，我就可以直接在这个代码页面进行维护就好了？当一个功能的所牵涉到的数据和方法过多，而且这个页面的类似功能也有很多，那这个页面的代码虽然照上述的方法做了区分，但是维护起来还是挺头疼的。在Vue3中，没有了data和methods，数据和方法不再强制的卸载对应的前者当中。首先需要在src目录下创建hooks文件，在向其中建立各种的js或ts文件，文件名可以使用use+功能名的形式。
2025-10-25 18:21:49
830
原创 Vue3和Vue2的生命周期差异
Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而会让开发者有机会在特定阶段运行自己的代码，这些特定的函数通称为：生命周期钩子。2、父 beforeMount > 子 beforeCreate > 子 created > 子 beforeMount > 子 mounted > 父 mounted。父 beforeDestroy > 子 beforeDestroy > 子 destroyed > 父 destroyed。3、当父组件的某些数据更新时。
2025-10-25 17:07:14
512
原创 vue3的props的使用
在vue中，props常用来父子组件的传值，但是Vue3与Vue2在写法上是有较大的出入。在Vue3中以define开头的工具函数一般是宏函数，在页面中基本上是不用引入的。在子组件中是可以对父组件传递的值进行限制，不能随便传也不能随便改。
2025-10-24 17:42:38
317
原创 TS的_接口_泛型_自定义类型
对数据进行限制，以至于在以后的开发中，如果数据擅自更改时，会有报错提示。在src目录创建type文件夹用于存放各种接口限制 index.ts。
2025-10-24 16:06:13
196
原创 Vue3 watch与watchEffect的监听差异
3.watchEffect 不用明确指出监视的数据（函数中用哪些属性，那就监视哪些属性）立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。1.都能监听响应式数据的变化，不同的是监听数据变化的方式不同。2.watch 要明确指出监视的数据。
2025-10-23 17:55:58
80
原创 Vue3核心API详解
若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。vue2使用的是选项式API，vue3可以是选项式API也可以是组合式API，官方推荐使用组合式API，定义的reactive的对象类型数据时，对其进行解构赋值的话，会失去其响应式。reactive定义的数组或对象是深层次的，无论层级有多少，都会是响应式的。当使用ref定义的对象型数据，进行全量覆盖赋值时，是保留了其响应特征的。比如定义好的数据，直接重新给数据赋值一个新的原对象时，会失去响应式。
2025-10-23 17:03:44
638
原创 Element表格表头合并技巧
本文介绍了Element UI表格(el-table)单元格合并的实现方法。主要内容包括：1.表头合并的实现，通过headerCellStyle方法设置colSpan和display属性隐藏部分表头；2.表体单元格合并，使用span-method方法和spanArr数组计算需要合并的单元格；3.特定单元格合并，通过rowIndex和columnIndex定位目标单元格；4.常见问题解决，如表头与表格不对齐的三种解决方案。文章提供了详细的代码示例，包括表头合并为"基本信息"、同名列合并等功
2025-06-22 19:56:09
1221
原创 vue封装组件进阶
首先，我们需要解决一个问题就是效果图上的诸如产品名称、生产地、提交时间等固定的文字能否也是动态的，根据我们传入的数据来一一展示呢？初次封装可能就会把共同使用的html及css代码剪切到一个子组件中，通过父组件给子组件的传值来达到渲染的效果；创作代码时，经常会遇到需求出现相似的界面效果，但是里面循环的列表参数不一致，重新写的话会导致代码冗余。注释：上方代码中循环对象，第一个参数为对象的键值，第二的参数为对象的键，根据循环对象的键来获取循环数组对象的规定值。这样写不就是相当于把冗余的代码剪切到另外的文件吗！
2025-02-08 14:43:31
488
原创 vue3复制文本到粘贴板时携带文本的简单样式
项目中有复制文本的需求，以开始是使用navigator.clipboard方法，但是它只是把要复制的文本整合成字符串的形式，没有任何换行空格的形式，显然对于洋洋洒洒几百字的文本，复制阅读起来相当麻烦。那就想到用插件依赖来解决问题。正常npm下载以来后，
2024-11-12 11:39:47
320
原创 PC端查看历史消息，鼠标向上滚动加载数据时页面停留在上次查看的位置
数据更新时后，要获取数据更新前，位于滚动条最顶端的元素距离父元素里偏移距离，当然父元素要设置相对定位，这样才能获取目标元素的的偏移量offsetTop，也就是父元素滚动条要滚动的距离。这里设置的是第十个元素的偏移量，这里可以设置为接口返回的数据的长度。目前问题是解决了，但是是以vue2的基础上解决的，但是vue3也是可以完全使用的。
2024-11-03 16:29:07
491
1
原创 vue2控制打印机打印(三)
需要注意的是定义的LODOP是局部变量，而不是挂在到data里。本人之前也是挂载到data里，结果老是报错，说事件找不到，真是丈二和尚呀！该插件不需要npm install下载任何依赖，但是需要购买这个软件，并把项目部署到购买软件时填写的域名下，不然打印页的左右下角会有"第一个打包文件里有个LodopFuncs.js文件，这个需要放入到项目里面引入的。本人放在了utils文件里。首先到lodop官网下载相关的js文件和技术文档。如果打印时需要预览时需要再加上。打印控件Lodop进行操作的。
2023-12-22 15:52:51
1063
原创 原生配置语音播报
查了查，看到网上有一种新奇的方法，就是利用audio标签来设计一种伪语音，也就是监听audio播报结束时更换audio的播放地址，如此循环来拼接成一段语音播报功能，瑕疵就是两段语音衔接得不太好，有明显的停顿，但是安卓是完全能用的，就是audio的MP3文件需要自己在MP3生成器中先生成好。首先编写代码时使用的是windows自带的语音播报JS，它可以将一串动态字符串进行播报，但是有个缺陷就是声音略无感情，只有女声，可以调节语调来更换播报的人声。这个可以动态设置需要播报的语音，基本上可以满足项目的需要。
2023-12-04 16:43:12
286
原创 vue3的一些注意事项
script首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的script现在支持三种写法，正如你看到的那样，无论是代码行数，还是代码的精简度，的方式是最简单的形式。这种写法，让 Vue3 成了我最喜欢的前端框架。因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。
2023-10-07 11:56:59
366
原创 滚动条样式更改
:-webkit-scrollbar-track-piece 内层滚动槽。::-webkit-scrollbar-button 滚动条两端的按钮。::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的。::-webkit-scrollbar-thumb 滚动的滑块。::-webkit-scrollbar-track 外层轨道。::-webkit-scrollbar-corner 边角。::-webkit-resizer 定义右下角拖动块的样式。
2023-08-14 09:50:09
633
原创 使用高德地图获取浏览器的定位
打开浏览器时，获取浏览器的定位。再谷歌浏览器中测试，常常出现请求时间超时的情况，在IE浏览器就能完美运行，不知道有没有好的替代方案。
2023-06-28 10:37:28
503
原创 vue使用自定义动画，写个倒计时动画
当需要有个提示框，倒计时几秒后自动跳转页面，单纯的写个setinterval，从几秒减到0再跳转，虽然能满足需求，但是效果不太好。找事的老板就提出优化一下，此时内心万马奔腾。想到用animation自定义动画，写个倒计时，就是数字从小变大，再慢慢消失，再到下一位数字从小变大，如此循环。
2023-06-28 10:19:26
556
原创 更改高德地图自定义数据范围
这个问题，我想到在高德地图绘制一个透明的圆来作为用户查看数据的范围，在圆内显示部分数据，当用户点击圆范围之外的地图的话，以点击的位置的坐标作为圆范围的中心，以达到修改显示范围的目的，如此，每次高度地图只渲染部分数据，加快了页面的加载速度，还解决了图标过多，显得页面过于凌乱。在项目中遇到用高德地图中绘制海量图标，但是如果数据量太多的话，一次性绘制大量的图标marker，导致页面加载速度很慢。
2023-06-27 18:17:55
808
原创 关于swiper轮播插件的问题
每当滚动到最后一条数据的时候，就停止了，到官网上也没找出来什么问题，该有的设置都有，死活不头尾衔接滚动，没办法，到百度问问，还真的找到了问题所在。由于我用的是jquery，在请求数据后，将数据循环放入html模板字符串，再把字符串放入body里， 初始化swiper， 再添加到swiper本体里面，这样就能出来首位衔接轮播的效果，之前就是没有按照这个流程来的。这个swiper是复制要循环轮播的第一条数据放在队尾，以达到首位衔接，也就是说一定要把数据和html放到body里，可以显示，再初始化swiper！
2023-05-11 09:45:54
218
原创 关于在小程序里跳转关联的公众号
目标二则是解决小程序承接公众号的内容，首先在项目中新建问webView文件及webView为名的四个文件，在H5页面添加url标签用以跳转到公众号页面，至于跳转的链接最好不要用路由传参的形式，毕竟传参大小限制，可以用本地离线缓存解决。这样就完美实现了需求。小程序自带的标签虽然能够检测用户是否关注公众号以显示不同的按钮内容，但是这个功能有很大限制，必须是在特殊的场景进入才能使用标签，比如通过扫描小程序二维码进入小程序；
2023-03-06 15:59:29
1030
原创 JS的小结
4、箭头函数中 this 的指向不同：在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个。arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。3、箭头函数不能用于构造函数：普通函数可以用于构造函数，以此创建对象实例。2、 箭头函数全都是匿名函数：普通函数可以有匿名函数，也可以有具名函数。1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2022-10-24 18:11:17
133
原创 animatioan自定义动画
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称、规定动画的时长。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。创建动画，把它绑定到一个选择器，否则动画不会有任何效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。0% 是动画的开始，100% 是动画的完成。......
2022-08-26 16:18:04
292
原创 transform2D变换
transition-timing-function 指定过渡效果（ease溶解效果；ease-out淡出；ease-in淡入；ease-in-out淡入淡出效果）transition-property 指定过渡的属性 all表示全部。transition-duration 指定过渡时间。transition-delay 指定过渡延迟。transition：all 过渡时间 过渡延迟。取值范围0~1，超出则放大。正值向左上方平移，负值向右下方平移。拉伸旋转，不会超出高度。...
2022-08-17 23:29:13
281
原创 CSS3样式小计
rem是CSS3新增的一个相对字体长度单位，只想对于根元素，即HTML元素字体大小。em是相对字体长度单位，如果用于font-size属性本身，则是相对于父元素的font-size。em的值不是固定的；任意浏览器的默认字体大小都是16px，所有未经调整的浏览器都符1em=16px。em是继承父元素的字体大小，可是当父元素字体大小改变时，其本身的大小则是另一个值。在CSS的body选择器中声明font-size=62.5%，再将你需要的原来的px数值除以10，然后换上em作为单位，这是其简便的做法。...
2022-08-16 19:16:20
146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人