如何在 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 應用於組件的根元素，並在源值更改時進行響應式更新。

---

如果您想在不使用類的情況下這樣做，那么就沒有辦法做到這一點，老實說，沒有真正的應用程序/理由強迫自己使用“樣式”屬性來做到這一點。