包裹组件 - EleApp
5.19.1.使用说明
包裹组件实现了对滚动条的样式修改、对 Element 部分组件的样式优化、提供了几个 css 辅助类，以及对 EleMessage 的样式加载，在 App.vue 中引入：
还有 ElNotification / ElMessageBox / ElMessage 这几个不是以组件形式使用的，在按需加载时就会没有样式，使用 ele-app 组件就会加载这几个样式。
5.19.2.引入控制
如果不想对滚动条的样式修改或者不想对 Element 组件的样式修改，可以不使用 ele-app 组件，然后在 main.js 或 App.vue 里面根据自己的需要引入：
// 这种方式只对按需加载有效, 对全局引入是无效的, 模板中默认是开发环境全部引入, 生产环境按需加载
// 所以不使用 EleApp 组件后, 下面根据自己需要引入的代码最好是写在 src/as-needed.js 中
// 引入这个就会对浏览器原生的滚动条进行样式美化
import 'ele-admin-plus/es/ele-app/style/scrollbar/index';
// 引入这个才可以使用下面提供的三个辅助类
import 'ele-admin-plus/es/ele-app/style/common/index';
// 使用 EleMessage 要引入这个, 否则按需加载时没有样式
import 'ele-admin-plus/es/ele-app/style/message/index';
// 引入这个就会对 Element 的部分组件进行样式美化, 涉及的组件有:
// 底层气泡(ElPopper)、ElSelect、ElAutocomplete、ElCascader、ElTreeSelect、ElTree
// ElRadio、ElCheckbox、ElDescriptions、ElColorPicker、ElImage(的预览Viewer)、ElTag
// ElDatePicker、ElTimePicker、ElMessageBox、ElNotification、ElTable(的筛选下拉Filter)
import 'ele-admin-plus/es/ele-app/style/overwrite/index';
// 使用 ElMessageBox 要引入这个, 否则按需加载时没有样式
import 'element-plus/es/components/message-box/style/index';
// 使用 ElNotification 要引入这个, 否则按需加载时没有样式
import 'element-plus/es/components/notification/style/index';
// 使用 ElMessage 要引入这个, 如果引入了 EleMessage 会自动引入这个
import 'element-plus/es/components/message/style/index';
以上只对按需加载有效，对于全局安装还需要修改 src/global-import.js 不引入 EleApp 的样式：
/** 全局安装 */
import ElementPlus from 'element-plus';
import EleAdminPlus from 'ele-admin-plus';
import 'element-plus/theme-chalk/src/index.scss';
// 把引入 index.scss 改为引入 plus.scss 就不会包含 EleApp 的样式
//import 'ele-admin-plus/es/style/index.scss';
import 'ele-admin-plus/es/style/plus.scss'; // v1.1.9新增
// 如果还需要引入 EleApp 的部分样式可根据自己需要添加
//import 'ele-admin-plus/es/ele-app/style/scrollbar/index';
import 'cropperjs/dist/cropper.css';
import 'xgplayer/dist/index.min.css';
const installer = {
install(app) {
app.use(ElementPlus);
app.use(EleAdminPlus);
}
};
export default installer;
如果只想取消滚动条的样式美化在 v1.1.4 版本开始提供了一种简单的方法，在 src/styles/variables.scss 中增加：
// 省略其它代码......
@forward 'ele-admin-plus/es/style/themes/default.scss' with (
scrollbar-selector: 'never'
//scrollbar-selector: 'pc'
);
// 覆盖 $scrollbar-selector 变量值为 never 则取消美化, 值为 pc 则只在 PC 端美化
对 Element 组件样式的修改在 v1.1.6 版本开始进行更细的拆分，可以更细的控制只美化哪些组件：
// 直接引入 overwrite 是全部, 可以换成更加细的引入
//import 'ele-admin-plus/es/ele-app/style/overwrite/index';
import 'ele-admin-plus/es/ele-app/style/overwrite/checkbox/index'; // 多选
import 'ele-admin-plus/es/ele-app/style/overwrite/radio/index'; // 单选
import 'ele-admin-plus/es/ele-app/style/overwrite/tag/index'; // 标签
import 'ele-admin-plus/es/ele-app/style/overwrite/select/index'; // 下拉选择
// ......等等, 不一一列举
5.19.3.CSS辅助类
辅助类 ele-fluid 用于下拉框、数字输入框、日期选择框的宽度铺满(这几个组件的默认宽度不是100%)，使用示例：
运行代码 新窗口打开
辅助类 ele-scrollbar-hide 用于隐藏滚动条， ele-scrollbar-hover 用于鼠标移入才显示滚动条，使用示例：