![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 62
前端样式设计
Zww0891
X
展开
-
使用redis缓存文章浏览量
首先初始化所有浏览量访问文章后增加的浏览量**不直接修改数据库**,好像也就是一个集中处理罢了。原创 2024-08-02 16:55:56 · 908 阅读 · 0 评论 -
vue实现简易的全局加载动画效果
v-show绑定loading,该数据可以放vuex还是任一的公共状态管理变量区域。然后App应用这个组件,Z index拉最大,防止用户在加载动画时乱点,封装一个组件,放Img,伪类样式,固定在屏幕fixed。//组件交互相关的代码(数据、方法等等)原创 2024-07-29 20:07:29 · 586 阅读 · 5 评论 -
vue里给img的src绑定数据失效
在v-for遍历数据时想要通过给img的src单向绑定 图片路径时出现问题。上网查说是webpack构建时识别不到,直接不单绑数据,写死试试看。直接require导入图像文件模块。原创 2024-07-29 19:55:09 · 593 阅读 · 0 评论 -
vue实现滚动条下滑时隐藏导航栏,上滑时显示导航栏
监听滚动事件,记录上次的滚动距离,与最新滚动距离做对比,如果为正,说明滚动距离距顶值scrollTop变大,用户正在向下滚动页面,此时隐藏,反之则反,隐藏就是top值给他负导航栏的高度距离就隐藏了。原创 2024-07-28 23:45:50 · 301 阅读 · 0 评论 -
css实现RGB渐变色动画
自己可以设置时间长一点。原创 2024-07-28 18:53:40 · 218 阅读 · 0 评论 -
vue路由跳转时改变路由参数组件不渲染问题【已解决】
router路由为了组件复用,防止组件的频繁销毁与创建,在遇到跳转的路由不一致才会进行重新渲染,路径参数变了他是不会管的,只会改变this.$route对象而已。我们可以写一个watch监视this.$route对象。一旦发生变化,则发请求重新渲染。就这个东西/:xxx。原创 2024-07-27 22:32:37 · 458 阅读 · 0 评论 -
vue2在v-for时出现循环渲染问题You may have an infinite update loop in a component render function.
使用了v-for循环,且v-for循环渲染出来的组件修改了数据,从而又驱动了响应式渲染,然后继续渲染v-for循环,然后v-for循环出来的数据里又修改了数据,从而达到死循环。那就是说,v-for里的变量在渲染结束前不能被修改,否则渲染到一半变量突然一变,新旧DOM一笔对,又得重新重新,然后死循环。究其原因是在v-for渲染结束前修改了变量,导致重新渲染,然后又修改变量…修改为独立的变量即可。原创 2024-07-26 09:36:33 · 373 阅读 · 0 评论 -
vue2文章添加多个标签思路代码及效果展示
效果展示思路data数据结构第一个数组,用来存放标签库,供创建文章时选择第二个数组,用来存放从标签库选中后的标签, 且选中后需在可选的标签库里删除,否则出现同一个标签被多次添加js代码点击输入框,可展示所有标签/也可不展示,取决于组件身上属性(激活时展示or不展示)点击想要的标签,标签库移除,添加到选中数组内移除标签,标签库添加回去(后续还想选),然后从选中数组内移除是不是听的云里雾里?这里放一段gif演示确定的时候就把选中标签数组提交到后台这没什么好说的,数组转字符串扔过去即可原创 2024-07-25 17:03:20 · 676 阅读 · 0 评论 -
网站底部的水波纹效果,结尾附带源代码
同样的图片,当作背景,设置关键帧一直往右运动即可,延迟时间透明度和 bottom,速度也就是animation总持续时长微调可达到波纹效果。原创 2024-07-23 18:13:11 · 273 阅读 · 0 评论 -
vue2集成markdown编辑器及前台渲染
使用set集合的不重复特性,获取所有h标签,后续根据标签名,确定缩进值大小,h1-> 缩进级别为1,根据级别*padding-left的固定值实现分层。结尾设置监听器,等待文章目录的a标签映射上去之后监听,点击后调用高亮方法.将自身作用参数传递过去,增加类样式。操作文章的组件里挂载时判断是编辑还是新增,编辑则获取vuex数据到form表单对象。如果是发布新增,路径参数为0,如果是修改,参数为文章id,以此区分编辑还是发布。监听滚动视窗原理 在以往的文章有提及,可自行查找,这里不过多赘述了。原创 2024-07-21 18:08:30 · 503 阅读 · 0 评论 -
博客都在使用的主题切换使用vue2实现思路
mutation使用commitaction使用dispatch。原创 2024-07-16 01:25:52 · 450 阅读 · 0 评论 -
vue里完成一个简单的评论功能,博客必备
效果展示步骤1-表单收集输入信息<div class="commentorInfo"> <div style="position: relative"> <i class="fa fa-user" style="position:absolute;top: 50%;transform: translateY(-50%)transl原创 2024-07-15 15:03:26 · 737 阅读 · 0 评论 -
vue实现动态文章目录高亮效果,提供全代码及详细讲解
好比电梯门,每次都会进来新的人,只有最后一次进来的人之后,电梯门才会关上,否则每一个人进来了, 都会重置关门倒计时,也就是防止了持续的scroll事件而不持续的触发回调,也就是说不持续的关门开门关门开门。原创 2024-07-13 00:19:52 · 642 阅读 · 0 评论 -
vue里实现点击按钮回到页面顶部功能,博客必备!
回调判断滚动高度是否大于视口高度的1/2如果是,则设置动态样式的opacity为1,不是则隐藏为0。点击按钮触发置顶,scrollTo(0,0)滚动到 x y都为0的位置,也就是左上角。动态绑定样式style,监听点击事件,后续控制opacity透明度。实例及组件挂载后监听。原创 2024-07-11 17:32:07 · 180 阅读 · 0 评论 -
wangEdtior富文本编辑器 结合element使用,博客必备,通俗易懂
template>">props: {content: {required: false, // 是否必填},data() {return {html: '',},},},editor.destroy() // 组件销毁时,及时销毁编辑器console.log('wangEditor销毁了')},methods: {原创 2024-07-11 12:30:25 · 404 阅读 · 0 评论 -
css简单易懂的加载动画,看不会算我输好吧
先准备结构,并且放置12个div,每一个div旋转30*n度, 做一个圆圈。原创 2024-07-11 10:18:43 · 297 阅读 · 0 评论 -
npm安装完yarn还是用不了?
找到你的包全局安装目录复制路径,配置到Path全局环境变量。原创 2024-07-07 19:47:13 · 269 阅读 · 0 评论 -
css导航栏遮挡住垂直滚动条,以及100vw引起的横向滚动条出现
一开始想要body的宽度为整个视口的宽度 100vw view width不过出现了横向滚动条于是乎想着给所有元素增加 x轴溢出时隐藏问题解决,不过顶部的导航栏由于设置了fixed又把右边导航栏挡住了可能因为body占100视口宽度vw,而滚动条属于多余部分给他隐藏了可以将该隐藏设置在body处看样子虽然问题得到解决了,不过还是有点问题,由于设置了100vw视口宽度,这个宽度是不把滚动条算进去的 也就是说滚动条把body挡住了一部分,这也。原创 2024-07-07 11:10:01 · 266 阅读 · 0 评论 -
vue2响应式原理+模拟实现v-model
劫持数据,说的挺好听的,就是加工数据嘛,多了set变化触发了模板重新渲染,该渲染方式使用观察者模式,获取观察者收集的各个dom的所有属性 div,观察的属性,div的属性textContent,同时根据最新值渲染模板。data数据劫持,给data的每个属性增加get和set函数,当值改变时触发观察者的update方法,更新所有与当前属性值相关的dom元素。给每个dom节点增加观察者实例,由观察者群组管理,内部每一个键值含有多个对不同dom的观察者。配置对象传入vue实例。原创 2024-07-06 15:43:19 · 789 阅读 · 0 评论 -
Javascript正则表达式
简写上述的类型。原创 2024-07-06 11:25:18 · 343 阅读 · 0 评论 -
node版本控制工具nvm,让你不用再重装node来更新版本。
由于项目的nodejs版本不一致,导致需要卸载安装换版本,十分麻烦,使用nvm node版本控制器来快速切换node版本。项目目录下插件.nvmrc 指定版本,交给别人维护时使用nvm use自动切换node版本。在nvm安装目录下的setting.txt粘贴 以下地址。github下载nvm-setup.zip。先把你原来的node安装目录删掉。*号表示当前使用的版本。原创 2024-07-04 07:52:10 · 297 阅读 · 0 评论 -
axios的底层实现及手动封装ajax居然这么简单?
关键词promise对象处理异步操作xhr发送请求promise异步操作触发成功/失败回调函数更新状态为成功fulfilled还是rejected根据状态触发then还是catch。通俗点举个例子就是 买了彩票,然后去菜市场买菜,其过程不会被阻塞,也就是不用一直在彩票店等到开奖才做其他事情,留下电话号码,也就是设置回调then还是catch,当中奖了(resolve)触发then回调, 没中奖(reject)触发catch。原创 2024-07-02 19:57:36 · 166 阅读 · 0 评论 -
css美化滚动条样式
scrollbar设置宽度,高度不设,自适应页面内容即可。thumb滑块设置颜色, 伪类选择器hover 悬浮样式。track背景色fff白色。原创 2024-07-01 12:23:56 · 380 阅读 · 0 评论 -
点击按钮页面滚动到指定区域,且不遮挡导航条的实现
实现点击按钮跳转到 当前页面的某个位置。原创 2024-07-01 10:42:12 · 185 阅读 · 0 评论 -
博客都在使用的打字机效果,居然这么简单?
文本超出标签换行的属性设置为 white-space: nowrap;出场grow关键帧中间顶峰时保持不变,40,60% 为300px最大值,设置边框作为光标,增加动画 有颜色到透明 持续时间500ms制造闪烁效果。宽度0时溢出的部分设置 overflow: hidden;steps 为帧数, 越小越卡,越像光标闪烁。设置grow的delay属性为其增加停顿感。从宽度0到300px来显示标签内容,原创 2024-06-30 21:17:28 · 519 阅读 · 0 评论 -
大多数博客首页都在使用的文字打字机出现效果
关键帧名字 总耗时(文字数量/2) steps(一共做了多少步也就是总帧数,帧数就是一秒几张图片,越大越丝滑,越小越卡,由于这里的光标闪烁属于那种卡卡的闪的很慢的我们给小一点,文字的总帧数尽量和文字数量一致,例如5个字,steps就为5也就是一帧一个字的变化)因此需要给外面的盒子加相对定位,否则就会以body的左顶点作为初始点,就会跑到左上角去了,且该元素的width 100%将会是整个body的100%子绝父相, 绝对定位的初始位置x,y是以父盒子的左顶点x,y开始的。原创 2024-06-30 20:51:24 · 494 阅读 · 0 评论 -
如何制作鼠标悬浮后伸缩的搜索框
(从父盒子的Y起始点和结束点平均增加上下间距,也就是把文字往中间挤压,使得最后input输入框的整体高度和父盒子高度一致,实现输入框文字居中, 直接这样记,行高=盒高为文字居中,且一行的上下边距会将文字挤到中间)初始化输入框/按钮的样式和引入图标,将input一开始状态设置为width 0。/* 让他变胖变圆润一点 *//* 让他变胖变圆润一点 *//* 让他变胖变圆润一点 *//* 居中设置背景色 *//* 居中设置背景色 *//* 居中设置背景色 *//* 居中设置背景色 *//* 初步布局 */原创 2024-06-29 19:03:28 · 889 阅读 · 0 评论