封装elementui的按钮组件

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

button的type属性都可以写什么

直接在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'

如果想要封装一个button组件的话，其实主要的还是调整样式以及一系类的判断
各种 v-if 然后 传递了什么参数、去接收，什么样的type 可以对应什么样的颜色

如果是原生button的话

直接把element的button拿过来包一层，他有什么属性，你照搬就行，然后你再自定义一个比如 ‘xxColorxx’属性，在组件里面获取到后赋值给element的button的style，完事，如果写参照一下项目中其他组件，或者百度找个例子

你自己 定义好 属性和方法 。或者 就用 element的 它的很完善 ，你可以加 自己的属性