mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-30 09:24:46 +08:00
Merge remote-tracking branch 'origin/main' into gitee
This commit is contained in:
commit
a118b701d1
@ -3,14 +3,14 @@ import { getPackageSize } from "./utils";
|
||||
import dayjs, { type Dayjs } from "dayjs";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import gradientString from "gradient-string";
|
||||
import boxen, { type Options as boxenOptions } from "boxen";
|
||||
import boxen, { type Options as BoxenOptions } from "boxen";
|
||||
dayjs.extend(duration);
|
||||
|
||||
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
||||
`Hello! 欢迎使用 vue-pure-admin\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
||||
);
|
||||
|
||||
const boxenOprions: boxenOptions = {
|
||||
const boxenOptions: BoxenOptions = {
|
||||
padding: 0.5,
|
||||
borderColor: "cyan",
|
||||
borderStyle: "round"
|
||||
@ -28,7 +28,7 @@ export function viteBuildInfo(): Plugin {
|
||||
outDir = resolvedConfig.build?.outDir ?? "dist";
|
||||
},
|
||||
buildStart() {
|
||||
console.log(boxen(welcomeMessage, boxenOprions));
|
||||
console.log(boxen(welcomeMessage, boxenOptions));
|
||||
if (config.command === "build") {
|
||||
startTime = dayjs(new Date());
|
||||
}
|
||||
@ -46,7 +46,7 @@ export function viteBuildInfo(): Plugin {
|
||||
.duration(endTime.diff(startTime))
|
||||
.format("mm分ss秒")},打包后的大小为${size})`
|
||||
),
|
||||
boxenOprions
|
||||
boxenOptions
|
||||
)
|
||||
);
|
||||
}
|
||||
|
@ -44,7 +44,9 @@ menus:
|
||||
hsmap: Map
|
||||
hsdraggable: Draggable
|
||||
hssplitPane: Split Pane
|
||||
hsbutton: Button
|
||||
hsElButton: Button
|
||||
hsbutton: Button Animation
|
||||
hsCheckButton: Check Button
|
||||
hscropping: Picture Cropping
|
||||
hsanimatecss: AnimateCss Selector
|
||||
hscountTo: Digital Animation
|
||||
@ -102,7 +104,6 @@ menus:
|
||||
hsCascader: Area Cascader
|
||||
hsSwiper: Swiper Plugin
|
||||
hsVirtualList: Virtual List
|
||||
hsCheckButton: Check Button
|
||||
hsPdf: PDF Preview
|
||||
hsExcel: Export Excel
|
||||
hsInfiniteScroll: Table Infinite Scroll
|
||||
|
@ -44,7 +44,9 @@ menus:
|
||||
hsmap: 地图
|
||||
hsdraggable: 拖拽
|
||||
hssplitPane: 切割面板
|
||||
hsbutton: 按钮
|
||||
hsElButton: 按钮
|
||||
hsCheckButton: 可选按钮
|
||||
hsbutton: 按钮动效
|
||||
hscropping: 图片裁剪
|
||||
hsanimatecss: animate.css选择器
|
||||
hscountTo: 数字动画
|
||||
@ -102,7 +104,6 @@ menus:
|
||||
hsCascader: 区域级联选择器
|
||||
hsSwiper: Swiper插件
|
||||
hsVirtualList: 虚拟列表
|
||||
hsCheckButton: 可选按钮
|
||||
hsPdf: PDF预览
|
||||
hsExcel: 导出Excel
|
||||
hsInfiniteScroll: 表格无限滚动
|
||||
|
@ -123,7 +123,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/videoFrame",
|
||||
path: "/able/video-frame",
|
||||
name: "VideoFrame",
|
||||
component: () => import("@/views/able/video-frame/index.vue"),
|
||||
meta: {
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/infiniteScroll",
|
||||
path: "/able/infinite-scroll",
|
||||
name: "InfiniteScroll",
|
||||
component: () => import("@/views/able/infinite-scroll.vue"),
|
||||
meta: {
|
||||
@ -147,7 +147,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/menuTree",
|
||||
path: "/able/menu-tree",
|
||||
name: "MenuTree",
|
||||
component: () => import("@/views/able/menu-tree.vue"),
|
||||
meta: {
|
||||
@ -155,7 +155,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/lineTree",
|
||||
path: "/able/line-tree",
|
||||
name: "LineTree",
|
||||
component: () => import("@/views/able/line-tree.vue"),
|
||||
meta: {
|
||||
|
@ -27,7 +27,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/iconSelect",
|
||||
path: "/components/icon-select",
|
||||
name: "IconSelect",
|
||||
component: () => import("@/views/components/icon-select.vue"),
|
||||
meta: {
|
||||
@ -51,7 +51,23 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/checkButton",
|
||||
path: "/components/segmented",
|
||||
name: "Segmented",
|
||||
component: () => import("@/views/components/segmented.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hssegmented")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/el-button",
|
||||
name: "PureButton",
|
||||
component: () => import("@/views/components/el-button.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsElButton")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/check-button",
|
||||
name: "CheckButton",
|
||||
component: () => import("@/views/components/check-button.vue"),
|
||||
meta: {
|
||||
@ -60,11 +76,11 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/segmented",
|
||||
name: "Segmented",
|
||||
component: () => import("@/views/components/segmented.vue"),
|
||||
path: "/components/button",
|
||||
name: "ButtonPage",
|
||||
component: () => import("@/views/components/button.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hssegmented")
|
||||
title: $t("menus.hsbutton")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -92,7 +108,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/splitPane",
|
||||
path: "/components/split-pane",
|
||||
name: "SplitPane",
|
||||
component: () => import("@/views/components/split-pane.vue"),
|
||||
meta: {
|
||||
@ -116,7 +132,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/countTo",
|
||||
path: "/components/count-to",
|
||||
name: "CountTo",
|
||||
component: () => import("@/views/components/count-to.vue"),
|
||||
meta: {
|
||||
@ -140,7 +156,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/seamlessScroll",
|
||||
path: "/components/seamless-scroll",
|
||||
name: "SeamlessScroll",
|
||||
component: () => import("@/views/components/seamless-scroll.vue"),
|
||||
meta: {
|
||||
@ -148,20 +164,12 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/virtualList",
|
||||
path: "/components/virtual-list",
|
||||
name: "VirtualList",
|
||||
component: () => import("@/views/components/virtual-list/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVirtualList")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/button",
|
||||
name: "ButtonPage",
|
||||
component: () => import("@/views/components/button.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsbutton")
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
|
@ -2,8 +2,8 @@ import { $t } from "@/plugins/i18n";
|
||||
import { flowchart } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/flowChart",
|
||||
redirect: "/flowChart/index",
|
||||
path: "/flow-chart",
|
||||
redirect: "/flow-chart/index",
|
||||
meta: {
|
||||
icon: "setUp",
|
||||
title: $t("menus.hsflowChart"),
|
||||
@ -11,7 +11,7 @@ export default {
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/flowChart/index",
|
||||
path: "/flow-chart/index",
|
||||
name: "FlowChart",
|
||||
component: () => import("@/views/flow-chart/index.vue"),
|
||||
meta: {
|
||||
|
@ -3,8 +3,8 @@ import { formdesign } from "@/router/enums";
|
||||
const IFrame = () => import("@/layout/frameView.vue");
|
||||
|
||||
export default {
|
||||
path: "/formDesign",
|
||||
redirect: "/formDesign/index",
|
||||
path: "/form-design",
|
||||
redirect: "/form-design/index",
|
||||
meta: {
|
||||
icon: "terminalWindowLine",
|
||||
title: $t("menus.hsFormDesign"),
|
||||
@ -12,7 +12,7 @@ export default {
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/formDesign/index",
|
||||
path: "/form-design/index",
|
||||
name: "FormDesign",
|
||||
component: IFrame,
|
||||
meta: {
|
||||
|
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
|
||||
@ -9,6 +9,8 @@ defineOptions({
|
||||
|
||||
const spaceSize = ref(20);
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
const checked = ref(true);
|
||||
|
||||
const radio = ref("wait");
|
||||
const radioBox = ref("complete");
|
||||
@ -35,6 +37,7 @@ const checkTag = ref([
|
||||
]);
|
||||
const curTagMap = ref({});
|
||||
function onChecked(tag, index) {
|
||||
if (size.value === "disabled") return;
|
||||
curTagMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
@ -64,12 +67,24 @@ const checkGroupTag = ref([
|
||||
]);
|
||||
const curTagGroupMap = ref({});
|
||||
function onGroupChecked(tag, index) {
|
||||
if (size.value === "disabled") return;
|
||||
curTagGroupMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
});
|
||||
checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
|
||||
}
|
||||
|
||||
function onSingleChecked() {
|
||||
if (size.value === "disabled") return;
|
||||
checked.value = !checked.value;
|
||||
}
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -80,10 +95,10 @@ function onGroupChecked(tag, index) {
|
||||
可选按钮
|
||||
<br />
|
||||
<el-radio-group v-model="size" size="small">
|
||||
<el-radio-button label="large">大尺寸</el-radio-button>
|
||||
<el-radio-button label="default">默认尺寸</el-radio-button>
|
||||
<el-radio-button label="small">小尺寸</el-radio-button>
|
||||
<el-radio-button label="disabled">禁用</el-radio-button>
|
||||
<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-group>
|
||||
</span>
|
||||
</div>
|
||||
@ -91,7 +106,7 @@ function onGroupChecked(tag, index) {
|
||||
<p class="mb-2">单选(紧凑风格的按钮样式)</p>
|
||||
<el-radio-group
|
||||
v-model="radio"
|
||||
:size="size as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio-button label="wait">等待中</el-radio-button>
|
||||
@ -103,7 +118,7 @@ function onGroupChecked(tag, index) {
|
||||
<p class="mb-2">单选(带有边框)</p>
|
||||
<el-radio-group
|
||||
v-model="radioBox"
|
||||
:size="size as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio label="wait" border>等待中</el-radio>
|
||||
@ -115,7 +130,7 @@ function onGroupChecked(tag, index) {
|
||||
<p class="mb-2">单选(自定义内容)</p>
|
||||
<el-radio-group
|
||||
v-model="radioCustom"
|
||||
:size="size as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio-button label="wait">
|
||||
@ -142,7 +157,7 @@ function onGroupChecked(tag, index) {
|
||||
<p class="mb-2">多选(紧凑风格的按钮样式)</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroup"
|
||||
:size="size as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox-button label="apple">苹果</el-checkbox-button>
|
||||
@ -154,7 +169,7 @@ function onGroupChecked(tag, index) {
|
||||
<p class="mb-2">多选(带有边框)</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroupBox"
|
||||
:size="size as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox label="cucumber" border>黄瓜</el-checkbox>
|
||||
@ -167,7 +182,7 @@ function onGroupChecked(tag, index) {
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroupCustom"
|
||||
class="pure-checkbox"
|
||||
:size="size as any"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox-button label="tomato">
|
||||
@ -209,7 +224,11 @@ function onGroupChecked(tag, index) {
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkTag"
|
||||
:key="index"
|
||||
class="select-none"
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
tag.checked && 'is-active'
|
||||
]"
|
||||
:checked="tag.checked"
|
||||
@change="onChecked(tag, index)"
|
||||
>
|
||||
@ -229,13 +248,31 @@ function onGroupChecked(tag, index) {
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkGroupTag"
|
||||
:key="index"
|
||||
class="select-none"
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
tag.checked && 'is-active'
|
||||
]"
|
||||
:checked="tag.checked"
|
||||
@change="onGroupChecked(tag, index)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</el-check-tag>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">单个可选按钮</p>
|
||||
<el-check-tag
|
||||
:class="[
|
||||
'select-none',
|
||||
size === 'disabled' && 'tag-disabled',
|
||||
checked && 'is-active'
|
||||
]"
|
||||
:checked="checked"
|
||||
@change="onSingleChecked"
|
||||
>
|
||||
一个人也要努力 😊
|
||||
</el-check-tag>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@ -272,4 +309,19 @@ function onGroupChecked(tag, index) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 可控制间距的按钮禁用样式 */
|
||||
.tag-disabled {
|
||||
color: var(--el-disabled-text-color);
|
||||
cursor: not-allowed;
|
||||
background-color: var(--el-color-info-light-9);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-info-light-9);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
233
src/views/components/el-button.vue
Normal file
233
src/views/components/el-button.vue
Normal file
@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "PureButton"
|
||||
});
|
||||
|
||||
const { isDark } = useDark();
|
||||
const size = ref("default");
|
||||
const dynamicSize = ref();
|
||||
|
||||
const baseRadio = ref("default");
|
||||
const buttonList = [
|
||||
{
|
||||
type: "",
|
||||
text: "Default",
|
||||
icon: "ep:search"
|
||||
},
|
||||
{
|
||||
type: "primary",
|
||||
text: "Primary",
|
||||
icon: "ep:edit"
|
||||
},
|
||||
{
|
||||
type: "success",
|
||||
text: "Success",
|
||||
icon: "ep:check"
|
||||
},
|
||||
{
|
||||
type: "info",
|
||||
text: "Info",
|
||||
icon: "ep:message"
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
text: "Warning",
|
||||
icon: "ep:star"
|
||||
},
|
||||
{
|
||||
type: "danger",
|
||||
text: "Danger",
|
||||
icon: "ep:delete"
|
||||
}
|
||||
];
|
||||
|
||||
watch(size, val =>
|
||||
val === "disabled"
|
||||
? (dynamicSize.value = "default")
|
||||
: (dynamicSize.value = size.value)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/button.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
Button 按钮
|
||||
</el-link>
|
||||
<br />
|
||||
<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-group>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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-group>
|
||||
<br />
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
v-for="(button, index) in buttonList"
|
||||
:key="index"
|
||||
:type="button.type"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:plain="baseRadio === 'plain'"
|
||||
:round="baseRadio === 'round'"
|
||||
:circle="baseRadio === 'circle'"
|
||||
:link="baseRadio === 'link'"
|
||||
:text="baseRadio === 'text' || baseRadio === 'text-bg'"
|
||||
:bg="baseRadio === 'text-bg'"
|
||||
:icon="useRenderIcon(button.icon)"
|
||||
>
|
||||
<template v-if="baseRadio !== 'circle'" #default>
|
||||
<p>{{ button.text }}</p>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4">加载状态按钮</p>
|
||||
<el-button
|
||||
text
|
||||
bg
|
||||
type="primary"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:loading="size !== 'disabled'"
|
||||
>
|
||||
{{ size === "disabled" ? "停止加载" : "加载中" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:loading-icon="useRenderIcon('ep:eleme')"
|
||||
:loading="size !== 'disabled'"
|
||||
>
|
||||
{{ size === "disabled" ? "停止加载" : "加载中" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:loading="size !== 'disabled'"
|
||||
>
|
||||
<template #loading>
|
||||
<div class="custom-loading">
|
||||
<svg class="circular" viewBox="-10, -10, 50, 50">
|
||||
<path
|
||||
class="path"
|
||||
d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
"
|
||||
style="fill: rgb(0 0 0 / 0%); stroke-width: 4px"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
{{ size === "disabled" ? "停止加载" : "加载中" }}
|
||||
</el-button>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4">自定义元素标签。例如:按钮、div、链接</p>
|
||||
<el-button :size="dynamicSize" :disabled="size === 'disabled'">
|
||||
button 标签
|
||||
</el-button>
|
||||
<el-button
|
||||
tag="div"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
div 标签
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
tag="a"
|
||||
:href="
|
||||
size === 'disabled'
|
||||
? 'javascript:void(0);'
|
||||
: 'https://element-plus.org/zh-CN/component/button.html#tag'
|
||||
"
|
||||
:target="size === 'disabled' ? '_self' : '_blank'"
|
||||
rel="noopener noreferrer"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
a 链接
|
||||
</el-button>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4">自定义颜色</p>
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
color="#626aef"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:dark="isDark"
|
||||
>
|
||||
Default
|
||||
</el-button>
|
||||
<el-button
|
||||
color="#626aef"
|
||||
:size="dynamicSize"
|
||||
:disabled="size === 'disabled'"
|
||||
:dark="isDark"
|
||||
plain
|
||||
>
|
||||
Plain
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
.el-button .custom-loading .circular {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 6px;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.el-button .custom-loading .circular .path {
|
||||
stroke: var(--el-button-text-color);
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 2;
|
||||
animation: loading-dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user