mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-05 13:37:45 +08:00
移除 Result 组件
This commit is contained in:
parent
6b5d432ab3
commit
6d562c2c5f
@ -1,84 +0,0 @@
|
||||
<script setup name="Result">
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
validator: val => ['success', 'warning', 'error'].includes(val),
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="result">
|
||||
<div v-if="type === 'success'" class="icon icon-success">
|
||||
<el-icon><el-icon-success-filled /></el-icon>
|
||||
</div>
|
||||
<div v-else-if="type === 'warning'" class="icon icon-warning">
|
||||
<el-icon><el-icon-warning-filled /></el-icon>
|
||||
</div>
|
||||
<div v-else class="icon icon-error">
|
||||
<el-icon><el-icon-circle-close-filled /></el-icon>
|
||||
</div>
|
||||
<h1>{{ title }}</h1>
|
||||
<div v-if="desc" class="desc">{{ desc }}</div>
|
||||
<div v-if="$slots.extra" class="extra">
|
||||
<slot name="extra" />
|
||||
</div>
|
||||
<div v-if="$slots.default" class="actions">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$success: #67c23a;
|
||||
$warning: #e6a23c;
|
||||
$error: #f56c6c;
|
||||
.result {
|
||||
width: 72%;
|
||||
margin: 20px auto 0;
|
||||
text-align: center;
|
||||
.icon {
|
||||
i {
|
||||
font-size: 80px;
|
||||
}
|
||||
&-success i {
|
||||
color: $success;
|
||||
}
|
||||
&-warning i {
|
||||
color: $warning;
|
||||
}
|
||||
&-error i {
|
||||
color: $error;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin: 20px 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.desc {
|
||||
color: #909399;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.extra {
|
||||
margin: 50px 0;
|
||||
padding: 24px 40px;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
background: #f8f8f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.actions {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -34,14 +34,6 @@ export default {
|
||||
title: '内容块'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'result',
|
||||
name: 'componentExtendExampleResult',
|
||||
component: () => import('@/views/component_extend_example/result.demo.vue'),
|
||||
meta: {
|
||||
title: '处理结果'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'actionbar',
|
||||
name: 'componentExtendExampleActionbar',
|
||||
|
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header title="处理结果" content="Result" />
|
||||
<page-main>
|
||||
<result type="success" title="提交成功" desc="提交结果页用于反馈一系列操作任务的处理结果。">
|
||||
<el-button type="primary">返回列表</el-button>
|
||||
<el-button>打印</el-button>
|
||||
</result>
|
||||
</page-main>
|
||||
<page-main>
|
||||
<result type="error" title="提交失败" desc="灰色额外区域可以显示一些补充的信息。请核对并修改以下信息后,再重新提交。">
|
||||
<template #extra>
|
||||
<div>您提交的内容有如下错误:</div>
|
||||
<div>
|
||||
您的账户已被冻结
|
||||
<a href="###">打印</a>
|
||||
</div>
|
||||
</template>
|
||||
<el-button type="primary">返回修改</el-button>
|
||||
</result>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
Loading…
Reference in New Issue
Block a user