1.引入全局样式文件
首先在vue入口文件全局引入一个样式文件global.less
,这里以less文件举例(sass、css...都可)
注意不要在<style/>
添加作用域限制指令scoped
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style lang="less">
@import "../src/static/less/global.less";
</style>
2.创建global.less
文件
以添加自定义按钮主题名为custom
为例,其中按钮分为三种状态色,也就是说每个按钮主题需要三种颜色。
分别为:
- 正常颜色
- 激活状态颜色,比正常颜色略深 (
&.is-active
、&:active
) - 聚焦及悬停颜色,比正常颜色略淡 (
&:focus
、&:hover
)
以下正常颜色为#2bb97c
为例如下:
body {
.el-button--custom {
color: #FFF;
background-color: #2bb97c;
border-color: #2bb97c;
&.is-active,
&:active {
background: #228d5f;
border-color: #228d5f;
color: #FFF;
}
&:focus,
&:hover {
background: #36e399;
border-color: #36e399;
color: #FFF;
}
}
}
3.调用自定义按钮custom
,直接在type=xxx
填入custom
...
<el-button @click="editData('mod', scope.row)" size="mini" type="custom">修改</el-button>
...