Element plus部分组件样式覆盖记录

一、el-button 样式

html：

<el-button class="com_btn_style">button</el-button>

样式覆盖(less)：

<style lang="less" scoped>
.com_btn_style {background-color: #eef2ff!important;border-radius: 6px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;color: #705697!important;cursor: pointer;font-family: Verdana, monospace,sans-serif;height: 36px;line-height: -36px;text-align: center;transition: box-shadow 0.15s, transform 0.15s;user-select: none;font-size: 15px;outline: none;border: 0;&:hover {box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px, rgba(0, 0, 0, 0.23) 0px 1px 3px}&:active {box-shadow: #d6d6e7 0 3px 7px inset;transform: translateY(2px);}
}
</style>

效果展示：

二、Popconfirm 气泡确认框

html：

<el-popconfirmwidth="230"confirm-button-text="Yes"cancel-button-text="No"confirm-button-color="#ff0000":hide-after="0":icon="InfoFilled"icon-color="#626AEF"title="这是一段内容确定删除吗？"@confirm="deleteData"><template #reference><el-button class="com_btn_style">delete</el-button></template>
</el-popconfirm>

script：

<script lang="ts" setup>
import { InfoFilled } from "@element-plus/icons-vue";const deleteData = () => {console.log("-- delete --");
};
</script>

样式覆盖(less)：

<style lang="less" scoped>
.com_btn_style {...}
</style><style lang="less">
.el-popconfirm .el-popconfirm__action {.el-button {&:hover {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;transform: translateY(-2px);}&:active {box-shadow: #d6d6e7 0 3px 7px inset;transform: translateY(2px);}}.el-button:nth-child(2) {border-color: #eef2ff;background-color: #eef2ff;color: #705697;}
}
</style>

效果展示：

三、Popover 气泡卡片

html：

<el-popover effect="light" trigger="hover" placement="top" width="auto"><template #default><div><p class="com_url_info">https://www.xxx.com</p><el-popconfirmwidth="230"confirm-button-text="Yes"cancel-button-text="No"confirm-button-color="#ff0000":hide-after="0":icon="InfoFilled"icon-color="#626AEF"title="使用默认浏览器打开链接？"@confirm="goToLink"><template #reference><span class="com_tip_btn"> <el-icon><Promotion /></el-icon> </span></template></el-popconfirm><span class="com_tip_btn" @click="copyLink"> <el-icon><CopyDocument /></el-icon> </span></div></template><template #reference><el-tag> <el-icon><Link /></el-icon> </el-tag></template>
</el-popover>

script：

<script lang="ts" setup>
import { InfoFilled,Promotion,CopyDocument,Link } from "@element-plus/icons-vue";const goToLink = () => {console.log("goToLink");
};
const copyLink = () => {console.log("copyLink");
};
</script>

样式覆盖(less)：

<style lang="less" scoped>.el-tag {font-size: 13px;padding: 10px 5px;color: #7a629f;border-color: #eef2ff;background-color: #fafafa;box-sizing: border-box;
}.com_tip_btn {display: inline-block;width: 27px;height: 27px;line-height: 27px;text-align: center;border-radius: 3px;cursor: pointer;&:hover {color: #7a629f;background-color: #eef2ff;}
}.com_url_info {display: inline;padding: 5px;margin-right: 5px;max-width: 340px;box-sizing: border-box;border-radius: 2px;background-color: #eef2ff;overflow: hidden;text-overflow: ellipsis;text-wrap: nowrap;
}
</style><style lang="less">
.el-popconfirm .el-popconfirm__action {.el-button {&:hover {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;transform: translateY(-2px);}&:active {box-shadow: #d6d6e7 0 3px 7px inset;transform: translateY(2px);}}.el-button:nth-child(2) {border-color: #eef2ff;background-color: #eef2ff;color: #705697;}
}
</style>

效果展示：

四、Checkbox 多选框

html：

<div id="checkbox_group"><el-checkbox-group v-model="checkedVal"><el-checkbox v-for="item in checkList" :label="item" :value="item" /></el-checkbox-group>
</div>

script：

<script lang="ts" setup>
import { ref, watch } from "vue";// 被选中的选项
const checkedVal = ref([]);
const checkList = ["https://www.xxx1.com", "https://www.xxx2.com"];watch(checkedVal, (newVal) => {console.log(newVal);
});
</script>

样式覆盖(less)：

<style lang="less" scoped>#checkbox_group {width: 300px;height: 70px;padding: 10px 0 0 20px;border-radius: 5px;background-color: #f9f9f9;
}.el-checkbox-group {display: flex;flex-direction: column;justify-items: center;
}.el-checkbox {width: 18px;height: 18px;margin: 5px 0;opacity: 0.8;transform: scale(1.4);cursor: pointer;z-index: 1;
}// 修改选中时的标签颜色
/deep/.el-checkbox__input.is-checked+.el-checkbox__label {color: #b2c1f4 !important;
}// 修改复选框背景色和边框颜色
/deep/.el-checkbox__inner {background-color: rgba(255, 255, 255, 0.2);border-color: #bbb;
}// 修改复选框选中后的背景色
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {background-color: #b2c1f4 !important;border: 1px solid #eef2ff !important;
}// 鼠标经过复选框
/deep/.el-checkbox__inner:hover {border-color: #eef2ff;
}// 修改复选框选中后的边框颜色
/deep/.el-checkbox__input.is-focus .el-checkbox__inner {border-color: #eef2ff !important;
}
</style>

效果展示：

五、Pagination 分页

html：

<div id="pagination_box"><el-pagination layout="prev, pager, next" :page-count="10" :page-size="24" :hide-on-single-page="true" @current-change="handleCurrentChange" />
</div>

script：

<script lang="ts" setup>
const handleCurrentChange = (page: number) => {console.log(page);
}
</script>

样式覆盖(less)：

<style lang="less" scoped>// 公共样式 - 按钮被选中时的样式
.com_click_active {border-radius: 5px;box-shadow: #d6d6e7 0 3px 7px inset;transform: translateY(2px);
}#pagination_box {position: relative;
}.el-pagination {position: absolute;left: 50%;transform: translateX(-50%);padding-bottom: 5px;
}// 页码按钮样式
/deep/.el-pagination li {&:active {.com_click_active();}&:hover {// color: #d3606f;color: #b2c1f4;font-weight: 700;}&:focus {.com_click_active();}
}/deep/.el-pager li.is-active {color: #d3606f;// color: #b2c1f4;font-weight: 700;
}// 上下页按钮样式
/deep/.el-pagination .btn-next,
/deep/.el-pagination .btn-prev {&:active {.com_click_active();}&:hover {color: #7b37e8;}
}
</style>

效果展示：

六、Form 表单

html：

<el-form :model="form" label-width="auto" size="default"><!-- 查询 --><el-form-item label="Query" prop="q"><el-input v-model="form.q" placeholder="Search query" Spellcheck="false" clearable /></el-form-item><!-- 排序时间 --><el-form-item label="TopRange" prop="topRange"><el-select v-model="form.topRange" placeholder="Method of sorting results" clearable><el-option label="1M" value="1M" /><el-option label="2M" value="2M" /><el-option label="3M" value="3M" /></el-select></el-form-item><!-- 分类 --><el-form-item label="Categories" prop="categories"><el-checkbox-group v-model="form.categories"><el-checkbox-button value="100" name="categories"> general </el-checkbox-button><el-checkbox-button value="010" name="categories"> anime </el-checkbox-button><el-checkbox-button value="001" name="categories"> people </el-checkbox-button></el-checkbox-group></el-form-item><!-- 过滤 --><el-form-item label="Filter" prop="ai_art_filter"><el-switch v-model="form.ai_art_filter" /></el-form-item><!-- 排序方法 --><el-form-item label="Order" prop="order"><div class="custom-style"><el-segmented v-model="form.order" :options="['desc', 'asc']" /></div></el-form-item>
</el-form>

script：

<script setup lang="ts">
import { reactive } from "vue";interface FormParams {q?: string;topRange?: string,categories?: string[];ai_art_filter: boolean;order?: string;
}// 表单默认值
const form = reactive<FormParams>({q: "",topRange: "1M",categories: ["100", "010"],ai_art_filter: true,order: "desc",
});
</script>

样式覆盖(less)：

<style lang="less" scoped>// 标签字体加粗
::v-deep .el-form-item__label-wrap {font-weight: 700;
}.el-input {// 边框颜色--el-input-border-color: #eef2ff !important;// 背景颜色--el-input-bg-color: #f9f9f9;// 获取焦点后的边框颜色--el-input-focus-border-color: #ccc !important;// 鼠标悬停边框颜色--el-input-hover-border-color: #ccc !important;// 边框圆角// --el-input-border-radius: 5px;
}// 修改下拉框样式
::v-deep .el-select .el-select__wrapper.is-focused {box-shadow: 0 0 0 1px #b1bfee;
}
.el-select-dropdown__item.is-selected {color: #b1bfee!important;
}// 修改 el-checkbox-button 样式
.el-form .el-form-item .el-checkbox-group .el-checkbox-button {::v-deep .el-checkbox-button__original:checked + span {color: #705697;background-color: #f3f3ff !important;border: 1px solid #705697 !important;}::v-deep span {font-weight: 700;color: #c4b7d7;border: 1px solid #bbb !important;}::v-deep span:hover {color: #705697;}
}// 修改 el-switch__input 样式
::v-deep .el-switch__input:checked + .el-switch__core {background-color: #cfcffb !important;border: 1px solid #eef2ff !important;
}// Segmented 分段控制器
.custom-style .el-segmented {--el-segmented-item-selected-color: rgba(112, 86, 151);--el-segmented-item-selected-bg-color: #e1e1f8;--el-border-radius-base: 7px;font-weight: 700;font-size: 15px;color: #aaa;
}
</style>

效果展示：

七、Table 表格

主要修改表格中的复选框，并隐藏全选复选框的中间状态。

html：

<el-table :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" /><el-table-column label="Date" width="120"><template #default="scope">{{ scope.row.date }}</template></el-table-column><el-table-column property="name" label="Name" width="120" />
</el-table>

script：

<script lang="ts" setup>
import { ElTable } from "element-plus";interface User {date: string;name: string;
}
const tableData: User[] = [{date: "2016-05-04",name: "Aleyna Kutzner"},{date: "2016-05-03",name: "Helen Jacobi"},
];
</script>

样式覆盖(less)：

<style lang="less" scoped>
// 修改复选框选中时的颜色
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {background-color: #d2dbf8 !important;border: 1px solid #eef2ff !important;
}
// 修改复选框默认状态样式
/deep/.el-checkbox__inner {width: 16px !important;height: 16px !important;background-color: #fff !important;border-color: #aaa !important;border-radius: 2px;&:hover {border-color: #aaa;}// 隐藏全选复选框的中间状态&::after {width: 0;height: 0;border-color: transparent !important;transform: unset !important;}
}/deep/.el-checkbox__input.is-focus {border-color: #eef2ff !important;
}
</style>

效果展示：