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

文章目录

- - - 一、el-button 样式
    - 二、Popconfirm 气泡确认框
    - 三、Popover 气泡卡片
    - 四、Checkbox 多选框
    - 五、Pagination 分页
    - 六、Form 表单
    - 七、Table 表格

一、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-popconfirm
    width="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-popconfirm
                width="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>

效果展示：

效果展示