Question

我有一个组件，它是一个带有图标之类的东西的按钮。我这样用它：

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

另外，我可以传递一个不需要的 prop ，这个 prop 是 size ，这是一个数字。

<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”，这是一个 String ，同样，值receive将转换为 value +“px”。所以，我的问题是，如何在不使用计算属性的情况下，在自己的定义对象中转换大小prop？

Answer 1

正如Terry在评论中提到的那样，不可能提供一种方法来转换从道具定义本身传递给组件的prop的值。

您可以让size成为Number，然后在将'px'绑定到style时添加<i :class="icon" :style="{ fontSize: `${size}px` }"></i>：

DEFAULT_SIZE

这意味着您需要24等于DEFAULT_SIZE。

如果您无法更改fontSize的值。然后，Dockerfile zappa_settings.json requirements.txt project\ - manage.py - root\ - settings.py - wsgi.py - ...计算属性的示例是处理该问题的正确方法。

vue：在其定义

1 个答案: