如何在 Vue 3 中不结合填充、边距 styles？

Question

如何在 vue 中不结合填充、边距 styles？ 填充是动态设置的。

:style="['padding-top: 3px', 'padding-right: 32px', 'padding-bottom: 3px', 'padding-left: 32px']"

生成：

<div style="padding: 3px 32px"></div>

需要：

<div style="padding-top: 3px; padding-right: 32px; padding-bottom: 3px; padding-left: 32px"></div>

Answer 1

你已经写到你的代码包含padding-left: 32px ，它与padding-right: 32px一起意味着生成的样式可以只使用简写padding: 0px 32px （0px 顶部和底部，32px 左右）但是你说你需要padding-left: 0px 。 您想要的与您编码的内容直接相反。 更改您的代码以匹配您想要的

Answer 2

您需要改用类，并且您需要为每个要分开的事物创建一个单独的 class。

我不知道您这样做的动机是什么，但我猜您正在创建某种可自定义的 UI 组件，用户可以在其中出于某种原因反应性地更改填充（我的最佳猜测）。

这是通过绑定style属性动态添加padding作为 css 变量的方法。

<template>
  <div :style="customVariables"></div>
</template>

<script setup>
//...
const pLeft = ref("32px");
const pRight = ref("20px");

const customVariables= computed(() => {
  return {
    "--p-left": pLeft.value,
    "--p-right": pRight.value,
}
//...
</script>

<style>
.p-left {
  padding-left: var(--p-left);
}

.p-right {
  padding-right: var(--p-right);
}
</style>

---

Vue 还支持 CSS 中v-bind() 。 文档

<script setup>
const paddings = {
  pLeft: '32px',
  pRight: '20px'
}
</script>

<template>
  <div class="p-left p-right">hello</div>
</template>

<style scoped>
.p-left {
 padding-left: v-bind("paddings.pLeft");
}

.p-right {
 padding-right: v-bind("paddings.pRight");
</style>

通过v-bind提供给 CSS 的值将是反应性的，如文档中所述：

实际值将编译为散列的 CSS 自定义属性，因此 CSS 仍然是 static。 自定义属性将通过内联 styles 应用于组件的根元素，并在源值更改时进行响应式更新。

---

如果您想在不使用类的情况下这样做，那么就没有办法做到这一点，老实说，没有真正的应用程序/理由强迫自己使用“样式”属性来做到这一点。