请问Vu3计算属性面对style内容如何简写？

Question

大佬们，有这样的一段代码,

<template>
  <div class="col" :style="colStyle">
    <slot></slot>
  </div>
</template>

<script lang='ts'>
import {computed, inject, ref} from 'vue';

export default {
  setup(props) {
    const gutter = ref(0);
    gutter.value = inject('gutter');

    const colStyle = computed(() => {
      return {
        paddingLeft: gutter.value / 2 + 'px',
        paddingRight: gutter.value / 2 + 'px'
      };
    });
    return {
      colStyle
    };
  }
};
</script>

我想问的是ts里面的paddingLeft和paddingRight能简写成一句嘛？比如 padding: xxx 这样的。我试了几种方法发现都不行诶。

const colStyle = computed(() => {
      return {
        paddingLeft: gutter.value / 2 + 'px',
        paddingRight: gutter.value / 2 + 'px'
      };
    });

求解惑，感谢

Answer 1

符合 padding 的语法就行

/* 一个值：上下左右 */
padding: 5px;
/* 两个值：上下 | 左右 */
padding: 5px 10px;
/* 三个值：上 | 左右 | 下 */
padding: 5px 10px 5px;
/* 四个值：上 | 右 | 下 | 左 */
padding: 5px 10px 5px 10px;

上下为 0 左右为 gutter.value / 2 + 'px' 简写为

const colStyle = computed(() => ({
  padding: `0 ${gutter.value / 2}px`
}));