![](https://img-blog.csdnimg.cn/20200223234759824.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 55
菜鸟的前端初步学习
嘻嘻的妙妙屋
这个作者很懒,什么都没留下…
展开
-
【JavaScript】内容的展开/收起
内容的展开/收起原创 2022-09-01 15:43:23 · 1916 阅读 · 3 评论 -
【JavaScript】手机验证码倒计时
手机验证码倒计时原创 2022-09-01 14:38:13 · 1127 阅读 · 0 评论 -
【CSS】更改Element的date-picker样式
更改Element的date-picker样式原创 2022-09-01 14:33:32 · 894 阅读 · 0 评论 -
【CSS】数据面板
ElementUI + Vue2 实现数据面板原创 2022-09-01 11:01:29 · 554 阅读 · 0 评论 -
【CSS】不定区间进度条
不定区间进度条原创 2022-08-16 11:27:48 · 445 阅读 · 0 评论 -
【React】React Fiber
React Fiber原创 2022-07-12 17:20:01 · 6562 阅读 · 1 评论 -
【Java】JDK 版本切换(Windows)
JDK 版本切换 (Windows)原创 2022-06-30 17:31:31 · 2031 阅读 · 1 评论 -
【Mockjs】React + Mockjs 模拟接口
React + Mockjs 模拟接口原创 2022-06-30 15:29:58 · 624 阅读 · 0 评论 -
React + TypeScript 项目初始化配置
用 Vite 构建 React + TypeScript 项目的初始化配置原创 2022-06-28 18:17:57 · 1347 阅读 · 1 评论 -
【React】React 组件
React 组件转载 2022-06-24 10:17:31 · 1427 阅读 · 0 评论 -
【Mobx6】React + Typescript 实践
Mobx6 + React + Typescript 实践原创 2022-06-23 18:08:08 · 387 阅读 · 0 评论 -
【Webpack】webpack5 模块联邦(Module Federation)实践
webpack5 模块联邦(Module Federation)- 未来组件包更新解决方案原创 2022-06-23 17:12:01 · 6088 阅读 · 1 评论 -
前端测试工具 SwitchHosts + Charles + Proxy SwitchyOmega
前端测试工具 SwitchHosts + Charles + Proxy SwitchyOmega原创 2022-06-23 16:24:26 · 1563 阅读 · 0 评论 -
【Node】npm、yarn、pnpm 区别
npm、yarn、pnpm 区别原创 2022-06-23 15:16:45 · 1714 阅读 · 0 评论 -
【Node】nvm 版本管理工具
nvm 版本管理工具原创 2022-06-23 11:37:10 · 3359 阅读 · 0 评论 -
【React】react-infinite-scroll-component 实现滚动加载
react-infinite-scroll-component 实现滚动加载原创 2022-06-23 11:09:44 · 4290 阅读 · 0 评论 -
【CSS】自定义滚动条样式
自定义滚动条样式原创 2022-06-23 10:25:50 · 373 阅读 · 0 评论 -
【CSS】自定义下拉框
自定义下拉框样式原创 2022-06-23 10:16:11 · 1041 阅读 · 0 评论 -
【CSS】自定义进度条
自定义进度条样式原创 2022-06-23 09:56:44 · 405 阅读 · 0 评论 -
【JavaScript】清空数组的三种方式
方式1,splicevar ary = [1,2,3,4];ary.splice(0,ary.length);console.log(ary); // 输出 [],空数组,即被清空了方式2,length赋值为0这种方式很有意思,其它语言如Java,其数组的length是只读的,不能被赋值。如:int[] ary = {1,2,3,4};ary.length = 0;Java中会报错,编译通不过。而JS中则可以,且将数组清空了。var ary = [1,2,3,4];ary.lengt原创 2022-01-18 16:53:22 · 3079 阅读 · 0 评论 -
【Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification
问题描述vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification:解决方法加大限制的大小将500kb改成1000kb或者更大:chunkSizeWarningLimit:1500build.chunkSizeWarningLimit 类型: number默认: 500块大小警告的限制(以 kbs 为单位)分解块,将大块分解成更小的块:rollupOptions: { outp原创 2022-01-18 15:53:58 · 1942 阅读 · 0 评论 -
【Vue3】项目打包上线部署到服务器
1、npm run build打包项目,生成dist文件夹;2、将dist文件夹复制,粘贴到服务器中;原创 2022-01-18 15:39:08 · 2112 阅读 · 0 评论 -
【HTML】点击直接下载文件
1、使用<a>标签<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>这样当用户打开浏览器点击链接的时候就会直接下载文件。但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;实例如下:移到标签<a>标签上可以显示文件路径,根据路径提示进行文件路径的补全<!DOCTY原创 2022-01-18 15:34:02 · 5707 阅读 · 0 评论 -
【Vue3】vite 配置IP,解决“vite use `--host` to expose”
问题描述vite 启动后出现 “ Network: use --host to expose ”vite v2.3.7 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose原因分析这是因为IP没有做配置,所以不能从IP启动,需要在 vite.config.js做相应配置;解决方法在 vite.config.js中添加 server.host 为 0.原创 2022-01-17 20:55:09 · 7189 阅读 · 0 评论 -
【CSS】div层调整z-index属性无效原因分析及解决方法
问题描述div层调整z-index属性无效;原因分析在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。z-index无论设置多高都不起作用情况这种情况发生的条件有三个:父标签 position属性为 relative;问题标签无position属性(不包括static);问题标签含有浮动(float)属性。eg:z-index层级不起作用,浮动会让z-in原创 2022-01-17 20:47:01 · 1467 阅读 · 0 评论 -
【Vue3】axios 封装
首先,在项目 src 目录下新建一个 config 文件夹,并在该文件夹下新建一个 index.js:// index.jsexport default { development: { baseUrl: 'http://xxx.xxx.xxx.xxx:xxxx' // 测试接口域名 }, beta: { baseUrl: 'http://xxx.xxx.xxx.xxx:xxxx' // 测试接口域名 }, release: { baseUrl: 'http:原创 2022-01-17 20:40:12 · 7680 阅读 · 0 评论 -
【Vue3】Ant-Design 文件上传
Vue3 Ant-Design 文件上传原创 2022-01-17 19:27:28 · 2494 阅读 · 2 评论 -
【Vue2】Vue2中的事件和方法全解
Vue2中的事件和方法全解原创 2022-01-17 13:55:57 · 3649 阅读 · 1 评论 -
【Vue3】使用reactive包裹数组赋值
需求将接口请求到的列表数据赋值给响应数据arr代码const arr = reactive([]);const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方法3 可以,但是很麻烦 res.forEach(e => { arr.push(e);原创 2022-01-17 12:43:31 · 6314 阅读 · 0 评论 -
【CSS】设置文字不能被选中&解除限制
方法一:JSif (typeof(element.onselectstart) != "undefined") { // IE下禁止元素被选取 element.onselectstart = new Function("return false"); } else { // firefox下禁止元素被选取的变通办法 element.onmousedown = new Function("return fals原创 2022-01-16 20:51:30 · 1141 阅读 · 0 评论 -
【Vue3】实现动态给id赋值,点击事件获取当前点击的元素的id操作
场景需要让输出的 id 为 0,1……代码<div v-for="(item,index) in list" :key="index" > <div :id="index" @click="b(index)">我是id</div></div>然后在 vue 的实例中就可以拿到对应的 idb(index){ this.list.splice(index,1);}或<div @click="open($event)" id="原创 2022-01-16 20:24:05 · 5778 阅读 · 1 评论 -
【Vue3】跨域问题 [The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the..]
场景vue 项目中 axios 请求数据的时候请求失败,出现跨域问题。报错信息The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard解决方法withCredentials 属性CORS 请求默认不发送 Cookie 和 HTTP 认证信息。如果要把 Cookie 发到服务器,一方面要服务器同意,指定 Access-Control-Allow-Credentials原创 2022-01-14 18:34:57 · 8867 阅读 · 3 评论 -
【Vue3】保留小数点位数以及转化为百分比
toFixed MDNtoFixed() 方法使用定点表示法来格式化一个数值。一、保留小数点后两位四舍五入export function NumFilter (value) { // 截取当前数据到小数点后两位 let realVal = parseFloat(value).toFixed(2) return realVal}二、保留两位小数不四舍五入export function numFilter (value) { // 截取当前数据到小数点后三位 let tempV原创 2022-01-14 16:32:41 · 4377 阅读 · 0 评论 -
【Vue3】Vue-Router4.x 实现路由跳转传参
传递参数<script> import { useRouter } from "vue-router"; export default { setup() { const router = useRouter() const methods = { goMain() { router.push({ path: "/main", query: {原创 2022-01-14 16:17:55 · 945 阅读 · 0 评论 -
【JavaScript】实现延时3秒刷新
代码setTimeout(function (){ window.location.reload();}, 3000);原创 2022-01-14 16:11:48 · 2915 阅读 · 0 评论 -
【Bootstrap】模态框(Modal)插件
效果用法可以切换模态框(Modal)插件的隐藏内容:通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:$('#identifi原创 2022-01-09 16:12:19 · 774 阅读 · 0 评论 -
【JavaScript】select 事件监听及选中
效果代码Html<!-- 创建作品集 --><div class="create-block"> <div class="create-mainbackground" style="min-width: 600px;"> <div style="border-bottom: 1px solid #212529; border-radius: 5px;"> <h3 style="margin-left: 5px;">原创 2022-01-09 11:33:55 · 3969 阅读 · 0 评论 -
【JavaScript】封装Toast弹窗
效果代码/** * 封装Toast提示 * @param {提示信息} msg * @param {延迟时间} duration */function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText = "font-family:siyu原创 2022-01-09 11:25:39 · 216 阅读 · 0 评论 -
【jQuery】跳转另一个页面
1.我们可以利用http的重定向来跳转window.location.replace("http://www.baidu.com");2.使用 href 来跳转window.location.href = "http://www.baidu.com";3.使用 jQuery 的属性替换方法// 3.1 $(location).attr('href', 'http://www.baidu.com');// 3.2 $(window).attr('location','http://www原创 2022-01-09 11:21:21 · 1595 阅读 · 0 评论 -
【jQuery】获取 input checkbox 被选中的值
代码<html> <head> <meta charset="gbk"> <!-- 引入JQuery --> <script src="jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <input type="checkbox" va原创 2022-01-09 11:02:35 · 1671 阅读 · 0 评论