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

张怼怼
  • 384

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

回复
阅读 2.7k
6 个回答

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)
}

];`

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

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

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

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

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

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

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

你可以在组件中

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

props:['newStyle']
data(){
 return {
  style:{
      ....样式
      }
 },
 created() {
  this.style = Object. assign({},this.newStyle,this.style)
 }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏