Question

我试图在我的组件中使用一些道具，这些道具根据传递给它的值显示不同的v图标和大小。

但是，当我尝试使用一种道具来设置图标大小时，图标的样式完全不变

此处提供代码：

<template>
    <div v-if="this.name === 'someName'">
        <v-icon :style="style" >some-icon-name</v-icon>
    </div>
    <div v-else>
        <v-icon :style="style"  >some-other-icon-name</v-icon>
    </div>
</template>

export default {

  computed: {
    style () {
      return 'size: ' + this.iconSize + ';'
    }
  },
  props: {
    iconSize: {
        type: Number,
        required: false
    },
    name : {
        type: String,
        required: false
    },
  },

  data () {
    return {
      //
    }
  }
}
</script>

使用组件时，我仅使用v-bind传递道具：

<appIcons v-bind:iconSize="90" v-name="someName" />

Answer 1

您似乎在混淆两件事。 v-icon有一个名为size的道具，而style是用于设置自定义CSS样式的Vue机制。在这种情况下都可以使用。您无法设置style中的size，这是没有意义的，因为size不是CSS属性。

我想你想要的是

<v-icon :size="iconSize" >some-icon-name</v-icon>

这是使用size的{{1}}属性，而不是自定义的v-icon。

理论上，如果您设置了style，则可以使用style来完成。例如

font-size

或者也许使用一个对象代替

style () {
    return 'font-size: ' + this.iconSize + 'px'
}

Vue.js尝试在样式中使用道具

1 个答案: