vue：在其定義中轉換一個道具

我有一個組件，它是一個像圖標一樣的東西的按鈕。我用這樣的：vue：在其定義中轉換一個道具

<ti-btn icon="..." @click.native="..."></ti-btn>

還，我可以通過一個道具這不是必須的，這道具是大小，這是一個數字。現在

<ti-btn icon="..." size="32" @click.native="..."></ti-btn>

，在我的組件的定義，起初，我寫道：

<template> 
    <i :class="icon" :style="{fontSize}"></i> 
</template> 
<script> 
export default { 
    props: ['icon', 'size'], 
    computed: { 
     fontSize() { 
      return this.size ? `${this.size}px` : DEFAULT_SIZE; 
     } 
    } 
} 
</script>

如果大小沒有傳下來，我設置的默認值。這是有效的，但根據良好的做法和vue風格指南，道具的定義應儘可能詳細。於是，我開始用這樣的方式：

props: { 
    icon: { 
     type: String, 
     required: true, 
     validate(value){ 
      //some kind of validation here 
      return value.includes('ti') 
     } 
    }, 
    size: { 
     type: Number, 
     required: false, 
     default: DEFAULT_SIZE 
    } 
}

大小道具接收數，但是，它必須返回一個字符串，其實DEFAULT_SIZE設置爲「24px的」，這是一個字符串，同樣，價值接收被轉換爲值值+「px」。所以，我的問題是，如何在不使用計算屬性的情況下在其自己的定義對象中轉換大小的道具？

來源

2017-10-05 adrian oviedo

我不認爲你可以：**道具只能作爲一個接口來規定可以在**中傳遞什麼參數/參數，以及接受的類型/形式是什麼。它不用於轉換傳入的數據。您將不得不依賴字符串插值，既可以作爲計算的道具，也可以作爲模板本身。我想說你應該把'DEFAULT_SIZE'設置爲一個一致性的數字，然後計算/內插實際的像素大小。 – Terry

計算出的屬性在這裏是正確的方法。 – Bert

正如Terry在評論中提到的那樣，不可能提供一種方法來轉換prop從prop定義本身傳遞給組件的值。

您可以讓size只是一個Number，然後添加'px'當你把它綁定到style：

<i :class="icon" :style="{ fontSize: `${size}px` }"></i>

這意味着你需要做DEFAULT_SIZE等於24。

如果您無法更改DEFAULT_SIZE的值。那麼你的fontSize計算屬性的例子是處理這個問題的正確方法。

來源

2017-10-05 15:57:43 thanksd

爲什麼downvote？ – thanksd

vue：在其定義中轉換一個道具

回答

相關問題