在组件的样式部分使用Vue变量

piah890a 于 2023-02-16 发布在 Vue.js

关注(0)|答案(3)|浏览(155)

有可能在组件的style标签中使用变量吗？基本上我已经导入了一个mixin到我的style标签中，它接受2种颜色来在一个类中创建一个渐变。它工作得很好，但是我想要这个动态的，所以我可以通过数据库来设置它。我知道我可以通过内联绑定一个样式，但是div的渐变相当长，作为mixin工作得更好。
组分：

<template>

    <section class="section" v-bind:class=" { 'color-section' : content.gradient_color_one }">

        <div class="container">

            <div class="columns">

                <div class="column is-half">

                    <h2 class="is-size-4" v-html="content.title"></h2>

                    <div class="section-content" v-html="content.description"></div>

                    <a class="button" :href=" '/'+ content.button_link">{{ content.button_text }}</a>

                </div>

                <div class="column">

                    <img :src="content.image" :alt="content.title" />

                </div>

            </div>

        </div>

    </section>

</template>

<script>
    export default {

        props:[
            'content'
        ],

    }
</script>

<style lang="scss" scoped>

    @import "../../sass/helpers/mixins";

    .color-section{
        color:red;
        @include diagonalGradient( content.gradient_color_one , content.gradient_color_two);
    }

</style>

混合素

@mixin diagonalGradient($top, $bottom){
  background: $top;
  background: -moz-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, $top), color-stop(100%, $bottom));
  background: -webkit-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: -o-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: -ms-linear-gradient(-45deg, $top 0%, $bottom 100%);
  background: linear-gradient(135deg, $top 0%, $bottom 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92fe9d', endColorstr='#00c8ff', GradientType=1 );
}

vue.js

来源：https://stackoverflow.com/questions/45990027/use-vue-variable-in-style-section-of-a-component

3条答案

按热度按时间

siv3szwd1#

在Vue 3中，您现在可以在单个文件组件<style>节中使用v-bind，如下所示：

<style scoped>
.color-section {
  color: v-bind('sectionColor');
}
</style>

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

m1m5dgzv2#

你应该使用计算属性，因为它们可能是实现你所要做的事情的最好和最干净的方式。在Vue文档上也有一个关于它的完整站点：
https://v2.vuejs.org/v2/guide/class-and-style.html
基本上，你可以这样做：

computed: {
  style () {
    return 'background: ' + this.top + ';' + '...'
  }
}

不用传递mixin，你可以传递top和bottom变量，这非常方便，因为在computed style（）函数中你可以自由地做任何与javascript相关的事情，所以你可以有条件，表达式和诸如此类的东西，给你强大的风格控制;）

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

jtoj6r0c3#

正如我们从@ Macaccech的回答中所看到的，您现在可以在vue 3的vue sfc（.vue文件）的<style></style>部分中使用v-bind（），我发现他的回答非常有用，因此我认为值得提及一些注意事项：
如vue 3文件所述：
该语法适用于<script setup>，并支持JavaScript表达式（必须用引号括起来）：
因此，当我们要在样式块中使用js expression时，只需要使用引号。
另一件事要注意，我没有看到任何提到使用const color3 = ref('green')在vue文档，当我尝试它在一个vuePlayground，我发现它会得到自动解包，我们不需要使用v-bind('color3.value')，我们可以使用它像v-bind(color3)。
请看以下例子：

<template>   

<h1>Header number one</h1>
<h2>Header number two</h2>
<h3>Header number three</h3>

</template>

<script setup> 

const theme = {color:'red'} 
const color2 ='blue'
const color3 = ref('green')

</script>

<style scoped>

    /* we don't need to use quotes here */
 h1 {
    color: v-bind(color2); 
} 

    /* we are using quotes here (' ') because theme.color is a javaScript expression */
 h2 {
    color: v-bind('theme.color'); 
} 

 h3 {
    color: v-bind(color3); 
} 
</style>

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

我来回答

在组件的样式部分使用Vue变量

3条答案

相关问题

热门标签

最新问答