vue2组件封装实战系列之space组件

组件之 GfSpace

多个同类型的内容比如 div/span/button/li 等,实现水平、垂直方向的均匀布局的功能

效果预览

在这里插入图片描述

属性

参数类型说明可选值默认值
flexBoolean是否 flex 布局true/falsefalse
gapNumber内容间距-10
directionString内容排列方向row/columnrow

代码实现

这里我们使用了 function 组件来实现 space 组件,比较简洁灵活

<script>
export default {name: "GfSpace",props: {flex: Boolean,gap: {type: Number,default: 10,},direction: {type: String,default: "row",},},computed: {style() {return {display: this.flex ? "flex" : "block",flexDirection: this.direction,gap: `${this.gap}px`,};},},render(h) {return <div style={this.style}>{this.$slots.default}</div>;},
};
</script>

样式文件可以参考elementui的实现,后面会写一篇文章详细分析组件库的样式怎么去写的文章,敬请关注

使用

借用上篇文章 tag 标签,来测试下平均布局的效果

<Gf-space flex gap="10"><gf-tagclosable@close="handleTagClose"v-for="item in tags":key="item.name":type="item.type">{{ item.name }}</gf-tag>
</Gf-space>
<Gf-space flex gap="10" direction="column"><gf-tagclosableeffect="dark"@close="handleTagClose"v-for="item in tags":key="item.name":type="item.type">{{ item.name }}</gf-tag>
</Gf-space>

这样,我们就实现了自己的 space 组件

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

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

相关文章

机器学习扩展包MLXtend绘制分类模型决策边界

公众号&#xff1a;尤而小屋编辑&#xff1a;Peter作者&#xff1a;Peter 大家好&#xff0c;我是Peter~ 继续更新机器学习扩展包MLxtend的文章。本文介绍如何使用MLxtend来绘制与分类模型相关的决策边界decision_regions。 导入库 导入相关用于数据处理和建模的库&#xff…

Debezium日常分享系列之:Debezium 2.7.0.Beta1发布

Debezium日常分享系列之&#xff1a;Debezium 2.7.0.Beta1发布 一、重大变化1.快照工件2.Oracle 二、新功能和改进1.在 z/OS 上支持 Db22.NATS JetStream 接收器身份验证改进3.JDBC 接收器 MariaDB 方言支持4.JMX 导出器添加到 Debezium 服务器5.使用 Debezium Operator 启用 J…

技术对比:eMMC、SD NAND与NOR Flash存储特性详解

在电子技术迅猛前进的今天&#xff0c;存储技术成为了整个行业发展的基石。SD NAND、eMMC和NOR Flash&#xff0c;这三种存储技术各自以其独特的架构和特性&#xff0c;满足了多样化的存储需求。让我们来看看它们之间的一些关键对比&#xff1a; 1. 存储单元架构&#xff1a; S…

Perfectly Clear WorkBench v4 解锁版安装教程 (图像修复增强工具)

前言 Perfectly Clear WorkBench 是一款图像修复工具&#xff0c;可以帮助用户对自己的图片素材进行修复&#xff0c;很多的照片因为拍摄问题&#xff0c;或者设备限制&#xff0c;会导致拍摄效果不好&#xff0c;使用这款软件可以进行一定程度的修复&#xff0c;当拍摄时亮度…

Ant Design+react 表单只读

表单禁用&#xff0c;样式不好看&#xff0c;不符合甲方标准&#xff0c;看了一下文档&#xff0c;select、radio等都不支持只读状态。 解决方法&#xff1a; 利用css3的point-events属性&#xff0c;设置为none 在查看弹窗时&#xff0c;传入一个变量&#xff0c;当变量为true…

了解光隔离器和光耦合器:主要区别和应用

光隔离器和光耦合器是现代电子电路中必不可少的组件&#xff0c;提供一项关键功能&#xff1a;电路不同部分之间的电气隔离。虽然它们在许多方面相似且经常互换使用&#xff0c;但两者之间存在明显差异&#xff0c;主要基于它们的工作电压能力。本文深入探讨了这些组件的基础知…

最新23道vue2+vue3面试题带答案汇总

文章目录 MVVM与MVC的区别Vue 2与Vue 3的主要区别Vue 3的优势Vue 2 是如何实现数据绑定的&#xff1f;Vue 2 中的 v-model 是如何工作的&#xff1f;Vue 2 的生命周期钩子有哪些&#xff1f;Vue 3 使用了什么技术来实现响应式系统&#xff1f;Vue 3 中的 Composition API 带来了…

windows系统内查看电脑SN号

cmd命令行模式下&#xff0c;输入代码wmic bios get serialnumber可以查看到当前计算机的SN号码

探索网络回溯分析系统与业务性能监控:提升IT运维效率的关键

目录 一、网络回溯分析系统的作用与优势 二、业务性能监控的重要性 三、提升网络性能的技巧与建议 结论 在现代企业中&#xff0c;网络的稳定性和业务的连续性至关重要。为了确保网络性能最佳化和快速解决故障&#xff0c;网络回溯分析系统和业务性能监控工具成为了IT运维的…

Python爬取与可视化-豆瓣电影数据

引言 在数据科学的学习过程中&#xff0c;数据获取与数据可视化是两项重要的技能。本文将展示如何通过Python爬取豆瓣电影Top250的电影数据&#xff0c;并将这些数据存储到数据库中&#xff0c;随后进行数据分析和可视化展示。这个项目涵盖了从数据抓取、存储到数据可视化的整个…

记一次Linux下Docker镜像服务器磁盘空间清理

我们开发环境Jenkins构建项目时报服务器磁盘空间不足&#xff0c;导致项目自动化构建部署失败&#xff0c; Docker镜像服务器磁盘空间清理我们做了多次了&#xff0c;之前在清理Docker镜像服务器时走了不少弯路&#xff0c;查了不少Docker镜像服务器空间清理&#xff0c;都大同…

循环嵌套语句的实际应用(2)

3199&#xff1a;【例33.2】 两位数 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4565 通过数: 2573 【题目描述】 现在有一个两位数&#xff0c;这个两位数十位上的数与个位上的数和为 &#x1d44e; &#xff0c;十位上的数与个位上的数差&#xff08;大减小…

JAVA网络编程,反射及注解知识总结

文章目录 网络编程软件架构三要素IP端口号协议UDP协议发送数据接收数据三种通信方式 TCP协议客户端服务器端三次握手四次挥手 反射获取字节码文件获取构造方法获取成员变量获取成员方法反射的作用 动态代理注解作用格式使用位置注解的原理常见注解元注解自定义注解解析注解 网络…

每台云服务器最多可支持几块硬盘

每台云服务器最多可支持的硬盘数量取决于不同的因素&#xff0c;包括服务器的技术规格、硬盘的类型和尺寸、服务器架构和供应商的政策等。 在一般情况下&#xff0c;大部分云服务器都有多个硬盘插槽&#xff0c;以支持并行连接多个硬盘。现代服务器通常提供SATA、SAS和NVMe等接…

自然语言处理(NLP)—— 语言检测器

1. 文章概述 1.1 目的 在本篇文章中&#xff0c;我们将构建一个语言检测器&#xff0c;这是一个能够识别文本语言的简单分类器。这是一个能够识别文本是用哪种语言写的程序。想象一下&#xff0c;你给这个程序一段文字&#xff0c;它就能告诉你这是英语、法语还是其他语言。 …

MySQL实体类框架

实现mysql数据库的增删改查功能 import com.mchange.v2.collection.MapEntry; import lombok.Data; import org.junit.jupiter.api.Test;import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.lang.reflect.*; import java.sql.*; …

返工 PCB 电路板的 6 个技巧

需要解决设计中的问题&#xff0c;例如&#xff1a; 您的原理图符号与 PCB 封装不一致&#xff08;这可能导致信号发送到错误的引脚&#xff09; 您选择了错误的电阻值。 你选择了错误的IC 您忘记在两个引脚之间进行必要的连接&#xff08;并且需要添加跳线&#xff09; 由…

Moonshot AI API使用(1)-获取MOONSHOT_API_KEY

Moonshot AI 开放平台 用户注册&#xff0c;使用微信扫码登录 把这个key复制下来

用你熟悉的语言就能开发智能合约,Vara Network 以 WASM 解锁未来应用创新

Vara Network 自推出以来&#xff0c;凭借其基于 Gear Protocol 的独特架构和强大的开发工具&#xff0c;为开发者提供了一个高效、安全的智能合约构建平台。Vara Network 通过采用先进的 Actor 模型、持久内存概念和 WebAssembly 技术&#xff0c;实现了异步消息处理、并行计算…

OpenFeign --学习笔记

什么是OpenFeign&#xff1f; OpenFeign可以想象成一座连接客户端&#xff08;服务器&#xff09;和服务器之间的桥梁。在微服务架构中&#xff0c;各个服务之间像小岛屿一样分布在网络上&#xff0c;它们需要相互通信才能协同工作。但是&#xff0c;这些岛屿之间并没有现成的…