2023 年 12月随笔档案 - 周文豪

vue3+lottie实现动画

摘要：1、安装lottie-web npm i lottie-web 2、使用在线json文件 <template> <div class="box"> <div id="lottie_box" style="width: 800px;height: 800px;margin-left: 1000px;b 阅读全文

posted @ 2023-12-28 17:57 周文豪阅读(736) 评论(0) 推荐(0) 编辑

CSS实现滚动贴合效果

摘要：一、滚动贴合介绍滚动贴合：鼠标滚动的时候，自动贴合到浏览器的底部或顶部设置CSS滚动贴合需要使用到两个属性： 1、给滚动容器设置scroll-snap-type，值为滚动的方向和方式 .container { /* display: flex; */ /* 第一个值为滚动贴合的方向，y表示纵向滚阅读全文

posted @ 2023-12-28 11:14 周文豪阅读(201) 评论(0) 推荐(0) 编辑

CSS object-fit

摘要：一、object-fit object-fit属性定义了被替换的元素（如img或video）的内容应如何调整大小以适应其容器。object-fit的默认值是fill，这可能导致图像被挤压或拉伸。让我们来看看可能的值。 object-fit的可能值:contain、cover、fill、none 1 阅读全文

posted @ 2023-12-22 17:21 周文豪阅读(8489) 评论(0) 推荐(1) 编辑

background-size: cover与background-size: contain

摘要：background-size的可能值 background-size的可能值是auto, contain, 和cover. 1、background-size: cover 在这里，图像将被调整大小以适应容器。如果长宽比不一样，那么图像将被屏蔽以适应。当使用background-size: co 阅读全文

posted @ 2023-12-22 16:41 周文豪阅读(3270) 评论(0) 推荐(0) 编辑

SVG动画

摘要：一、下载SVG 网站：https://undraw.co/ 点击“browse now” 点击“search” 点击第一个点击“Download SVG for your projects” 对代码进行格式化将代码拷贝到vs code中，用快捷键“Shift+Alt+F”进行格式化，格式化之后如阅读全文

posted @ 2023-12-22 11:28 周文豪阅读(132) 评论(0) 推荐(0) 编辑

font-size 设置字体不生效解决方案

摘要：使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此,所以小于12px字体不会在变小，而是保持12px的大小添加如下代码： display: 阅读全文

posted @ 2023-12-21 11:15 周文豪阅读(498) 评论(0) 推荐(0) 编辑

style中通过import引入样式时,scoped不生效

摘要：通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式 <style lang="scss" scoped> @import url(../style.scss); </style> 此时虽然用了scoped，但是样式还是全局的。造成样式污染的案例：（1）、父页面阅读全文

posted @ 2023-12-15 17:57 周文豪阅读(469) 评论(0) 推荐(0) 编辑

mysql递归查询

摘要：MySQL with Recursive的作用是基于一组初始数据，进行递归查询，返回符合条件的数据集。这种递归查询方式可以应用在很多场景下，比如对于树形结构、层级结构的数据处理，以及对数据进行分类汇总等。 MySQL with Recursive的使用限制？ MySQL with Recursive 阅读全文

posted @ 2023-12-12 16:30 周文豪阅读(269) 评论(0) 推荐(0) 编辑

vue3视频播放器组件vue-video-player

摘要：一、vue3 1、安装 npm i vue3-video-play --save 2、全局注册 import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css a 阅读全文

posted @ 2023-12-07 16:47 周文豪阅读(2108) 评论(0) 推荐(0) 编辑

el-table去掉鼠标悬停的效果，隐藏表头，设置行高，每行显示不同的颜色

摘要：1、去掉悬停效果添加样式 /* 去掉鼠标悬浮效果 */ .el-table tbody tr:hover > td { background-color: transparent !important } 2、隐藏表头 el-table 添加属性 :show-header :show-header 阅读全文

posted @ 2023-12-05 17:02 周文豪阅读(1565) 评论(0) 推荐(1) 编辑

echarts饼图实现图例翻页

摘要：实现步骤： 1、echarts安装 npm install echarts 2、页面引入 import * as echarts from 'echarts' 3、容器 <div ref="talentDemandChart" style="width:350px;height:250px;text 阅读全文

posted @ 2023-12-05 16:17 周文豪阅读(96) 评论(0) 推荐(0) 编辑

el-table实现滚动效果

摘要：实现步骤： 1、方法 methods: { scroll(){ let el = document.querySelector('.el-table__body-wrapper') el.addClassName = 'anim' setTimeout(()=>{ // console.log(th 阅读全文

posted @ 2023-12-05 16:06 周文豪阅读(705) 评论(0) 推荐(0) 编辑