Vue3----扩展 element Plug card

扩展 element Plug card

增加全屏,折叠操作项

核心代码

<template><div class="cc-card-component"><el-card v-if="state.isShow" :class="state.class" :bodyStyle="bodyStyle" :shadow="props.shadow"><template #header v-if="props.title"><slot name="leftIcon"></slot><span>{{ props.title }}</span><div class="component-header-icon"><template v-if="props.showFullScreen"><i v-if="state.isFullscreen" @click="toggleFullscreen" class="iconfont icon--fullscreen-exit"></i><i v-else @click="toggleFullscreen" class="iconfont icon--fullscreen"></i></template><i v-if="props.showClose" @click="handleBeforeClose" class="iconfont icon--close"></i><i v-if="props.showExpand" @click="toggleExpand" class="iconfont icon--arrow-right"></i></div></template><template v-for="(slot, slotName) in $slots" #[slotName]><slot :name="slotName"></slot></template></el-card></div>
</template><script setup lang="ts">
import { reactive } from 'vue'const props = defineProps({shadow: {type: String,default: 'hover', // always | never | hover},title: {type: String,default: '',},showFullScreen: {type: Boolean,default: false,},showExpand: {type: Boolean,default: true,},showClose: {type: Boolean,default: false,},bodyStyle: {type: String,default: '',},
})const state = reactive({isShow: true,isExpand: false,isFullscreen: false,class: '',
})const toggleFullscreen = () => {state.isFullscreen = !state.isFullscreenstate.class = state.isFullscreen ? 'max-fullscreen' : ''
}const toggleExpand = () => {state.isExpand = !state.isExpandstate.class = state.isExpand ? 'card-isExpand' : ''
}const handleBeforeClose = () => {state.isShow = false
}
</script><style lang="scss">
.cc-card-component {.el-card__header {padding: 0 10px;line-height: 40px;}.component-header-icon > i {display: inline-block;}.max-fullscreen {width: 100% !important;height: 100% !important;position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 10;transition: all 0.3s ease 0.1s;}.icon--arrow-right {cursor: pointer;transform: rotate(90deg);transform-origin: center center;transition: all 0.3s ease 0.1s;}.card-isExpand {.icon--arrow-right {transform: rotate(-90deg);}.el-card__body {display: none;}}
}.cc-card-component.left-card .el-card {overflow-y: auto;height: calc(100vh - 120px);
}
</style>

一般使用

<cc-card title="设置验证码">
...
</cc-card>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/877389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vmwar保姆级安装与配置

文章目录 一、官方下载1.访问VMware官方网站&#xff1a;2.选择产品&#xff1a;3.下载安装包&#xff1a; 二、VMware的安装1.运行安装程序2.选择安装位置3.选择安装选项4.完成安装 三、启动VMware Workstation Pro并配置虚拟机1.创建新的虚拟机&#xff1a;2.配置虚拟机硬件 …

【C#】.net core 6.0 webapi 使用core版本的NPOI的Excel读取数据以及保存数据

欢迎来到《小5讲堂》 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 背景读取并保存NPOI信息NPOI 插件介绍基本功能示例代码写入 Excel 文件…

前端JavaScript处理小数精度问题(最佳实践)

前言&#xff1a; 针对于小数精度问题&#xff0c;本次我们主要推荐两种方式&#xff0c;一种是简单的函数封装&#xff0c;一种是使用第三方库big.js。 方法一&#xff1a; 自封装函数搭配parseFloat和toFixed解决小数精度问题&#xff0c;仅适用于解决一般性小数精度问题&…

【云原生】Kubernetes----k8s免密使用harbor私有仓库

目录 引言 一、搭建Harbor仓库 &#xff08;一&#xff09;关闭防护 &#xff08;二&#xff09;安装docker &#xff08;三&#xff09;安装docker-compose &#xff08;四&#xff09;安装harbor-offline 1.获取安装包 2.修改配置文件 3.启动服务 4.登录仓库验证 二…

营销人看巴黎奥运会,看到了什么?

不同的人眼中的巴黎奥运会是不一样的&#xff1a;环保人士关注奥运场馆的绿色设计&#xff0c;以及赛事期间对可再生能源的利用&#xff1b;旅游博主用镜头捕捉巴黎奥运会每一个精彩瞬间&#xff1b;社会学家在巴黎奥运会看到多元文化的交流与融合…… 那么营销人在巴黎奥运会…

聚观早报 | OPPO Find X8系列电池曝光;小米15 Pro更多影像细节

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 7月30日消息 OPPO Find X8系列电池曝光 小米15 Pro更多影像细节 KeeTa平台已开放便利店入驻 比亚迪方程豹将扩大…

大模型面试之LoRA

LoRA的解释&#xff1a;一种高效微调预训练神经网络的方法 LoRA 解决的问题&#xff1a; &#x1f538; 2021年初&#xff0c;微软与OpenAI合作探索GPT-3的商业可行性。 &#x1f538; 发现仅仅通过提示&#xff08;prompting&#xff09;不足以完成生产任务&#xff0c;例如…

EfficientNet-v2-s图像分类训练(简洁版)

使用torchvision集成的efficientnet-v2-s模型&#xff0c;调用torchvision库中的Oxford IIIT Pet数据集&#xff0c;对模型进行训练。 若有修改要求&#xff0c;可以修改以下部分&#xff1a; train_dataset OxfordIIITPet(root./data, splittrainval, downloadTrue, transfo…

loguru日志模块:简化Python自动化测试的日志管理!

引言 日志是软件开发中的关键组成部分&#xff0c;为开发和测试人员提供了调试和监控应用程序的重要手段。loguru 是一个第三方的 Python 日志库&#xff0c;以其简洁的 API 和自动化的功能脱颖而出。本文将探讨为什么项目中需要日志&#xff0c;loguru 为何受到青睐&#xff…

【Python机器学习】决策树的构造——递归构建决策树

我们可以采用递归的原则处理数据集&#xff0c;递归结束的条件是&#xff1a;程序遍历完所有划分数据集的属性&#xff0c;或者每个分支下的所有实例都具有相同的分类。如果所有实例具有相同的分类&#xff0c;则得到一个叶子节点或者终止块。任何到达叶子节点的数据必然属于叶…

年化27.9%,最大回撤-13.6%的可转债因子策略,结合机器学习特征筛选(附python代码)

原创文章第603篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 我们重新更新了可转债的全量数据&#xff0c;包含全量已经退市的转债。 ——这是与股票市场不一样的地方&#xff0c;股票退市相对少&#xff0c;而转债本身就有退出周期。 因此&…

x264 环路滤波原理系列:x264_frame_deblock_row 函数

x264_frame_deblock_row 函数 功能:该函数对视频帧中的一行宏块(Macroblock)进行去块滤波处理。去块滤波是视频编码中常用的一种技术,用于减少宏块之间的边界不连续性,从而提高视频质量。 函数关系与原理图: 函数原理流程梳理: 局部变量初始化;for 循环处理每个宏块:…

如何借助低代码 + BI 实现国央企数智化转型?

概要 在当前的软件开发时代&#xff0c;许多企业面临着核心技术缺失、专业人才短缺以及产品能力单一等问题&#xff0c;迫切需要加强技术实力&#xff0c;补充和扩展原有的业务和行业能力。将技术与业务需求深度结合&#xff0c;构建适应时代需求的技术业务模式&#xff0c;成…

容易发表的医学SCI期刊推荐,附投稿经验

常笑医学整理了适合医学生、医务工作者进行论文投稿的医学SCI期刊&#xff0c;附期刊详细参数与真实投稿经验&#xff0c;供大家参考。 1、ULTRASOUND IN MEDICINE AND BIOLOGY&#xff08;超声医学和生物学&#xff09; &#xff08;详细投稿信息请点击刊物名称查看&#xff…

MATLAB被360误杀的解决方案

前面被误杀&#xff0c;今天又被误杀。 前面误杀结果是缺少文件&#xff0c;重装MATLAB也不行。 结果重装了操作系统。 这次&#xff0c;看到了提示额外小心。 当时备份了“病毒”文件&#xff0c;结果备份的也被杀了。 解铃还须系铃人 在360安全卫士里面恢复&#xff0c;步骤…

数据库管理-第225期 Oracle DB 23.5新特性一览(20240730)

数据库管理225期 2024-07-30 数据库管理-第225期 Oracle DB 23.5新特性一览&#xff08;20240730&#xff09;1 二进制向量维度格式2 RAC上的复制HNSW向量索引3 JSON集合4 JSON_ID SQL函数5 优化的通过网络对NVMe设备的Oracle的原生访问6 DBCA支持PMEM存储7 DBCA支持标准版高可…

PPT图表制作

一、表格的底纹 插入→表格→绘制表格→表设计→选择单元格→底纹 二、把一张图片做成九宫格 1. 把一张图片画成九宫格&#xff08;处理过后还是一张图片&#xff0c;但是有框线&#xff09; 绘制33表格→插入图片→全选表格单元格→右键设置形状格式→填充→图片或纹理填充…

前后端分离开发遵循接口规范-YAPI

目前&#xff0c;网站主流开发方式是前后端分离。因此前后端必须遵循一套统一的规范&#xff0c;才能保证前后端进行正常的数据&#xff08;JSON数据格式&#xff09;请求、影响&#xff0c;这套规范即是 YAPI. 产品经理撰写原型&#xff1b; 前端或后端撰写接口文档。 YAPI…

一座山城如何打造教育“一张网”

教育新基建作为国家新基建的重要组成部分,是实现教育高质量发展的基础支撑。2021年,教育部等六部门印发相关部署意见时明确提出:到2025年,基本形成结构优化、集约高效、安全可靠的教育新型基础设施体系。 在此宏观导向下,山城重庆积极响应,立足本地情况,开启了其特色化的探索之…

K8s对接Ceph-csi配置手册(附带踩坑记录以及解决方法)

目录 Ceph CSI (Container Storage Interface) CSI 的作用&#xff1a; 前提配置 版本信息 获取Ceph认证信息 获取Ceph集群Monitor信息 下载并部署Ceph CSI 如果此时全部显示错误&#xff0c;那就代表镜像拉取错误&#xff0c;此时执行的yaml脚本&#xff0c;通过yaml脚…