vue组件中使用scss,在不同的情况下使用组件,样式的值可以变怎么写?

张怼怼
  • 386

不同的地方引入组件的时候,组件的大小有些不同,其他样式都是一样的。请问这个时候应该怎么使用scss?

回复
阅读 2.5k
6 个回答

你可以在组件中

<Item :style="style"></Item>

props:['newStyle']
data(){
 return {
  style:{
      ....样式
      }
 },
 created() {
  this.style = Object. assign({},this.newStyle,this.style)
 }
}

写组件时候 定义一下样式绑定

举例子 :class="xxx==1?bigClass:smallClass" 组件

引入 确定xxx的值来决定样式

至于值的问题 就是组件通信 不细说

提供思路:在组件里接收:size , 在父组件里把尺寸传进去;

为什么不用props来做呢? 通过传递的props去给不同的样式

props接受style参数感觉是最好的。超高度可定制化

iview button 组件 你可以参考一下
`classes () {
return [

`${prefixCls}`,
{
  [`${prefixCls}-${this.type}`]: !!this.type,
  [`${prefixCls}-long`]: this.long,
  [`${prefixCls}-${this.shape}`]: !!this.shape,
  [`${prefixCls}-${this.size}`]: !!this.size,
  [`${prefixCls}-loading`]: this.loading != null && this.loading,
  [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
}

];`

你知道吗?

宣传栏