封装elementui的按钮组件

Question

怎么封装一个不同颜色的按钮组件？

button的type属性都可以写什么

Answer 1

直接在css里定义，然后在main.js引入就可以，很方便

<el-button type="demo">demo</el-button>
<el-button type="primary">primary</el-button>

.el-button--demo {
  color: #FFF;
  background-color: #008080;
  border-color: #008080;
}
.el-button--demo:focus, .el-button--demo:hover {
  background: #009191;
  border-color: #009191;
  color: #FFF;
}
.el-button--demo.is-active, .el-button--demo:active {
  background: #008080;
  border-color: #008080;
  color: #FFF;
}

// main.js
// 引入你写button样式的文件
import '@/assets/common.css'