chore: 适配最新版element-plus v2.6.0

This commit is contained in:
xiaoxian521
2024-03-01 21:07:27 +08:00
parent 19ccd378f5
commit b5645b19e1
20 changed files with 586 additions and 634 deletions

View File

@@ -389,7 +389,6 @@ export default defineComponent({
interactive: true,
appendTo: "parent",
// hideOnClick: false,
animation: "perspective",
placement: "bottom-end"
});

View File

@@ -317,7 +317,7 @@ export default defineComponent({
/>
<el-checkbox
key={item}
label={item}
value={item}
onChange={value =>
handleCheckColumnListChange(value, item)
}

View File

@@ -17,8 +17,7 @@ export default {
component: IFrame,
meta: {
title: $t("menus.hsboard"),
frameSrc: "https://songlh.top/paint-board/",
extraIcon: "IF-pure-iconfont-new svg"
frameSrc: "https://songlh.top/paint-board/"
}
}
]

View File

@@ -102,7 +102,6 @@
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,整体暗色风格在 src/style/dark.scss 文件进行了适配 */
.pure-message {
padding: 10px 13px !important;
background: #fff !important;
border-width: 0 !important;
box-shadow:
@@ -110,22 +109,13 @@
0 6px 16px #00000014,
0 9px 28px 8px #0000000d !important;
&.el-message.is-closable .el-message__content {
padding-right: 17px !important;
}
& .el-message__content {
color: #000000d9 !important;
pointer-events: all !important;
background-image: initial !important;
}
& .el-message__icon {
margin-right: 8px !important;
}
& .el-message__closeBtn {
right: 9px !important;
border-radius: 4px;
outline: none;
transition:

View File

@@ -94,10 +94,10 @@ watch(size, val =>
<el-space wrap :size="40">
<span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>
@@ -108,9 +108,9 @@ watch(size, val =>
:size="dynamicSize"
:disabled="size === 'disabled'"
>
<el-radio-button label="wait">等待中</el-radio-button>
<el-radio-button label="progress">进行中</el-radio-button>
<el-radio-button label="complete">已完成</el-radio-button>
<el-radio-button value="wait">等待中</el-radio-button>
<el-radio-button value="progress">进行中</el-radio-button>
<el-radio-button value="complete">已完成</el-radio-button>
</el-radio-group>
<el-divider />
@@ -120,9 +120,9 @@ watch(size, val =>
:size="dynamicSize"
:disabled="size === 'disabled'"
>
<el-radio label="wait" border>等待中</el-radio>
<el-radio label="progress" border>进行中</el-radio>
<el-radio label="complete" border>已完成</el-radio>
<el-radio value="wait" border>等待中</el-radio>
<el-radio value="progress" border>进行中</el-radio>
<el-radio value="complete" border>已完成</el-radio>
</el-radio-group>
<el-divider />
@@ -132,19 +132,19 @@ watch(size, val =>
:size="dynamicSize"
:disabled="size === 'disabled'"
>
<el-radio-button label="wait">
<el-radio-button value="wait">
<span class="flex">
<IconifyIconOnline icon="ri:progress-8-fill" class="mr-1" />
等待中
</span>
</el-radio-button>
<el-radio-button label="progress">
<el-radio-button value="progress">
<span class="flex">
<IconifyIconOnline icon="ri:progress-6-line" class="mr-1" />
进行中
</span>
</el-radio-button>
<el-radio-button label="complete">
<el-radio-button value="complete">
<span class="flex">
<IconifyIconOnline icon="ri:progress-8-line" class="mr-1" />
已完成
@@ -159,9 +159,9 @@ watch(size, val =>
:size="dynamicSize"
:disabled="size === 'disabled'"
>
<el-checkbox-button label="apple">苹果</el-checkbox-button>
<el-checkbox-button label="tomato">西红柿</el-checkbox-button>
<el-checkbox-button label="banana">香蕉</el-checkbox-button>
<el-checkbox-button value="apple">苹果</el-checkbox-button>
<el-checkbox-button value="tomato">西红柿</el-checkbox-button>
<el-checkbox-button value="banana">香蕉</el-checkbox-button>
</el-checkbox-group>
<el-divider />
@@ -171,9 +171,9 @@ watch(size, val =>
:size="dynamicSize"
:disabled="size === 'disabled'"
>
<el-checkbox label="cucumber" border>黄瓜</el-checkbox>
<el-checkbox label="onion" border>洋葱</el-checkbox>
<el-checkbox label="blueberry" border>蓝莓</el-checkbox>
<el-checkbox value="cucumber" border>黄瓜</el-checkbox>
<el-checkbox value="onion" border>洋葱</el-checkbox>
<el-checkbox value="blueberry" border>蓝莓</el-checkbox>
</el-checkbox-group>
<el-divider />
@@ -184,13 +184,13 @@ watch(size, val =>
:size="dynamicSize"
:disabled="size === 'disabled'"
>
<el-checkbox-button label="tomato">
<el-checkbox-button value="tomato">
<span class="flex">
<IconifyIconOnline icon="streamline-emojis:tomato" class="mr-1" />
番茄
</span>
</el-checkbox-button>
<el-checkbox-button label="watermelon">
<el-checkbox-button value="watermelon">
<span class="flex">
<IconifyIconOnline
icon="streamline-emojis:watermelon-1"
@@ -199,7 +199,7 @@ watch(size, val =>
西瓜
</span>
</el-checkbox-button>
<el-checkbox-button label="strawberry">
<el-checkbox-button value="strawberry">
<span class="flex">
<IconifyIconOnline
icon="streamline-emojis:strawberry-1"

View File

@@ -53,10 +53,10 @@ watch(size, val =>
多选卡片组
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>

View File

@@ -45,8 +45,8 @@ const handleChange = (val: string[]) => {
<p class="mb-2">基础用法</p>
<el-radio-group v-model="radio" class="mb-3">
<el-radio label="">可同时展开多个面板</el-radio>
<el-radio label="accordion">每次只能展开一个面板</el-radio>
<el-radio value="">可同时展开多个面板</el-radio>
<el-radio value="accordion">每次只能展开一个面板</el-radio>
</el-radio-group>
<el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
外部触发打开、关闭

View File

@@ -57,10 +57,10 @@ function onClick() {
颜色选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>

View File

@@ -144,10 +144,10 @@ watch(size, val =>
日期选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>
@@ -245,9 +245,9 @@ watch(size, val =>
:disabled="size === 'disabled'"
@change="value7 = ''"
>
<el-radio label="">Date</el-radio>
<el-radio label="YYYY-MM-DD">年月日</el-radio>
<el-radio label="x">时间戳</el-radio>
<el-radio value="">Date</el-radio>
<el-radio value="YYYY-MM-DD">年月日</el-radio>
<el-radio value="x">时间戳</el-radio>
</el-radio-group>
<br />
<el-space wrap>

View File

@@ -170,10 +170,10 @@ watch(size, val =>
日期时间选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>
@@ -197,9 +197,9 @@ watch(size, val =>
:disabled="size === 'disabled'"
@change="value1 = ''"
>
<el-radio label="">Date</el-radio>
<el-radio label="YYYY-MM-DD HH:mm:ss">年月日 时分秒</el-radio>
<el-radio label="x">时间戳</el-radio>
<el-radio value="">Date</el-radio>
<el-radio value="YYYY-MM-DD HH:mm:ss">年月日 时分秒</el-radio>
<el-radio value="x">时间戳</el-radio>
</el-radio-group>
<br />
<el-space wrap>

View File

@@ -68,10 +68,10 @@ watch(size, val =>
Button 按钮
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>
@@ -79,13 +79,13 @@ watch(size, val =>
<p class="mb-2">基础按钮</p>
<el-radio-group v-model="baseRadio" class="mb-3">
<el-radio label="default" />
<el-radio label="plain" />
<el-radio label="round" />
<el-radio label="circle" />
<el-radio label="link" />
<el-radio label="text" />
<el-radio label="text-bg" />
<el-radio label="default" value="default" />
<el-radio label="plain" value="plain" />
<el-radio label="round" value="round" />
<el-radio label="circle" value="circle" />
<el-radio label="link" value="link" />
<el-radio label="text" value="text" />
<el-radio label="text-bg" value="text-bg" />
</el-radio-group>
<br />
<el-space wrap>

View File

@@ -79,9 +79,9 @@ const handleInputConfirm = () => {
Tag 标签
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
</el-radio-group>
</el-space>
</div>
@@ -89,9 +89,9 @@ const handleInputConfirm = () => {
<p class="mb-2">基础按钮</p>
<el-radio-group v-model="baseTag" class="mb-3">
<el-radio label="dark" />
<el-radio label="light" />
<el-radio label="plain" />
<el-radio label="dark" value="dark" />
<el-radio label="light" value="light" />
<el-radio label="plain" value="plain" />
</el-radio-group>
<br />
<el-space class="mb-3">

View File

@@ -69,10 +69,10 @@ const endTime = ref("");
时间选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio label="large">大尺寸</el-radio>
<el-radio label="default">默认尺寸</el-radio>
<el-radio label="small">小尺寸</el-radio>
<el-radio label="disabled">禁用</el-radio>
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio>
</el-radio-group>
</el-space>
</div>

View File

@@ -102,8 +102,8 @@ const rules = {
</el-form-item>
<el-form-item label="产品状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio label="0">已停用</el-radio>
<el-radio label="1">已启用</el-radio>
<el-radio value="0">已停用</el-radio>
<el-radio value="1">已启用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="产品描述" prop="description">

View File

@@ -25,8 +25,8 @@ const columns: TableColumnList = [
<template>
<div>
<el-radio-group v-model="tableLayout">
<el-radio-button label="fixed" />
<el-radio-button label="auto" />
<el-radio-button label="fixed" value="fixed" />
<el-radio-button label="auto" value="auto" />
</el-radio-group>
<pure-table

View File

@@ -23,36 +23,36 @@ const {
<el-space class="float-right mb-4">
<p class="text-sm">多选</p>
<el-radio-group v-model="select" size="small">
<el-radio-button label="yes"></el-radio-button>
<el-radio-button label="no"></el-radio-button>
<el-radio-button value="yes"></el-radio-button>
<el-radio-button value="no"></el-radio-button>
</el-radio-group>
<el-divider direction="vertical" />
<p class="text-sm">动态列</p>
<el-radio-group v-model="hideVal" size="small">
<el-radio-button label="nohide">不隐藏</el-radio-button>
<el-radio-button label="hideDate">隐藏日期</el-radio-button>
<el-radio-button label="hideName">隐藏姓名</el-radio-button>
<el-radio-button label="hideAddress">隐藏地址</el-radio-button>
<el-radio-button value="nohide">不隐藏</el-radio-button>
<el-radio-button value="hideDate">隐藏日期</el-radio-button>
<el-radio-button value="hideName">隐藏姓名</el-radio-button>
<el-radio-button value="hideAddress">隐藏地址</el-radio-button>
</el-radio-group>
<el-divider direction="vertical" />
<p class="text-sm">表格大小</p>
<el-radio-group v-model="tableSize" size="small">
<el-radio-button label="large">large</el-radio-button>
<el-radio-button label="default">default</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
<el-radio-button value="large">large</el-radio-button>
<el-radio-button value="default">default</el-radio-button>
<el-radio-button value="small">small</el-radio-button>
</el-radio-group>
<el-divider direction="vertical" />
<p class="text-sm">分页大小</p>
<el-radio-group v-model="paginationSmall" size="small" @change="onChange">
<el-radio-button :label="false">no small</el-radio-button>
<el-radio-button :label="true">small</el-radio-button>
<el-radio-button :value="false">no small</el-radio-button>
<el-radio-button :value="true">small</el-radio-button>
</el-radio-group>
<el-divider direction="vertical" />
<p class="text-sm">分页的对齐方式</p>
<el-radio-group v-model="paginationAlign" size="small">
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="center">center</el-radio-button>
<el-radio-button label="left">left</el-radio-button>
<el-radio-button value="right">right</el-radio-button>
<el-radio-button value="center">center</el-radio-button>
<el-radio-button value="left">left</el-radio-button>
</el-radio-group>
</el-space>

View File

@@ -9,8 +9,8 @@ const model = ref("radio");
<template>
<el-space>
<el-radio-group v-model="model">
<el-radio-button label="radio">单选</el-radio-button>
<el-radio-button label="multiple">多选</el-radio-button>
<el-radio-button value="radio">单选</el-radio-button>
<el-radio-button value="multiple">多选</el-radio-button>
</el-radio-group>
<el-divider direction="vertical" />
<component

View File

@@ -91,7 +91,7 @@ const {
@selection-change="handleSelectionChange"
/>
<el-button
class="absolute bottom-[17px]"
class="absolute bottom-[25px] left-[20px]"
type="primary"
size="small"
text