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

<template>
  <el-row :gutter="dynamicGutter">
    <el-col :span="12"><div class="grid-content bg-purple">左侧内容</div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light">右侧内容</div></el-col>
  </el-row>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
// 假设基础间距
const baseGutter = 20;
// 假设间距增量
const gutterIncrement = 10;
 
// 动态计算间距
const dynamicGutter = computed(() => baseGutter + gutterIncrement);
</script>
 
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

这个例子中，我们使用了Vue 3的 <script setup> 语法糖来简化组件的编写。dynamicGutter 是一个计算属性，根据基础间距 baseGutter 和间距增量 gutterIncrement 动态计算出最终的间距值。这样，当你需要调整整个布局的间距时，只需修改 baseGutter 或 gutterIncrement 即可。