2017-08-31 19 views
2

是否可以使用具有组件样式标签的变量?基本上我已经将mixin导入到我的style标签中,该标签接受2种颜色以在类中创建渐变。它工作得很好,但我想要这种动态,所以我可以通过数据库设置它。我知道我可以通过内联绑定一个样式,但div的渐变相当长,并且作为mixin运行得更好。在组件的样式部分中使用Vue变量

组件:

<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); 
} 
+0

我不认为有一种方法可以轻松地做到这一点。如果线性渐变是一个复合属性,它可能会更容易。这可能会让你更轻松一些:https://vuejs.org/v2/guide/class-and-style.html#Multiple-Values –

回答

0

你应该使用计算性能,因为它们很可能是实现你想要做什么最好,最彻底的方法。 他们也有对Vue公司文件关于它的整个网站:

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

基本上,你可以做这样的事情:

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

不是传递的混入的,然后你可以通过顶部和底部变量。这很方便,因为在你的计算式style()函数中,你可以自由地做任何你想要的与JavaScript有关的东西,所以你可以有条件,表达式和其他东西。给你强大的控制你的风格;)

+0

这种方法工作并且看起来最清晰的代码。如果Vue团队能够在