Vue+Element自定义按钮和下拉框全局样式

最新推荐文章于 2025-09-26 03:01:02 发布

原创最新推荐文章于 2025-09-26 03:01:02 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在VabAdminPro管理模板中，利用Vue2.x和element-ui实现按钮的hover效果定制，并展示了hover-blue、hover-red等样式的应用。通过`.scss`文件，作者详细展示了如何为不同颜色的按钮添加状态样式和hover效果。

前提

我们使用的是Vab Admin Pro管理模板，它基于Vue2.x+element-ui。在线演示地址：https://chu1204505056.gitee.io/admin-pro/?hmsr=authorization&hmpl=&hmcu=&hmkw=&hmci=#/index

我还参考了element-ui的plain属性样式

效果截图

代码

在public/static/css文件夹下新建公共样式 button.scss 文件

button.scss代码

::v-deep .hover-blue {
    color: #1890ff;
    background: #e8f4ff;
    border-color: #a3d3ff;
}

::v-deep .hover-blue:hover {
    color: #ffffff;
    background: #1890ff;
}

::v-deep .hover-blue:focus {
    color: #ffffff;
    background: #1890ff;
}

::v-deep .hover-red {
    color: #ff4d4f;
    background: #ffeded;
    border-color: #ffb8b9;
}

::v-deep .hover-red:hover {
    color: #ffffff;
    background: #ff4d4f;
}

::v-deep .hover-red:focus {
    color: #ffffff;
    background: #ff4d4f;
}

::v-deep .hover-yellow {
    color: #faa500;
    background: #fff6e6;
    border-color: #ecd19a;
}

::v-deep .hover-yellow:hover {
    color: #ffffff;
    background: #faa500;
}

::v-deep .hover-yellow:focus {
    color: #ffffff;
    background: #faa500;
}

::v-deep .hover-green {
    color: #1bc3bb;
    background: #e8f9f8;
    border-color: #7ae6e1;
}

::v-deep .hover-green:hover {
    color: #ffffff;
    background: #1bc3bb;
}

::v-deep .hover-green:focus {
    color: #ffffff;
    background: #1bc3bb;
}

::v-deep .hover-purple {
    color: #b37feb;
    background: #f7f2fd;
    border-color: #be97ec;
}

::v-deep .hover-purple:hover {
    color: #ffffff;
    background: #b37feb;
}

::v-deep .hover-purple:focus {
    color: #ffffff;
    background: #b37feb;
}

页面代码

<el-dropdown @command="addUserCommand">
  <el-button class="hover-blue">
    添加用户
    <i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="add">手动添加</el-dropdown-item>
    <el-dropdown-item command="import">从excel导入</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<el-divider direction="vertical" />
<el-button class="hover-yellow" icon="el-icon-edit">
  更改角色
</el-button>
<el-divider direction="vertical" />
<el-button icon="el-icon-delete" class="hover-red">
  删除用户
</el-button>
<el-divider direction="vertical" />
<el-dropdown>
  <el-button class="hover-green">
    更多操作
    <i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>嘿嘿</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<el-divider direction="vertical" />
<el-dropdown>
  <el-button class="hover-purple">
    导出
    <i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>导出文本(.txt)</el-dropdown-item>
    <el-dropdown-item>导出表格(.xlsx)</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

在本页面引入button.scss样式

<style lang="scss" scoped>
@import 'public/static/css/button.scss';
::v-deep .el-divider--vertical {
  height: auto;
}
</style>