head-img Force's Blog

elementUI 定制按钮主题

JavaScript

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>
...

4.效果

1672799019458.jpg

点我评论
打赏本文
二维码


125

文章

14

标签

 访客统计  Update-******