- 博客(32)
- 收藏
- 关注
RSS订阅原创 【cancelToken取消重复请求】
文章摘要：该文介绍了如何通过axios的cancelToken解决购物车页面连续修改时出现的请求覆盖问题。核心方案是使用Map存储请求标识和取消函数，在拦截器中实现请求的自动取消：1.生成唯一请求key；2.addPending拦截重复请求并取消前次；3.removePending在响应后清理记录。代码展示了完整的实现，包括请求配置、拦截器处理和错误管理，有效防止了数据跳变问题，提升了用户体验。
2025-08-30 18:27:08
234
原创 [电商网站-动态渲染商品-尺寸、尺码、颜色图片等]；库存缺货状态动态对应。
本文介绍了一个电商商品规格选择组件的实现方案。该组件基于后端返回的SKU数据，动态展示商品的颜色、尺寸等规格选项，并实时更新库存状态。主要功能包括： 自动处理SKU数据生成规格属性列表 支持用户选择不同规格组合 智能禁用无库存选项 自动匹配当前选择对应的SKU信息 通过视觉样式区分可选/不可选状态 该组件采用Vue实现，通过计算属性和响应式数据实现规格联动效果，确保用户只能选择有库存的商品组合。组件封装了完整的规格选择逻辑，包括默认选中、库存检查等功能，可方便地集成到电商产品页面中。
2025-08-30 17:25:46
193
原创 【网站深入seo方法】
本文针对成熟电商网站的SEO优化提出了三个关键改进方案：1. 动态设置商品详情页的SEO元素（title、description等），根据商品信息个性化展示；2. 全站添加Canonical标签处理带参数URL、分页和跟踪链接，避免重复内容问题；3. 实现商品结构化数据（Schema.org）以增强搜索引擎对商品信息的理解。通过Vue组件实现了动态修改元标签、智能生成规范链接和自动添加结构化数据脚本的功能，同时在组件销毁时恢复原始状态，确保SEO优化不影响其他页面功能。
2025-08-12 10:20:33
1063
原创 图片上传之支持input输入框内粘贴图片上传
在ViewDesign的Upload组件基础上实现输入框粘贴图片上传功能的解决方案。通过@paste.native事件监听粘贴操作，获取剪贴板中的图片数据，并复用原上传组件的校验逻辑（包括文件大小、类型检查）和上传流程。技术要点：①使用clipboardData获取粘贴内容；②通过beforeUpload方法进行预校验；③采用FormData+fetch实现文件上传；④保持与原组件一致的回显和错误处理机制。该方案实现了与原有拖拽/点击上传相同的用户体验，同时解决了框架封装导致的@paste事件绑定问题。
2025-08-02 16:26:57
233
原创 关于vue3+element-plus使用可选table表格切换分页的时候保存已选数据状态并回显到问题；
可选table表格切换分页的时候保存已选数据状态并回显
2025-01-10 17:45:56
427
原创 抽稀概化算法之--------Douglas-Peucker（道格拉斯- 普克法算法）和Visvalingam-Whyatt算法
被迫卷算法的卑微前端。。。。。
2023-08-10 11:24:57
1496
原创 react中动态生成ref进行操作
import { useRef, useState,useEffect } from 'react';import './Seven.scss';import gof from './imgs/sevenbj.png'function Seven() { const [sss, setsss] = useState(9) const refs = [] //存储ref的数组 const [ren, setRen] = useState([ { .
2022-05-23 10:34:07
2487
原创 input上传图片、音频并预览
以上是对大小类型进行一些判断，还有转foromdata数据。import { useEffect, useState } from 'react';import './index.scss'export default function Song() { const [songfiles, setSongFiles] = useState([]) const files =(e)=>{ let file = e.target.files...
2022-05-17 15:34:29
498
原创 input上传图片，以及动态添加表单，img白边
import './App.scss';import { useState } from 'react';function getBase64(img, callback) { const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result)); reader.readAsDataURL(img);}function App() { const [b.
2022-05-16 09:47:44
864
原创 分页显示的切换效果，加数组按给定数字分割
先安利数组切割，我是切割成每7个合成一个数组：function arrToTwoDim(arr, n = 2) {//这是函数默认参数，不传参默认按2切割var arr2 = []for (var i = 0, j = 0; i < arr.length; i += n) {arr2[j] = []for (var k = 0; k < n; k++) {if (i + k < arr.length)arr2[j].push(arr[i + k])}..
2022-05-04 15:56:03
236
原创 3d位移轮播图
const com = () => { let len = value.length; let temp1 = ins - 2;//ins默认是0，所以给到temp3，因为temp3是中间位置显示 setp1(temp1) let temp2 = ins - 1;//-1就是中间靠左一的位置，到时候会根据这五个索引提供各自的动画位移 setp2(temp2) let temp3 = ins;// setp3(te...
2022-05-04 15:49:56
230
原创 弹性布局看完了，来看看grid布局咯
grid-template-rows：指定行，三个参数表示三行，然后参数值是每一行的高度grid-template-columns：指定列，五个参数表示五列，然后参数值是每一列的宽度grid-template-areas：划定网格分布，因为元素都不会很均匀，有点不规则，所以一般用这样的形式划定分割，会比较清晰。gap：指定行列间隙间距是多少。gird-area：子元素使用，大家按照名字来领取各自的领地啦！！！...
2022-04-20 15:28:20
221
原创 select下拉列表的的文字提示信息
<select id='no' value={sex} onChange={e => { setSex(e.target.value); }} > ...
2022-04-19 16:43:47
2967
原创 弹出导航栏禁止滚动事件
给body增加监听事件这种方法仅仅在PC端上有效，但是在移动端失效。因此需要方法二。移动端：1、先创建一个函数：function scrmove(e){ e.preventDefault(); //阻止默认行为 e.stopPropagation(); //阻止冒泡}2、然后在遮罩层出现后增加监听事件函数：document.addEventListener("touchmove",scrmove,false);3、在遮罩层小时候去除增加的监听事件函数：doc...
2022-04-19 10:44:19
179
原创 粗谈flex弹性布局
注意！！！！：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。不要把justify和align看成固定的水平垂直居中，他们和常规布局不一样，是根据主轴和侧轴来作用的。正常不改变的话justify-content是主轴的，那么就是水平居中，align-items: center就是垂直居中；当改变flex-direction: column上下排列，那么justify-content就是垂直居中，alig...
2022-04-18 23:31:08
3339
原创 react用map遍历生成的标签通过index添加不同的事件
{ lists1.map((e,index) => ( <div key={index}> <div> <img onMouseEnter={(e)=>{imggo(e,index)}} onMouseLeave={imglv} src={img == index ? e.imgpath1...
2022-04-18 10:17:32
1340
3
原创 clip-path部分区域显示，hover曲线出现
.card{ clip-path: circle(5% at 10% 10%); transition: all ease-in-out .3s; background-color: red; width: 300px; height: 300px; } .card:hover{ clip-path: circ...
2022-04-14 16:16:39
393
原创 网页圆形透明滤镜
<style> body { background: url(https://images.unsplash.com/photo-1519677100203-a0e668c92439)no-repeat center; background-size: cover; height: 100vh; cursor: none; ...
2022-04-12 11:18:35
187
原创 图标炫酷hover
<style> /* 首先这是外部引入的i图片，要把<i>替换成<img> 然后加上src去掉calss， 其次这里的图标都是镂空的空心，才能hover出黄金色的底色切记！！！ 其实没啥特别的，就是图标镂空然后改变伪类的底色而已 */ body { margin: 0; padding...
2022-04-11 16:17:41
199
原创 鼠标悬浮文字抬头
<style> body { margin: 0; padding: 0; background-color: #d0d0d0; position: absolute; width: 100%; height: 100%; display: -webkit-flex; ...
2022-04-11 16:00:48
96
原创 走马灯效果的文字hover
ul li{ list-style: none; } ul li a{ position: relative; font-size: 4em; text-decoration: none; line-height: 1em; letter-spacing: 2px; text-transform: uppercase;/* 定义文字内容都是大写字母 */ ...
2022-04-09 11:05:59
374
原创 css伪类炫酷迷幻边框
.box{ position: relative; width: 400px; height: 250px; background: linear-gradient(to top,#000,#262626); margin: 200px auto; } .box::before, .box::after{ cont...
2022-04-09 11:05:47
732
2
原创 按钮点击涟漪效果
.btn{ position: relative; border: none; background: linear-gradient(to right,#33cccc,#ff99cc); width: 200px; height: 60px; font-size: 20px; letter-spacing: 2px; color: white; border-radius: 30px; box-shadow...
2022-04-09 11:05:26
442
原创 这样的轮播图谁让人不爱啊（切片轮播图）
body { background-color: rgba(206, 182, 182, 0.637); display: flex; height: 100vh; justify-content: center; align-items: center; } .a{ position: relativ...
2022-04-09 11:05:13
228
原创 区别一下preserve-3d和 perspective透视
相同点：他俩都写在父元素上，作用于父元素里面的所有子元素。不同点：preserve-3d：是开启3d空间，让元素脱离2d平面，让我们看起来有立体的效果。perspective：是透视效果，很多人会误以为透视就是3d，其实不是的，透视达到了远小近大的效果，从而让人误认为是3d，但这只是欺骗了你的眼睛，实际上还是2d平面，透视一般作用于所有设置了Z轴位移的子元素，譬如translateZ——transform:translateZ(600px);因为Z轴就是距离屏幕的坐标轴，所以透视是为Z轴
2022-04-08 17:26:32
849
原创 移动端检测手指滑动做一些事情ontouchstart
<div className='fight' onTouchStart={first} onTouchEnd={fin}>start可以接受手指第一次接触屏幕的坐标end获取结束坐标并做一些事情。const first = (e)=>{setbad(e.touches[0].clientX);}const fin = (e)=>{if(badgo == 0 && bad-e.changedTouches[0].clientX >
2022-04-08 15:09:51
401
原创 js+css实现div跟随鼠标位移
body{perspective: 500px;transform-style: preserve-3d;}.box{background-color: pink;width: 500px;height: 500px;margin: 200px auto 0px;transition: all 0.8s ease;}<body> <div class="box" onmousemove="go(event)"></div..
2022-04-08 14:07:06
439
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人