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

时间:2017-08-31 21:02:25

标签: vue.js vue-component

是否可以将变量与组件的样式标记一起使用?基本上我已经将mixin导入到我的样式标签中,该标签接受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 );
}

1 个答案:

答案 0 :(得分:3)

您应该使用计算属性,因为它们可能是实现您尝试的最佳和最干净的方法。 他们在Vue Docs上也有一个关于它的整个网站:

https://vuejs.org/v2/guide/class-and-style.html

基本上,你可以这样做:

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

您可以传递顶部和底部变量,而不是传递mixin。这非常方便,因为在你的计算style()函数中你可以自由地做任何你想要的javascript相关的东西,所以你可以有条件,表达式等等。使您能够有效控制自己的风格;)