- 博客(16)
- 收藏
- 关注
RSS订阅原创 fullPage.js全屏垂直滚动插件，在Nuxt3框架中的应用
最近的一个项目（官网开发）需要用到Nuxt3框架，进行服务端渲染，这样可以有更好的SEO。插件的适配程度跟Nuxt版本存在关联，如果你使用的是最新的Nuxt3，可能网上的Nuxt2老教程就不适用。
2024-03-01 10:22:49
421
1
原创 JS禁用360浏览器键盘快捷键
最近在做Vue项目时遇到了一个问题，使用@keydown.delete事件，触发一些方法去做某某事情，在谷歌、Edge主流浏览器没有问题，但在360浏览器会出现异样的问题，页面会自动跳转到前一页，这种自带行为不是我想要的。找到@keydown.delete对应的keyCode码，是8，那么在事件触发时监听一下，在某种情况下禁用退格键。仔细检查，发现是360浏览器自带了一些快捷键，真的无语……
2023-11-22 10:17:59
132
原创 el-input中的el-input__suffix行高问题
在使用el-element开发时，使用到了el-input组件，添加了clearable属性，由于业务要求更改了样式，但问题出来了，el-input默认的高度是40px，我这里改成了32px，外表看起来没啥问题，但将光标移到el-input上面并输入一些内容，出现el-input__suffix图标，会发现它的行高有点偏下。el-input在这里的高度是32px，我希望el-input__suffix图标的行高也是32px，这样看起来就要对齐一些。可是从控制台定位不到这个元素，因为鼠标一移开，它就消失。
2023-05-26 17:14:35
1387
原创 JS 遍历对象的值：Object.values()方法的使用
如果需要将一个对象里面所有的属性的值遍历出来，可以使用Object.values()方法，遍历出来的值会以数组的形式存储。
2022-11-09 22:44:53
624
原创 JS 遍历对象的键：Object.keys()方法的使用
有些时候，我们可能需要获取某个对象里面所有的’键’（属性名），使用Object.keys()方法可以很方便的实现，并将遍历出来的’键’以数组的形式存储。
2022-11-09 22:32:30
1187
原创 JS 冻结对象：Object.freeze()方法的使用
所谓冻结对象，是指冻结指定的对象后，无法对它的属性进行任何增删改的操作，新增属性不行，修改属性值不行，删除属性也不行。如果希望某个对象是固定值，不想被修改，那么使用Object.freeze()是个不错的选择。
2022-11-09 22:07:09
463
原创 TS基础知识(一)
TS是前端领域大势所趋，每一个前端开发工程师都不应该忽略它，除非你不想迎接未来。许多新项目，如果选择VUE3或React进行开发时，大多都会带上TS。而TS是强类型语言，有了TS加持，JS应用会变得更加稳定且强大。TS是JS的超集，JS所拥有的，TS都有。JS是弱类型语言，天生存在很多缺陷。
2022-10-16 11:11:27
6206
原创 pinia的使用方法&&vuex的区别
在vue3项目中，vuex的版本为4.x，基本使用方法与vuex 3.x版本基本相似，而pinia则是vuex5的提案，同时，vue团队也推荐在vue3项目中使用pinia，未来有可能取代vuex。在pinia中，mutations已被省略，无论是异步还是同步方法，都放在actions中使用。众所周知，vue3是由TS重写，对TS的支持度更好，而pinia对类型推断也更友好。然后在src下面的store文件夹里面的index.js即可开始使用。注意：项目要用pinia则不能同时用vuex。
2022-10-04 13:20:36
801
原创 关于vue创建项目失败的原因
笔者换了台电脑，一直出现vue创建项目失败的问题，一番挣扎之后，解决了这个问题并做一个总结，加深记忆，避免以后再犯同样的错误。
2022-07-29 22:06:35
5208
原创 bootstrap的概念&使用方法
bootstrap的概念&使用方法使用CDN引入boostrap：<!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l
2022-03-11 12:23:38
675
原创 综合运用 vw + Flex + Less 实现B站移动端页面
综合运用 vw + Flex + Less 实现B站移动端页面目前市面上有两种适配方案比较流行，一是rem，二是vw（未来趋势）。vw的核心概念是将屏幕平分为100份，若屏幕宽度750px，1vw则等于7.5px。VS Code提供了vw相关的插件，意味着不用手动去计算。下面这个案例的宽高值，全部用vw单位。原插件的setting.json默认数值为750，我这里改成了375，以方便适应B站页面的制作。最终效果如图所示：在这里插入代码片主要分为四个部分，header、nav、content、o
2022-03-09 19:58:16
768
原创 Flex布局-实现网上商城-个人中心页面
Flex布局-网上商城-个人中心页面运用flex知识，可以快速实现弹性功能的页面。无论是排列方式还是横竖居中，flex都能轻松搞定，并具备弹性功能，可随屏幕变化而伸缩。下面这个网上商城-个人中心页面，综合运用了flex知识来实现，效果如图：具体代码如下：.main { display: flex; width: 1240px; margin: 0 auto;}.left { width: 232px; margin-right: 20px;}.ri
2022-03-06 18:10:45
3553
3
原创 使用Flex布局，实现移动端商品支付页面
Flex布局关键知识点1.display：flex要加在父元素上。2.justify-content设置主轴内容的对齐方式。3.flex-direction可更改主轴的方向。4.align-items设置侧轴内容的对齐方式。5.主轴的方向默认是水平方向，可以通过设置flex-direction:column为垂直方向。需要注意，如果主轴方向变了，那么justify-content属性的值就是相对于更改后的主轴方向而言的。使用Flex布局，实现移动端商品支付页面效果图如下：具体代码：先引入在
2022-03-05 20:40:30
995
原创 使用CSS动画实现 时钟转动效果
使用CSS动画实现 时钟转动效果此案例主要运用到了css动画的功能。先将外圆画好，时钟的时间轴先画正中间那一根，绝对定位到中间，然后复制时间轴类名，并依次添加旋转30度的css代码，需要注意的是，后面使用transform:rotate()会覆盖掉前面的transform:translate()属性，因此都要加上translate。然后画一个白色的遮罩层，放在外圆的正中间，以圆形挡住后面的大部分时间轴。接着开始画时、分、秒指针，依然是绝对定位到中间，但是指针的旋转点是自身中底部，因此transform属
2022-03-04 19:58:09
3771
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人