- 博客(46)
- 收藏
- 关注
RSS订阅原创 对 Composition API 的个人理解
Composition API 属于高级用法，并不是使用 vue3后就必须要使用的功能，而是根据项目的复杂度来权衡使用 Composition API 还是 Options API;setup 是一个类似生命周期的语法，只执行一次，对比 react hooks 则不然，它需要执行多次，也无需 useMemo useCallback;toRefs:把一个用 reactive 生命的响应式对象，类似于结构的方式 return 出去，并且导出的对象具有响应式；
2023-02-28 22:04:03
178
原创 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*//*定义滚动条轨道 内阴影+圆角*//*定义滑块 内阴影+圆角*/
2022-10-14 09:51:09
334
1
转载 PC端页面和移动端页面，两份代码来回切换
PC端页面和移动端页面，两份代码来回切换_前端菜鸟丶Ndie的博客-CSDN博客_reactpc端移动端切换当你分开用两份代码写PC端和移动端时，需要根据情况来判断显示那一份，可以入下解决将两份代码放入一个文件夹内，通过一个入口html文件来进行判断显示main.html //判断是手机还是电脑if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBro
2022-06-07 14:18:00
887
转载 react中function component值得注意的几个异步问题
react中function component值得注意的几个异步问题 - 掘金React 16.8推出了react hook，使得开发人员可以在使用函数式组件（function component），通过函数式写法，可以让我们不用再去写生命周期函数。对于function component的一些基本用法相信大家都看看官方文档也就会了，有以下几个问题值得思…https://juejin.cn/post/6844904093589176334...
2022-03-03 09:46:41
231
原创 react中文件大小单位转换
import numeral from 'numeral';const unitsList = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB'];export const b2ValueUnit = (val: number, fmt = '0,0.00') => { let unit = 'B'; let value = numeral(val); unitsList.forEach((item) => {...
2021-11-30 15:02:57
686
原创 display grid布局自动换行后最后一行左对齐
.content{ display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill, 256px); grid-gap: 10px; .item { width: 256px; height: 48px; background: ...
2021-11-25 10:32:01
1780
原创 Git 常用命令大全
Git是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码，管理私人的文档和源代码也有很多优势。Git常用操作命令：1)远程仓库相关命令检出仓库：$ git clone git://github.com/jquery/jquery.git查看远程仓库：$ git remote -v添加远程仓库：$ git remote add [name] [url]删除远程仓库：$ git remote rm [name]修改远程仓库：$ git remote set..
2021-11-05 11:31:08
172
原创 react中swiper6版本实现图片组轮播
import SwiperCore, { Pagination } from "swiper";import { Swiper, SwiperSlide } from "swiper/react";SwiperCore.use([Pagination]);<Swiper className="mySwiper" slidesPerColumnFill={"row"} slidesPerView={3} ...
2021-11-02 13:19:45
332
原创 css气泡框
html:<divclassName={styles.rechargeAmount}> <span className={styles.popover}> <span /> 8折优惠 </span> 充值金额: </div>css:...
2021-10-28 11:23:11
170
转载 react + antd Table实现表格数据合并
https://www.cnblogs.com/steamed-twisted-roll/p/13306677.html
2021-09-08 17:51:17
375
原创 js判断当前是PC端还是移动端
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {//移动设备window.location.href = "移动端地址";}
2021-09-01 10:09:30
112
原创 匹配文件名不能包含特殊字符
/*匹配文件名不能包含特殊字符*/var patrn = /[!|@|◎|#|(\$)|%|(\^)|\[|\]|……|(\&)|※|(\*)|×|(\()|（|(\))|）|_|——|(\+)|＋|(\|)|§|=|<|<=|>|>=|<>|\?|\/|!=|^=|]/gi;if (patrn.test(file.name)) {// 如果包含特殊字符返回false message.warn('文件名不能包含特殊字符！'); return fals.
2021-09-01 10:07:01
881
转载 ant-design pro导出表格数据为Excel文件
https://blog.csdn.net/W3464116859/article/details/115306552
2021-07-23 16:47:11
427
原创 轮播图-实现中间大两边小的轮播图
<Swiper spaceBetween={-60}//幻灯片之间的距离 slidesPerView={3} //视图幻灯片数量 centeredSlides={true} //活动幻灯片将居中 loop={true} // 是否循环 className={'mySwiper2'}> {imgDataFour.map((e, i) => { return ( <SwiperSlide key={i}> <im.
2021-07-08 17:43:34
1732
原创 react项目网页轮播使用Swiper插件，img适配不同分辨率图片不被压缩
<div className="slogan-box"> <Swiper pagination={true} loop={true} className="mySwiper"> {bannerText.map((e, i) => { return ( <SwiperSlide key={i}> <div className={i===0?'swiperImg':i===1?'swiperI...
2021-07-08 14:22:16
457
转载 不使用cli脚手架搭建vue项目(webpack简单配置)
前言 今天介绍一篇关于工程搭建的文章。主要介绍不用cli脚手架搭建一套前端工程，因为每个公司不是用脚手架工具安装一下就能进行开发了，很多时候都是对工程有一定的定制需求，你没有深入的去了解cli脚手架的话，可能会很吃力，所以这块还是需要有一定的深入了解的，内容也不是太复杂，但是你需要掌握一些vue、webpack、nodejs的简单的基本概念和认识，也挺适合初级者阅读，我们学前端的小伙伴其实都知道，前...
2021-06-17 17:47:47
268
转载 clipboard复制粘贴使用总结
（1）介绍： clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+...
2021-05-19 15:05:50
2031
转载 vue实现模拟手机支付宝/微信输入6位验证码
Vue前端实现6位验证码输入框效果 效果图片源代码1.template代码2.script代码3.style部分(less语言) 这是一个输入六位验证码的弹窗,在输入一位数字可以自动跳到下一个输入框,和删除当前输入框的内容后聚焦到上一个输入框,并且输满六位验证码后调接...
2020-11-25 13:55:13
1219
原创 js常用基础总结
简介本文总结了js类型以及以及手写函数等等一些基本内容，目的是为了更好的总结js知识体系，帮助自己更好的掌握js这门语言，字数或许有些多，但请慢慢消化，如有写的不好之处或者写错的地方请指出，作者方便修改临近面试，便想要将之前学过的知识系统化再过一遍，深刻的映在脑海中，便有了这次差不多万字的文章，好了，废话不多说，开始撸！1.js类型首先，现在js的类型有以下几种:基本类型 : String , Number , null , undefined , Boolean , Symbol ,.
2020-11-18 15:50:07
522
原创 html/css常用字典
1.1 水平居中 1.1.1 行内元素 （父元素）text-align，（子元素）inline-block .parent{text-align:center} .child{display:inline-block} 1.1.2...
2020-11-18 15:46:53
779
1
原创 loadding图片360度旋转
.loading-icon { @keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3.
2020-10-21 17:46:12
178
转载 WEB前端学习资源
常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考es6教程JS标准参考教程编程类中文书籍索引深入理解JS系列前端开发仓库《JavaScript 闯关记》JavaScript 初学者教程（指南）JS讲义李炎恢JavaScript教程 第一季逐行分析jQuery源码的奥秘 JS常用框架、库、插件 [vue]vue官网[vue]饿了么element UI[vue]vue-router路由[v...
2020-10-13 17:14:16
846
原创 js数组对象中 id相同 的元素去重
var arr = [ {id:1,name:'aa'}, {id:1,name:'aa'}, {id:3,name:'cc'}, {id:4,name:'dd'}] function deWeight(arr,initArr=[]) { arr.forEach(item=>{ let isFind = initArr.find(cell=> cell.id === item.id) ...
2020-10-13 15:54:50
1593
原创 ES6常用总结
一、let 和 const1、let可以声明变量let name = '张三';console.log(name);//张三2、ES6新增块级作用域 注：在ES6之前作用域分为：全局作用域、函数作用域var name1 = '张三';let name2 = '李四';console.log(name2);//李四console.log(name1);//张三console.log(name2);//报错 上面代码在代码块之中，分别用let和var声明了两个
2020-10-13 10:41:39
261
原创 JS数组对象去重排序等一些常用方法整理
1、数组对象去重1. 数组去重，数组中元素为数字或者字符串1. 单个数组去重//1.function unique(arr) { return [...new Set(arr)] }//2.function unique(arr) { return Array.from(new Set(arr))}//3.function unique(arr) { var arrs = []; for (var i = 0; i < arr.length;
2020-10-13 10:37:42
556
转载 vue项目PC端随屏幕分辨率与窗口大小自适应
一、npm安装依赖npm i lib-flexible -Snpm i px2rem-loader -D二、新建文件夹在src下面新建utils文件夹，并新建一个js文件，取名为【flexible】image.png三、将下述代码全部复制进【flexible】文件中(function() { // flexible.css var cssText = '' + '@charset "utf-8";ht...
2020-10-13 10:30:23
1072
1
原创 判断字符串是否有小数，如果有只取后几位
interceptionStr(str) {/*判断字符串是否有小数，如果有只取后8位*/ if (str === undefined || str === null || isNaN(str) || str === '') { return 0 } str = String(str) let strSplitArr = [], first = null, strSecond = null if (str.indexOf('.') != -1) { .
2020-10-13 09:45:28
495
原创 react页面中屏蔽浏览器默认右键事件
componentDidMount() { document.oncontextmenu = function (e) {/*屏蔽浏览器默认右键事件*/ e = e || window.event; return false; };}
2020-10-13 09:27:53
2803
原创 react中上传文件或者文件夹
react和UI插件antd：render() { const menu = (<Menu className={'upload-menu-select'}> <Menu.Item key='1'> <label className={'upload-menu-select-item'} style={{cursor: "pointer"}} htmlFor="files-up">上传文件</label> .
2020-10-13 09:27:37
2239
原创 react中监听div滚动条滚动到底部时，请求新数据刷新页面
<div className={'main-content'} key={'main-content'} style={{height: scrollerHeight, overflowY: 'scroll'}} ref={c => { this.scrollRef = c; }} onScrollCapture={() => this.onScrollHandle()}> <Table on.
2020-10-13 09:27:24
3695
原创 react中在刷新页面时提示
在入口文件index.js文件中加入红色段：import 'antd/dist/antd.css';import './assets/css/ant-cus.css'import './assets/css/base.css'import './assets/css/index.css'import './assets/css/header.css'import './assets/css/rightClick.css'import './assets/css/recycle.css'.
2020-10-12 16:35:37
632
原创 文件直接下载( 解决图片，视频点击下载的时候在浏览器默认是打开)
/*href:下载的链接;downloadName:下载到本地的文件名*/downloadFile = (href, downloadName) => { // const oa = document.createElement('a'); // let e = document.createEvent("MouseEvents"); // e.initEvent("click", false, false); //初始化事件对象 // oa.href = hre.
2020-10-12 16:30:07
3752
原创 js中点击复制内容到粘贴板
/*params: 需要复制的内容*/copyText = (params) => { let input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘 input.setAttribute('value', params.hash); document.body.appendChild(input); input.se.
2020-10-12 16:28:11
94
原创 js中给数组对象增加属性创建随机字符串
/*len:需要的长度;list：传入已有的数据判断是否有重复如果有重复重新创建新的随机数*/randomString = (len, list) => { let str = ""; let range = len; let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', .
2020-10-12 16:26:51
212
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人