前提
我们使用的是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>