javascript Vue 3获得时尚 prop

8hhllhi2 于 2023-02-11 发布在 Java

关注(0)|答案(2)|浏览(128)

我在style标签中实现props时遇到一些问题。我有如下的props：

props: {
    icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  }

我想在Style中使用标签 prop ，例如：

<style scoped lang="scss">
      .class{
        color: label;
      }
    </style>

有可能吗？因为不是这样的
想法实际上是打一个电话，比如：

.drop-color{
    color: map-get($var, label);
  }

如果我把它定义为

.drop-color{
    color: map-get($var, 'blue');
  }

我只需要通过 prop 标签代替。

JavaScript

来源：https://stackoverflow.com/questions/69102748/vue-3-get-props-in-style

2条答案

按热度按时间

rkue9o1l1#

通过新的脚本设置，您可以使用vue 3.2.x的v-bind执行此操作：

<script setup>
import {defineProps} from 'vue'

const props = defineProps({
     icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
})

</script>
  <style scoped lang="scss">
      .class{
        color: v-bind(label);
      }
    </style>

现场演示

赞(0）回复(0）举报 2023-02-11

6ju8rftf2#

v-bind是运行时表达式，而map-get和其他SASS特定的东西在构建时传递给CSS，所以，如果map的键在构建时不可用，它就不能正确构建。
但是，您可以将SASS变量和Map导入到JS中并使用它们。
我不知道SASS的内置:export是否支持Map，但如果不支持，您可以使用第三方库，如下所示：
https://www.npmjs.com/package/sass-export

赞(0）回复(0）举报 2023-02-11

我来回答

javascript Vue 3获得时尚 prop

2条答案

相关问题

热门标签

最新问答