![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
不说别的就是很菜
这个作者很懒,什么都没留下…
展开
-
vue实现一个popover悬浮组件(简易版)
效果图实现思路定义组件,监听元素的mouseenter和mouseleave还有组件的mouseenter和mouseleave事件由于有滚动等交互需求,所以加一个轮询,监听鼠标对于元素和popover组件的交互状态实现代码<!-- * @Fileoverview: 保护措施详情 * @Description: 仪表盘-数据流图-保护措施详情--><template> <div class="popover"> <div原创 2022-05-27 14:34:36 · 3675 阅读 · 6 评论 -
vue+原生js+element-ui实现轮播列表动画(无限轮播)
效果展示实现思路用element-ui中的el-row和el-col来构建列表,若无element-ui,也可用类似布局组件或直接用div元素实现将滚动区域封装,使用绝对定位与相对定位的方式,并将超出滚动区域部分hidden隐藏下述业务代码有每分钟刷新一次列表的需求,所以用两个interval,若纯轮播则一个interval即可通过改变子元素相对于父元素的top值,并设置transition: all 1s;即可出现如图所示效果当轮播结束后再次首尾相连,即可实现无限轮播关键代码流畅过原创 2021-10-28 14:17:36 · 4086 阅读 · 0 评论 -
vue封装一个大屏加载动画
效果展示组件代码<template> <div class="spinner"> <div v-for="item in 5" :key="item" :class="rectName + ' rect rect' + item" ></div> </div></template><script>export default { name: 'Lo原创 2021-10-28 11:14:37 · 585 阅读 · 0 评论 -
解决flex子元素宽度失效问题
问题详情解决方法子元素中添加属性//子元素中添加属性flex-shrink: 0;最终效果原创 2021-10-27 18:00:18 · 190 阅读 · 0 评论 -
解决el-tree被元素包裹后节点高亮显示不完全方案
问题详情如下图所示,将树形图包裹在panel中,超出最大宽高则横向或纵向滚动,但高亮设置的是当前选中节点的content,设置宽度100%,就会造成下图情况。解决方法覆盖原有高亮样式,给所有节点设置class为row-context,并设置row-context的样式,直接对高亮下的该容器设置样式,造成伪高亮效果(非组件自带高亮效果).el-tree-node.is-current > .el-tree-node__content { background: #fff; colo原创 2021-10-27 17:57:02 · 655 阅读 · 0 评论 -
全局修改滚动条样式
效果代码::-webkit-scrollbar { height:8px; width: 8px; }::-webkit-scrollbar-thumb { background-color: #eaecf1; border-radius: 3px;}原创 2021-01-18 16:35:41 · 289 阅读 · 0 评论 -
vue-cli+elment-ui 标签页动态加载组件(el-tabs)
用到的组件el-tabs标签页,<component>标签,用:is切换加载功能动态切换标签页并显示不同组件内容效果图标题实现代码//.vue单文件<template> <div :class="bemCss('tabs')"> <el-tabs v-model="activeName" @tab-click="handleCl...原创 2020-04-03 00:00:02 · 4131 阅读 · 0 评论 -
【记录】vue-cli+element-ui 制作一个侧边栏组件(抽屉Drawer)
用到的组件el-drawer抽屉、el-button按钮测试还用到了输入框等组件功能1.自由添加按钮,并可使按钮居中2.抽屉里的内容由<slot>插入,用的具名插槽3.鼠标悬停在按钮时出现文字4.可指定侧边栏距离窗口最右侧的距离原创 2020-04-02 23:36:47 · 6538 阅读 · 0 评论 -
css实现div垂直居中(绝对定位+translate)
用vue写侧边栏组件的时候碰到了按钮组无法自适应垂直居中的问题,想要单纯用css来实现,看到了很多方法,多次尝试下还是以下这个方法最简便好用,特此记录。div{ position:fixed; right:7px;//这里原本是内联样式,为方便理解写上 top: 50%; transform: translate(0, -50%); }效果图:这里的右...原创 2020-04-01 20:22:17 · 399 阅读 · 0 评论