是否可以将变量与组件的样式标签一起使用?基本上我已经将一个 mixin 导入到我的样式标签中,它接受 2 种颜色以在类中创建渐变。它工作得很好,但我想要这个动态的,所以我可以通过数据库设置它。我知道我可以通过内联绑定(bind)样式,但是 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 文档上也有一个完整的网站:
https://v2.vuejs.org/v2/guide/class-and-style.html
基本上,您可以这样做:
computed: {
style () {
return 'background: ' + this.top + ';' + '...'
}
}
您可以传递 top 和 bottom 变量,而不是传递 mixin。这非常方便,因为在你的计算样式 () 函数中,你可以自由地做任何你想做的与 javascript 相关的事情,所以你可以有条件、表达式等等。让您对自己的风格有强大的控制权;)
关于vue.js - 在组件的样式部分使用 Vue 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45990027/