一、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>
效果展示: