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

目录

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

1. 动态间距调整

1.1 效果演示

  • 并行效果
  • 并列效果

1.2 代码演示

html 复制代码
<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> 等等。

html 复制代码
<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>标签,如:

html 复制代码
    <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~

感谢观看~~!

相关推荐
你的人类朋友32 分钟前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao1 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子1 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...1 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪1 小时前
函数组件和异步组件
前端·javascript·面试
淮北4942 小时前
html + css +js
开发语言·前端·javascript·css·html
麦麦大数据2 小时前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
你的人类朋友2 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei2 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发
黄毛火烧雪下2 小时前
高效的项目构建和优化之前端构建工具
前端