记一些常用动态样式

63 阅读1分钟
<div class="status-item" :class="{'red':true,'green':true}"></div>
.status-item {
    &.red {color: red;}
    &.green {color: green;}
}
<div :class="[`status-${type}`]"></div>
const type = ref("disable")
.status- {
    &disable {color: red;}
}
const plateWidth = computed(() => {
	return props.width + 'rpx'
})
.a{
    min-width: v-bind('plateWidth');
}
组件内标签通过 $attrs.class 绑定父组件传入的class
<div :class="$attrs.class"></div>