- 博客(26)
- 收藏
- 关注
RSS订阅原创 webpack的理解和总结
这可以减少初始加载时间，只加载目前需要的模块，在用户与页面进行交互时再根据需要进行加载，提高了页面的性能和加载速度。模块，但通过loader的使用，可以处理其他类型的文件（如css，less，图片等）。的使用，可以将其他类型的文件（例如css，less，图片等）转换为有效的 模块，使其能够被打包到最终的结果中。webpack可以分析模块之间的依赖关系，根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。代码分离是指将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。
2024-10-30 16:33:29
877
原创 vue2.0+echarts实现多省份地图加双柱状图展示（保姆级教程）
首先放效果图开始之前我默认您已成功下载和导入相关插件打开 http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6鼠标点击你想要的省份 然后在右边根据需要看是否勾选（包含子区域），如果勾选了就会有市地区级的坐标，我这个项目是不需要的，所以不勾选，然后根据需要点击第三行------其他类型 点击下载保存 你会得到该省份的 文件 ，然后依次下载需
2024-07-25 17:52:07
865
1
原创 使用 fetchEventSource 实现sse流式请求
/ onclose函数是会话结束正常关闭触发，但几乎没有做到这步，不执行这个回调，不知道什么原因。//我这里是判断我请求回来的数据里是否包含'[DONE]'，他是数组里的最后一项，表示加载完成。// console.log('接口返回', JSON.parse(event.data))// console.log('SSE会在通过事件源收到数据时触发')// 开始会话链接，也做了个全局的......// 终止or结束会话，做了个全局的...// 关闭业务，执行关闭sse数据接口。'SSE结束会话了'
2024-07-08 10:59:18
2868
1
原创 vue2.0中动态绑定img的src属性的方法（三元运算）
函数在构建时会解析图片路径，并将图片打包到正确的位置。使用 require 可以确保路径在打包时正确解析。可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块。在标签里进行三元运算符判断的时候，引用地址外层需要加require()使用computed属性来动态计算img的src路径。/* 你的样式 */
2024-07-08 10:17:43
2077
原创 jquery踩坑之tab选项卡切换，标题栏包含icon小图标跟着对应切换
下面css最重要的 是.soft_rows.soft_active .icon1，.soft_rows.soft_active .icon2，.soft_rows.soft_active .icon3这一部分。先给大家看下我的需求稿 tab切换实现不难 但是左侧标题栏的小图标切换的时候跟着变 着实有一丢丢费我脑子~~太菜了没办法（暴风式哭泣）由于左侧有10个标题栏 太多 在这里演示的时候 我只写前几个。我想了想 然后让设计给我做了张雪碧图 开干~
2024-04-12 13:28:13
502
原创 踩坑之video视频无法正常播放
但是 视频不会自动播放，成了静止的一张图片 给video设置的autoplay属性没有生效 然后翻阅了很多文档 知道问题了 少了一个属性“”之后就可以正常播放了 但是还有个问题 在 iOS无法自动播放 然后就还需要一个属性“首先说下我的需求：就是视频放在头部自动循环播放，不需要手动操作。所以最后的完整代码是。
2024-04-12 09:15:19
535
原创 css实现页面内容区撑满全屏（内容全屏自适应）
然后 我使用了第二个办法 成功解决 那就是使用 position定位。我刚开始想到的思路是 左边内容使用浮动 右边自适应。
2024-03-29 10:16:01
1203
原创 用jquery实现页面滚动加点击事件对应的导航栏高亮
我的需求是 当页面滚动的时候 让导航栏浮动定位 同时让下面内容区滚动的时候对应的导航栏标题高亮 同时点击导航栏标题的时候 下面的内容也滚动到对应区域 实现思路 主要是使用到 data-target 自定义属性。没有说的是 最原始的需求是最上面的视频也需要吸顶 然后继续滚动导航栏也需要浮动定位 在这篇博文里 我把视频模块吸顶的实现给删除了。如果大家在食用的过程中发现这瓜不保熟 那就检查下你们的页面样式 是否有。
2024-01-10 14:30:11
674
1
原创 简单的jquery实现一个吸顶功能
在实现的过程中遇到一个问题 浪费了一些时间 就是在计算页面滚动的高度的时候计算不出来 打印 $(document).scrollTop();打印不出来 就感觉很奇怪 然后搜了很多文档 问题是在我的css文件里有一个样式。这个样式导致监听不到正确的页面滚动高度 但是别的页面我需要这个样式 解决办法就是在当前页面里把样式改成 overflow: visible；
2024-01-05 09:29:06
523
原创 解决css中border渐变色和border-radius一起用border-radius失效的问题
我们都知道border-radius属性是实现边框圆角的，当我们给border设置渐变色的时候是用到border-image，会发现此时设置border-radius会失效。
2023-12-12 09:38:43
2329
原创 用css实现文字字体颜色渐变的三种方法
通过url属性引用SVG图像， SVG是一种用于描述矢量图形的XML标记语言。利用这个属性，我们可以在文字中嵌入SVG图像，实现渐变色效果。background-clip是CSS3中新增的属性，可以用于指定背景图片或颜色的绘制范围。以上三种方法都可以实现文字的颜色渐变。
2023-11-09 10:18:13
33212
9
原创 解决微信小程序中‘ ；‘占位符失效的问题
查文档 看到官网上 text标签有个属性decode。这个属性只有text有 设置在view上不生效。专属权益 尽享福利。>专属权益 尽享福利。
2023-09-20 09:59:20
939
原创 vue报错： Do not use built-in or reserved HTML elements as component id:title
Do not use built-in or reserved HTML elements as component id:title
2022-06-24 09:21:13
676
原创 解决异步回调地狱的三种方法
2.解决回调地狱的方法2.1 生成器（es6中的语法）生成器是一个特殊的函数（在函数名前面加一个*号），用来解决异步编程的回调地狱问题，语法行为和传统函数完全不同yield语句：函数代码的分隔符，把函数代码切割成几块通过next（）来控制代码的一个向下的执行使用iterator 迭代器对象 说明可以使用for of来遍历 每一次调用返回的结果 是yield后面的内容next执行的时候是可以传参的，参数将作为上一个yield语句整体返回结果 看例子：2.2 Promisenew Pro
2022-06-14 15:43:14
3068
原创 element ui 日期选择器 默认展示最近一个月的时间不能选择未来时间
最近用到element ui的日期选择器，把实现过程记录一下。（vue项目）首先说下我的需求：1、默认展示最近一个月的时间2、不可以选择未来时间 效果如下 <template> <div class="block"> <el-date-picker
2022-01-10 18:46:26
6318
原创 使用calc解决css中内容不多，但需要充满整个屏幕的问题
在写样式中，我们经常会遇到页面内容不够多，但需要填充一整个屏幕这种问题，如下图：像图上这种，内容不多，所以无法填充整个屏幕，就很难看，这个时候我们可以使用css3中的一个计算属性calc来实现图上是微信小程序里的。需要使用flex布局 在左半边这块区域 css的样式如下： .left{ height: ~'calc(100vh - 412rpx)';//412rpx是上面的图片加tab切换标签这行的高度，我们用100vh减掉上面的高度，就是下面我们需要填充的高度}这样就解决了 页面不
2021-12-15 17:47:13
1668
原创 在vue中安装postcss-pxtorem报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
今天在vue项目中安装postcss-pxtorem报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”看了很多大佬的博客，找到解决办法就是下载指定版本npm i postcss-pxtorem@5.1.1这样就可以了，记录一下
2021-12-08 17:19:29
332
原创 webpack手动配置（二）完结
webpack中的loader1.loader概述在实际开发过程中，webpack默认只能打包处理以 .js后缀结尾的模块，其他非.js的模块webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错loader加载器的作用：协助webpack打包处理特定的文件模块。例如：css-loader 打包处理.css相关的文件less-loader可以打包处理 .less相关文件babel-loader可以打包处理webpack无法处理的高级js语法1.1 loader
2021-11-04 10:09:54
147
原创 复习数组中的 some forEach every reduce（重点）方法
1.复习数组的方法需求：拿到数组里的“苏大强”的索引方法一： forEach 弊端：比较消耗性能 它在拿到索引的时候 循环不会停止，return失效 它会把数组里的循环完才结束 const arr =['小红','倪大红','苏大强','苏妲己'] arr.forEach(item,index)=>{ console.log('object') //会打印4次 循环一旦开始，无法在中间被停止 if(item==='苏大强'){
2021-11-04 10:05:46
278
原创 微信小程序rich-text标签遇到的图片和文本的问题
微信小程序rich-text标签遇到的图片和文本的问题（解决rich-text文本里的图片不能正常显示，和文本自带样式的问题）最近在开发小程序，需求就是：编辑器里自带的div、p、span等标签正常的展示在小程序里，然后了解了这个rich-text标签，挺好的，但是我遇到了问题，就是图片不能自适应（图一），文本居然不能自动换行（这个在后台打印出来的原来的span标签自带了样式（图二））因为第一次用rich-text 所以百度了下 用replace来处理，像网上一样的// wxml <ri
2021-09-02 17:14:10
2262
原创 最根本的webpack手动配置（一）
最根本的webpack手动配置（一）序：我们为什么要用webpack？webpack是前端工程化开发的一个具体的解决方案（早期方案：grunt，gulp）parcel也是目前主流的前端工程化解决方案之一在实际的前端开发过程中，每一个开发者都应该遵循四个现代化“模块化，组件化，规范化，自动化”来使自己的代码更清晰规范，在没使用webpack之前，项目中用到的高级语法（例如es6中的）能使开发效率非常高，但浏览器可能不支持不认识这些语法，这个时候我们就需要使用打包工具进行转化解析，处理好各模块间的依赖
2021-08-27 09:40:41
137
原创 Webpack 使用小结
webpack是一款强大的加载器兼打包工具，它能把各种资源，例如JS（包含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理，优势如下：1.webpack是以commonJS的形式来书写，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移2.能不能能不能能不能被模块化的不仅仅是js，还包括各种资源文件3.开发便捷，能替代部分gulp的工作，比如打包
2017-11-24 00:28:36
286
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人