【VUE】Vue3+Element Plus动态间距处理

目录

  • 1. 动态间距调整
    • 1.1 效果演示
    • 1.2 代码演示
  • 2. 固定间距
    • 2.1 效果演示
    • 2.2 代码演示
  • 其他情况


1. 动态间距调整

1.1 效果演示

  • 并行效果
    在这里插入图片描述
  • 并列效果
    在这里插入图片描述

1.2 代码演示

<template><div style="margin-bottom: 15px">direction:<el-radio v-model="direction" value="horizontal">horizontal</el-radio><el-radio v-model="direction" value="vertical">vertical</el-radio></div><div style="margin-bottom: 15px">fillRatio:<el-slider v-model="fillRatio" /></div><el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" /></el-space></template>
<script setup>
import { ref } from 'vue'const direction = ref('horizontal')
const fillRatio = ref(10)
</script>
<style lang="scss" scoped></style>

2. 固定间距

2.1 效果演示

在这里插入图片描述

2.2 代码演示

其实就是去掉了那个调整标签<el-slider> 等等。

<template> <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" /></el-space></template>
<script setup>
import { ref } from 'vue'const direction = ref('horizontal')
const fillRatio = ref(10)		//重点关注这个值:固定参数
</script>
<style lang="scss" scoped></style>

其他情况

有可能因为内容没占满整行而导致,width: 100% 平铺到整行的情况。如下所示:

在这里插入图片描述
解决方案就是:添加<div></div>标签,如:

    <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" />测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" /><div>测试输入框间隔距离:<el-input v-model="input" style="width: 240px;margin-right: 100px ;" placeholder="Please input" /></div></el-space>

效果:
在这里插入图片描述
这样就好啦~
需要调整的细节在调整一下就ok~
感谢观看~~!

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

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

相关文章

【实用工具】使用飞书机器人监控工程日志

1.创建一个飞书群聊&#xff0c;设置-->群机器人-->添加机器人-->自定义机器人-->修改机器人名称-->添加 2.复制webhook地址 3.编写日志请求代码 import logging import requests import json import os from datetime import datetime import time import sub…

云平台和云原生

目录 1.0 云平台 1.1.0 私有云、公有云、混合云 1.1.1 私有云 1.1.2 公有云 1.1.3 混合云 1.2 常见云管理平台 1.3 云管理的好处 1.3.1 多云的统一管理 1.3.2 跨云资源调度和编排需要 1.3.3 实现多云治理 1.3.4 多云的统一监控和运维 1.3.5 统一成本分析和优化 1.…

【CSS】MDN

一、CSS构建 1.1 CSS选择器 1.1.1 元素选择器 标签不区分大小写 示例&#xff1a; span {background-color: yellow; }1.1.2 通用选择器 选择文档中所有内容&#xff0c;重置样式表中使用较多 鉴于div:first-child&#xff08;代表所有的div元素&#xff0c;并且是第一个…

【目标检测】-入门知识

1、回归与分类问题 回归问题是指给定输入变量(特征)和一个连续的输出变量(标签),建立一个函数来预测输出变量的值。换句话说,回归问题的目标是预测一个连续的输出值,例如预测房价、股票价格、销售额等。回归问题通常使用回归分析技术,例如线性回归、多项式回归、决策树…

小程序 SSL证书的重要性与选择

随着移动互联网的迅猛发展&#xff0c;微信小程序已成为众多企业和开发者连接用户的重要平台。然而&#xff0c;随之而来的是对数据安全和隐私保护的严峻挑战。在这一背景下&#xff0c;SSL证书的作用变得尤为重要&#xff0c;它为小程序提供了一个安全的通信管道&#xff0c;确…

ChromeDriver / Selenium-server

一、简介 ChromeDriver 是一个 WebDriver 的实现&#xff0c;专门用于自动化控制 Google Chrome 浏览器。以下是关于 ChromeDriver 的详细说明&#xff1a; 定义与作用&#xff1a; ChromeDriver 是一个独立的服务器程序&#xff0c;作为客户端库与 Google Chrome 浏览…

R语言数据可视化:ggplot2绘图系统

ggpolt2绘图系统被称为R语言中最高大上的绘图系统&#xff0c;使用ggplot2绘图系统绘图就像是在使用语法创造句子一样&#xff0c;把数据映射到几何客体的美学属性上。因此使用ggplot2绘图系统的核心函数ggplot来绘图必须具备三个条件&#xff0c;数据data&#xff0c;美学属性…

41---音频电路设计

视频链接 音频电路设计01_哔哩哔哩_bilibili 音频电路设计 1、音频基本介绍 1.1、设备 1.1.1、音频接口 型号&#xff1a;ABA-JAK-038-K44 电脑主机上的音频输出插口&#xff0c;一个是粉色的&#xff0c;用来连接麦克风或话筒&#xff0c;一个是绿色的&#xff0c;用来连…

智能工业电脑在智慧电力中实现全程实时监控与调控

可视化编程工业电脑在化工、石油、电力等行业过程控制领域扮演着越来越重要的角色。这些基于ARM架构设计的嵌入式工业计算机凭借其高性能、低功耗以及出色的实时处理能力&#xff0c;有效提升了各行业生产过程的安全性和效率。 钡铼技术ARMxy系列采用嵌入式Linux 系统开发的产品…

YUDAO源码中的正序倒序表格ElmentUI的实现,与后端的配合?

前端展示和实现&#xff1a; 1. elmentUI表格的定义 2. JS请求参数改造 <!-- 列表 --><el-table v-loading"loading" :data"list" sort-change"handleSortChange"><el-table-column label"Expiry Date" prop"…

Vue第三方组件使用

文章目录 一、组件传值二、elementui组件使用三、fontawesome图标 一、组件传值 1、父组件与孩子组件传值 在孩子组件中定义props属性&#xff0c;里面定义好用于接收父亲数据的变量。 孩子组件是Movie Movie.vue。注意看在Movie组件里面有props对象中的title和rating属性用…

flutter ListView在TabBar在Column在SingleChildScrollView

flutter ListView在TabBar在Column在SingleChildScrollView _大数据知识库 我得到的异常为A RenderBox object must have an explicit size before it can be hit-tested. Make sure that the RenderBox in question sets its size during layout. 解决办法&#xff1a;添加w…

LMDeploy 推理部署工具

一. 大模型部署面临的挑战 1. 计算量巨大 大模型参数量巨大&#xff0c;前向推理时需要进行大量计算。 2. 内存开销巨大 大模型在推理过程中&#xff0c;以FP16为例&#xff0c;20B模型仅加载参数就需40G显存&#xff0c;175B模型更是需要350G显存。同时在推理过程中&#xff…

项目中使用消息队列改进——基于RabbitMQ

使用 RabbitMQ 实现消息队列 导入依赖 <!--AMQP依赖&#xff0c;包含RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> <!--防止消息转…

Jmeter如何录制https的系统性能脚本

在使用jmeter录制性能测试脚本时&#xff0c;会遇到网站为http和https两种情况&#xff0c;略有不同&#xff0c;下面介绍一下&#xff1a; 1.Jmeter录制http 1.测试计划–>添加–>非测试元件–>HTTP(S)测试脚本记录器 【HTTP(S)测试脚本记录器】有的版本叫【HTTP代…

基于ES-EKF的LiDAR/GNSS/IMU传感器融合轨迹估计(附项目源码)

基于改进EKF的LiDAR/GNSS/IMU传感器融合轨迹估计&#xff08;附项目源码&#xff09; 算法概述PredictionCorrectionES-EKF算法融合算法实现轨迹估计实验结果 最近在研究传感器融合&#xff0c;看到一个很好的开源项目&#xff0c;适合小白学习&#xff0c;为以后做传感器融合、…

.net 6 集成NLog

.net 6 webapi项目集成NLog 上代码step 1 添加nugetstep 2 添加支持step 3 添加配置文件 结束 上代码 step 1 添加nuget 添加nuget 包 Roc step 2 添加支持 修改program.cs var builder WebApplication.CreateBuilder(args); // 添加NLog日志支持 builder.AddRocNLog();ste…

贪心算法|860.柠檬水找零

力扣题目链接 class Solution { public:bool lemonadeChange(vector<int>& bills) {int five 0, ten 0, twenty 0;for (int bill : bills) {// 情况一if (bill 5) five;// 情况二if (bill 10) {if (five < 0) return false;ten;five--;}// 情况三if (bill …

Lvs+keepalived+nginx搭建高可用负载均衡集群,爱了爱了

检查 最后启动nginx服务 135配置虚拟网卡 检查 最后启动nginx服务 Nginx.conf配置如下 关闭132的keepalived服务后 浏览器能正常访问 132在keepalived配置中加入脚本 脚本内容 132清除ipvsadm中的规则,vip不见 133收到vip 自我介绍一下&#xff0c;小编13年上海交大毕业&…

使用idea运行程序,发现控制台的中文出现乱码

修改UTF-8发现没有效果&#xff0c;寻找.idea文件夹的encodings.xml文件&#xff0c;将里面的UTF-8全部变成GBK.