问题
基于element-ui封装的button组件,希望根据不同的类名,实现相同样式、不同颜色。
解决
将相同的部分包成mixin .isUnderline,通过传参实现不同颜色。
<style lang="less">
@color-default: #333;
@color-primary: #409eff;
@color-success: #67c23a;
@color-info: #909399;
@color-warning: #e6a23c;
@color-danger: #f56c6c;
.isUnderline(@color) {
padding: 2px 3px;
color: @color;
text-decoration: underline;
text-decoration-color: @color;
background: transparent;
border: transparent;
&:focus, &:hover {
color: darken(@color, 20%);
text-decoration-color: darken(@color, 30%);
}
}
.cc-button.is-underline {
.isUnderline(@color-default);
}
.cc-button.is-underline.el-button--primary {
.isUnderline(@color-primary);
}
.cc-button.is-underline.el-button--success {
.isUnderline(@color-success);
}
.cc-button.is-underline.el-button--info {
.isUnderline(@color-info);
}
.cc-button.is-underline.el-button--warning {
.isUnderline(@color-warning);
}
.cc-button.is-underline.el-button--danger {
.isUnderline(@color-danger);
}
</style>