element-plus的el-space标签的使用

el-space标签可以很方便的设置标签间距和分隔符,对齐方式,是否拆行等属性。

<script setup lang="ts">
import { onMounted, ref } from 'vue';
    
    const size=ref(30)
 
</script>

    
<template>

       <el-space wrap :size="size" spacer="" alignment="flex-end" fill="true">
        <div class="container" v-for="i in 3" :key="i">
            <p v-for="item in 3" class="item" :key="item">
                {{ 'i am'+ item  }}
            </p>
        </div>
       </el-space>
 
        
            
  


</template>

<style scoped>
    .container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }

    .item{
      background-color: lightskyblue;
      margin:10px 10px;
      text-align: center;
      border: 1px solid black;
    }

</style>

size:决定子元素间距大小,默认有三个规格small,default,large,还可设置具体的数值。
wrap:是否拆行,
fill:子元素是否自动填充父容器
在这里插入图片描述
https://element-plus.org/zh-CN/component/space.html

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

亿达中国武汉园区入选“武汉市科技金融工作站”及“武汉市线下首贷服务站”

近日&#xff0c;武汉市2024科技金融早春行活动在深交所湖北资本市场培育基地举行。会上&#xff0c;第四批武汉市科技金融工作站试点单位名单及第五批武汉地区金融系统线下首贷服务站名单正式公布&#xff0c;武汉软件新城成功入选上述两个名单。 为缓解科技型企业融资难题&a…

idea开发工具清除Git凭证(含Git凭证管理策略)

前言 网上很多人出现这个问题&#xff0c;也有很多文章或博客来说明这个问题&#xff0c;但是几乎都没有说到点子上&#xff0c;全网几乎都说清除credential.helper配置或者清空windows凭证管理器&#xff0c;还有一些文章说清除IDEA缓存&#xff0c;其实都是不对的。 creden…

MyBatis 的注解式开发

1. MyBatis 的注解式开发 文章目录 1. MyBatis 的注解式开发2. 准备工作3. Insert 插入/添加4. Delete 删除5. Update 更新/修改6. Select 查询7. 总结&#xff1a;8. 最后&#xff1a; MyBatis 中也提供了注解式开发方式&#xff0c;采用注解可以减少Sql映射文件的配置。 当然…

构建 LLM 应用为什么需要文本加载器,langchain 中如何使用文本加载器?

构建 LLM 应用为什么需要文本加载器&#xff0c;langchain 中如何使用文本加载器&#xff1f; 上一篇文章中 [使用langchain搭建本地知识库系统(新) 我们构建一个 RAG 的本地应用&#xff0c;我们使用到了网页的文本加载器用来动态获取网页的数据。 在不同的应用场景中需要使…

定点计算与浮点计算在MCU上的较量:以电机控制系统算法实现为例

在嵌入式系统尤其是电机控制算法的实现过程中&#xff0c;定点计算与浮点计算的选取始终是一个重要议题。电机控制系统对实时性和计算效率有着极高要求&#xff0c;而MCU&#xff08;微控制器&#xff09;作为其核心处理器&#xff0c;其计算模式的选择直接影响整个系统的性能。…

如何定位检查不到的元素

光标离开输入框时&#xff0c;输入框立刻消失&#xff0c;导致无法查看该元素的html标签属性&#xff0c;如何定位这种元素呢&#xff1f;有两种方法&#xff0c;一种是通过事件监听器&#xff0c;另一种是通过网络接口抓包 1、首先定位到搜索按钮 这个搜索的按钮&#xff0c;当…

统计信号处理基础 习题解答10-14

题目&#xff1a; 观测到数据 其中是已知的&#xff0c;是方差为的WGN&#xff0c;且和独立&#xff0c;求的MMSE估计量以及最小贝叶斯MSE。 解答&#xff1a; 观测到的数据写成矢量形式&#xff1a; 其中&#xff1a; 根据题目条件&#xff0c;符合定理10.3&#xff0c;因此…

Qt项目天气预报(1) - ui界面搭建

ui中部 效果演示 ui效果 显示效果 控件列表 配合右图查看 居中对齐-label 设置label居中对齐(别傻傻的空格对齐了) 间距配置 widget03 外围的widget对象: 包含label 和 widget0301&#xff0c;如下图 widget0301 内围的widget对象&#xff0c;如下图 样式表 widget03 …

UFS协议入门-UPIU帧结构

写在前面:本文参考UFS jedec3.1,本文思维导图如下 1. UPIU整体结构 UPIU的结构由帧头和数据两个构成,其中帧头Header为12B,数据data最小为20B,UPIU最小为32B,最大为6500B。如下图所示。 2. UPIU包头结构 对于帧头,固定结构如下图所示,后面分贝介绍每个位的含义。 2.1…

leetcode-09-[232]用栈实现队列[225]用队列实现栈[20]有效的括号[1047]删除字符串中的所有相邻重复项

重点&#xff1a; 栈和队列 Java中 栈不建议用stack来实现 建议用 ArrayDeque和Linkedlist来实现 队列建议用ArrayDeque和Linkedlist来实现 两者效率比较&#xff1a; java - Why is ArrayDeque better than LinkedList - Stack Overflow 基于Linkedlist是链表等&#xff0c;除…

前端学习CSS之神奇的块浮动

在盒子模型的基础上就可以对网页进行设计 不知道盒子模型的可以看前面关于盒子模型的内容 而普通的网页设计具有一定的原始规律,这个原始规律就是文档流 文档流 标签在网页二维平面内默认的一种排序方式,块级标签不管怎么设置都会占一行,而同一行不能放置两个块级标签 行级…

【Python系列】Python 中的日期和时间处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

物联网模型

1.1 流模型源码 到OneNote Makefile出错:build/output/paho_c_version 先make clean移除bulid/output内的动态库,再make就会看到出错,将build/output的动态库文件命名以 . so结束,再次make就不会出错了。在sudo make install 安装在usr/local/lib中 修改main.c文件之后,…

PyTorch C++扩展用于AMD GPU

PyTorch C Extension on AMD GPU — ROCm Blogs 本文演示了如何使用PyTorch C扩展&#xff0c;并通过示例讨论了它相对于常规PyTorch模块的优势。实验在AMD GPU和ROCm 5.7.0软件上进行。有关支持的GPU和操作系统的更多信息&#xff0c;请参阅系统要求&#xff08;Linux&#xf…

将ZED获取的视频格式svo转换成其他格式

引言 svo视频格式是ZED的专属格式,实际应用中我们需要将该格式转化成其他可读的文件格式。 1 安装ZED-SDK 双击打开ZED的视频转化执行文件 "C:\Program Files (x86)\ZED SDK\samples\bin\ZED_SVO_Export.exe" 打开如下所示: 根据上述指示执行转换命令,官网也有…

unity跑酷游戏(源码)

包括&#xff1a;触发机关&#xff0c; 碰到障碍物游戏时间暂停&#xff08;挂载到障碍物上&#xff09; 上面需要有碰撞体 游戏物体上需要有标签 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Barrier : MonoBehaviour {p…

【C++进阶】模板进阶与仿函数:C++编程中的泛型与函数式编程思想

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;栈和队列相关知识 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀模板进阶 &#x1f9e9;<&…

IDEA 配置方法模板无法获取到参数值和返回值(methodParameters()、methodReturnType()获取不到值)

问题现象&#xff1a; 我在 review 同事代码时候&#xff0c;发现方法上有注释&#xff0c;但是注释上又没有方法参数和返回值&#xff0c;这不是IDEA 配置了方法模板就可以自动生成的嘛&#xff0c;我出于好奇去问了下该同事是怎么回事&#xff0c;该同事有点不好意思的说我配…

sslyze一键检查服务器检查服务器的 SSL/TLS 安全性(KALI工具系列二十五)

目录 1、KALI LINUX 简介 2、sslyze工具简介 3、信息收集 3.1 目标主机IP&#xff08;服务器&#xff09; 3.2 KALI的IP 4、操作示例 4.1 扫描主机和端口 4.2 批量扫描 4.3 插件扫描 4.4 输出结果 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功能强大、多才多艺…

pyinstall打包exe报错

1- 报错 Please install pywin32-ctypes. 前提&#xff1a;python安装路径中已经安装了pywin32-ctypes。 运行pyinstaller报错 PyInstaller cannot check for assembly dependencies. Please install pywin32-ctypes. 解决思路&#xff1a; python安装路径下Lib\site-packa…