![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
VanChaoi
钓鱼要到岛上钓,不到岛上钓不到.
展开
-
前端修改浏览器滚动条样式
::-webkit-scrollbar {width:5px;height:5px;position:absolute;}::-webkit-scrollbar-thumb {background-color:#1890ff}::-webkit-scrollbar-track {background-color:#ddd}原创 2021-09-22 19:59:48 · 306 阅读 · 0 评论 -
前端项目中(Vue)表单校验规则总结
1.手机号验证export var phoneValidate = (rule, value, callback) => { var phone = value.replace(/\s/g, "");//去除空格 //校验手机号,号段主要有(不包括上网卡):130~139、150~153,155~159,180~189、170~171、176~178。14号段为上网卡专属号段 let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D原创 2021-08-06 16:07:08 · 525 阅读 · 0 评论 -
前端项目中遇到的坑 总结
1.区分数组的indexOf/findIndex/find 的使用场景findIndex() 方法传入某个条件,返回符合条件的数组第一个元素位置 ,如果没有找到返回 -1indexOf() 方法传入的是指定元素 , 返回数组中某个指定的元素位置。如果在数组中没找到指定元素则返回 -1。find() 方法传入某个条件,返回符合条件的数组第一个元素 ,如果没有找到返回undefined (注:这个undefined,经常会带来一些报错,可以换用findIndex方法)// var num =原创 2021-08-06 13:51:03 · 386 阅读 · 0 评论 -
Swiper插件在Vue项目中使用时遇到的坑
1.按照官方文档给的步骤,在vue项目中下载依赖使用出错 答:因为swiper官方给的是最新版本的,直接引入的也是ts文件和less文件,vue2不支持,所以想vue2支持需要下载低版本的swiper2.在含有swiper轮播图页面使用定时器的时候,swiper轮播图播放出现混乱 答:swiper和定时器冲突,解决方法:把轮播图单独封装起来或者是把含有定时器的功能封装起来,反正就是两个不能在一个页面上3.swiper对象初始化问题,第一张占满了盒子 如...原创 2021-08-05 16:43:06 · 638 阅读 · 0 评论 -
Element ui 树形表格+复选框
我的业务情形:父级数据需要复选框,子级数据不能有复选框实现效果:原创 2021-06-10 15:37:30 · 839 阅读 · 0 评论 -
ECharts图的适配
ECharts图的适配一、如果页面没有侧边栏的展开和折叠mounted钩子函数中,对窗口大小变化的事件进行监听destroyed钩子函数中,组件销毁取消事件监听调用echarts提供的API resize方法mounted() { ... window.addEventListener('resize', this.screenAdapter)},destroyed() { ... window.removeEventListener('resize', this原创 2021-05-20 14:46:51 · 1942 阅读 · 0 评论 -
移动端---媒体查询
1.响应式布局介绍:一个html页面适配多个不同的设备 优点:全适配(一个html文件就可以适配所有的屏幕) 缺点:不便于维护(响应式布局其实把多个页面的css写在了一个html中,造成css代码冗余)2.核心原理:使用媒体查询技术,根据不同的设备尺寸加载不同的样式3.媒体查询语法标准语法 @media screen and(设备尺寸) {css样式} 简写: @media(设备尺寸) {css样式} 注意:括号里不需要添加分号 区间查询 设备尺...原创 2020-11-24 22:10:21 · 1657 阅读 · 0 评论 -
移动端布局--flex弹性盒子
flex弹性盒子布局介绍 什么是伸缩布局(弹性布局) 是CSS3中一种新的盒子模型-伸缩盒子模型.是block,inline-block,line的基础上延伸出来的新一代布局模式特点:a.伸缩盒子最大的特点就是把控件可以最合理高效的方式分配给每一个子盒子b.当伸缩盒子中所有的子元素总宽 大于flex伸缩盒子宽高是,子元素并不会超出,flex盒子会自动按照每一个子元素的宽高比例合理分配注意:1.弹性盒子控制子元素布局,只对亲儿子有效2.弹性盒子的子元素...原创 2020-11-24 21:55:09 · 349 阅读 · 0 评论 -
盒子阴影生成盒子边框的巧妙应用
盒子阴影生成盒子边框的巧妙应用在平时使用CSS3 盒子模型时,需要添加边框,添加了边框后可能会影响盒子里图片内容的宽高比例,导致边框连接的地方会出现小缝隙.在不考虑兼容性的情况下,可以使用阴影来完成左右的边框可以使用:box-shadow:1px 0 0 0 red; 上下边框可以使用:box-shadow:0 1px 0 0 red; 左和上为负数在使用:hover给盒子添加边框的时候会出现抖动,在不考虑兼容性的情况下,也可以使用阴影来完成.box-shado...原创 2020-11-24 21:46:22 · 218 阅读 · 0 评论 -
移动端顶部和底部做法
用户的的设备太宽会导致图片失真的做法:max-width 最大宽度 :当屏幕宽度大于等于750px的时候,body的宽度是750px,当屏幕宽度小于750px的时候,body的宽度和屏幕一样body {width:100%;max-width:750px;margin:0 auto}移动端顶部和底部固定定位的做法:.head {position:fixed;/*一般情况下,绝对定位和固定定位如果没有加便宜,还在原来的位置*/width:100%;..原创 2020-11-24 21:28:27 · 790 阅读 · 0 评论 -
CSS3---背景尺寸,线性渐变
CSS3背景尺寸大小语法:background-size:cover/contain;background-size:180px auto;background-size:50%;cover 背景图片等比例缩放,铺满盒子,图片有可能显示不完整 contain 背景图片等比例缩放,图片显示完整,有可能铺不满盒子 写一个数值, 代表是宽高等比例缩放,高默认值是auto 写两个数值 第一个代表宽,第二个代表高 写百分比 参考是盒子的宽高 写一个百分比的值,参考是盒子的宽,不...原创 2020-11-22 15:58:54 · 494 阅读 · 0 评论 -
CSS----高级技巧(三角,用户界面样式,图片表单语文本对齐,文本省略号,)
CSS三角 div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }1.我们用css边框可以模拟三角效果2.宽度高度为03.我们4个边框都要写,只保留需要的边框颜色,其余的不能省略,都改为transparent透明就好4.为了照顾兼容性低版本的浏览器,加上原创 2020-11-11 21:59:52 · 300 阅读 · 0 评论