- 博客(12)
- 收藏
- 关注
原创 vscode 常用插件
代码格式化PrettierVeturAuto Rename TagColor HighlightIntelliSense for CSS class namesBracket Pair ColorizerSettings Sync:用户配置备份恢复功能Git Lens:结合git使用chinese
2021-05-18 18:06:37
129
原创 sass学习记录及vue实践
第一章:Vue中实践样式文件复用(模块化导入)**说明:**通常项目中复用的样式值(变量)和样式段(mixin)会统一放在一个.scss文件中(common.scss)供项目使用,主要来学习common.scss文件的使用组件中使用在组件的scss文件中直接导入,属于谁用谁引:@import '../assets/style/common.scss'全局中使用秉着懒的原则,对于这些高度复用的东西,能一次搞定自然是最好的:// 在main.js中引入全局样式 import './as
2021-05-18 16:35:12
181
原创 防抖和节流学习记录
防抖和节流学习记录说明:以监听屏幕大小改变(resize)demo来演示function resize(){ console.log('调节了屏幕的大小')}window.addEventListener('resize', resize)1.防抖和节流函数(初级)核心:利用闭包存储一个起始点(用于判断是否执行)节流函数:函数在一段时间内多次调用,经过一定时间间隔后才可再一次执行(执行多次)时间戳function throttle(func, delay) { let last
2021-05-17 14:58:25
158
原创 github 搜索指令
github 搜索指令in:name + 项目名称in:description + 项目描述in:readme + 项目帮助文档language:vue vue写的项目stars:>数字例如 5000 搜索stars超过5k的项目awesome 检索内容 搜索学习资料
2021-05-09 16:25:42
299
原创 封装请求 request.js
建立一个 request.js 文件//定义发送次数let ajaxTimes = 0; // 调用request发起请求传入参数对象 config,{url:'xxxx',data:{},method:'get/post..'} ;export const request = (config) => { //每调用发送一次,记录ajaxTimes的值 ajaxTimes++; //显示加载中 wx.showLoading({ title: '加载中',
2021-04-18 18:09:04
1120
原创 不用计算实现 图片懒加载
不用计算实现 图片懒加载给图片加上 data-src 属性const imgs = document.querySelectorAll("img[data-src]"); const config = { rootMargin: "0px", threshold: 0, };let observer = new IntersectionObserver((entries, self) => { entries.forEach((entry) => { i
2021-04-18 17:49:15
110
原创 边框流光效果
datav库针对vue.js打造的炫酷效果组件库css3动画写流光效果<div class="outContainer"> <span></span> <span></span> <span></span> <span></span></div>.outContainer{ /*width: ...; 依据实际给width*/ position:relative;
2021-03-21 10:47:57
2006
原创 元素隐藏的三种方式对比(针对移动端项目中的按钮,先隐藏且不能被点击 visibility:hidden)
元素隐藏的三种方式对比display:noneopacity:0visibility:hidden项目需求表面一个图片遮罩,鼠标hover遮罩消失,内部元素展现,其中有一个按钮在移动端是手指触摸到该区域就会立马跳转到指定链接而不会显示内部元素display:none不占据页面空间的不可见元素------相当于完全没有它,下方元素也会占据它的位置。展示时 display:block 有界面的切换改变opacity:0透明度为0,视觉看不见,实际存在,元素的点击效果依然存在visibi
2021-03-14 10:36:21
799
2
原创 Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题!
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题!问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图。但是F12控制台切换屏幕后能正常轮播但无法loop循环。问题关键:轮播数据是发起请求后传入swiper组件的,数据还没获取完全,而swiper组件已经开始初始化了所以需要等待请求完成后再初始化轮播!解决办法:v-if 来控制轮播组件是否初始化,项目是3张图轮播,这里通过判断数据数组长度是否为3来控制。<mySwiper :swiper=
2021-03-14 09:45:53
921
原创 小白 vue-cli 项目打包
vue-cli 项目打包小白的你有一天被老大喊着将手上写着的vue项目打包一份给他迭代上线,该怎么做?最后把什么文件给到老大?利用 npm run build 命令进行打包打开你的 package.json 文件 ,找到 build 相关命令"build:prod":xxxxxx //生产环境"build:stage":xxxxx //应该是测试环境控制台输入 npm run build:prod等待程序慢慢打包,之后会生成一个 dist 文件夹这个 dist 文件夹就是你老大想要的
2020-12-14 01:23:10
243
原创 接口传参为formData类型,实现文件/图片上传功能
接口传参为formData类型,实现文件/图片上传功能摘要:前端小白工作中第一次遇到了上传图片的需求,一看后台接口需要传formData类型参数。const formData = new window.FormData();formData.append(key, value);//如果还有其他的参数,继续使用方法添加formData.append(key, value);FormData.append()向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖
2020-12-13 18:29:56
1891
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人