vue：定義内の小道具を変換する

Question

アイコンのようなものを持つボタンであるコンポーネントがあります。私はこのようにそれを使用します。

<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は文字列である「24ピクセル」に設定されていますまた、受信値は値+ "px"に変換されます。ですから、私の質問は、計算されたプロパティを使用せずに、独自の定義オブジェクトでサイズpropをどのように変換できますか？

Answer 1

コメントで述べたように、propの値をpropの定義自体からコンポーネントに変換する方法を提供することはできません。

あなたはsizeがちょうどNumberなりましょう、そしてあなたはstyleにバインドするときに'px'を追加することができます。

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

これは、あなたが24からDEFAULT_SIZEが同じにする必要があると思います意味します。

---

DEFAULT_SIZEの値を変更できない場合は、次に、fontSizeの計算されたプロパティの例は、問題を処理する正しい方法です。