mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-12 10:45:10 +08:00
feat(result): new componet Result (#1818)
* feat(result): new componet Result re #1137 * feat: fix docs * feat: perf slot * feat: use svg icon * feat: update variable name * feat: update style
This commit is contained in:
kooriookami
GitHub
parent
041d36242d
commit
634448d756
@ -90,6 +90,7 @@ import ElSpace from '@element-plus/space'
|
||||
import ElSkeleton from '@element-plus/skeleton'
|
||||
import ElSkeletonItem from '@element-plus/skeleton-item'
|
||||
import ElCheckTag from '@element-plus/check-tag'
|
||||
import ElResult from '@element-plus/result'
|
||||
|
||||
import { use, i18n } from '@element-plus/locale'
|
||||
// if you encountered problems alike "Can't resolve './version'"
|
||||
@ -209,6 +210,7 @@ const components = [
|
||||
ElSpace,
|
||||
ElSkeleton,
|
||||
ElSkeletonItem,
|
||||
ElResult,
|
||||
]
|
||||
|
||||
const plugins = [
|
||||
@ -329,6 +331,7 @@ export {
|
||||
ElSpace,
|
||||
ElSkeleton,
|
||||
ElSkeletonItem,
|
||||
ElResult,
|
||||
version,
|
||||
install,
|
||||
locale,
|
||||
|
||||
92
packages/result/__tests__/result.spec.ts
Normal file
92
packages/result/__tests__/result.spec.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import makeMount from '@element-plus/test-utils/make-mount'
|
||||
import Result from '../src/index.vue'
|
||||
|
||||
const AXIOM = 'Rem is the best girl'
|
||||
|
||||
describe('Result.vue', () => {
|
||||
const mount = makeMount(Result, {})
|
||||
test('render test', () => {
|
||||
const wrapper = mount()
|
||||
expect(wrapper.find('.el-result__icon').exists()).toBe(true)
|
||||
expect(wrapper.classes()).toContain('el-result')
|
||||
})
|
||||
|
||||
test('should render title props', () => {
|
||||
const wrapper = mount({
|
||||
props: {
|
||||
title: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__title').text()).toBe(AXIOM)
|
||||
})
|
||||
|
||||
test('should render sub-title props', () => {
|
||||
const wrapper = mount({
|
||||
props: {
|
||||
subTitle: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__subtitle').text()).toBe(AXIOM)
|
||||
})
|
||||
|
||||
test('should render icon props', async () => {
|
||||
const wrapper = mount({
|
||||
props: {
|
||||
icon: 'success',
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
|
||||
expect(wrapper.find('.el-result__icon svg').classes()).toContain('icon-success')
|
||||
await wrapper.setProps({
|
||||
icon: 'error',
|
||||
})
|
||||
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
|
||||
expect(wrapper.find('.el-result__icon svg').classes()).toContain('icon-error')
|
||||
await wrapper.setProps({
|
||||
icon: 'warning',
|
||||
})
|
||||
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
|
||||
expect(wrapper.find('.el-result__icon svg').classes()).toContain('icon-warning')
|
||||
await wrapper.setProps({
|
||||
icon: 'info',
|
||||
})
|
||||
expect(wrapper.find('.el-result__icon svg').exists()).toBe(true)
|
||||
expect(wrapper.find('.el-result__icon svg').classes()).toContain('icon-info')
|
||||
})
|
||||
|
||||
test('should render icon slots', () => {
|
||||
const wrapper = mount({
|
||||
slots: {
|
||||
icon: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__icon').exists()).toBe(true)
|
||||
})
|
||||
|
||||
test('should render title slots', () => {
|
||||
const wrapper = mount({
|
||||
slots: {
|
||||
title: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__title').exists()).toBe(true)
|
||||
})
|
||||
|
||||
test('should render sub-title slots', () => {
|
||||
const wrapper = mount({
|
||||
slots: {
|
||||
subTitle: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__subtitle').exists()).toBe(true)
|
||||
})
|
||||
|
||||
test('should render extra slots', () => {
|
||||
const wrapper = mount({
|
||||
slots: {
|
||||
extra: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.find('.el-result__extra').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
11
packages/result/index.ts
Normal file
11
packages/result/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { App } from 'vue'
|
||||
import type { SFCWithInstall } from '@element-plus/utils/types'
|
||||
import Result from './src/index.vue'
|
||||
|
||||
Result.install = (app: App): void => {
|
||||
app.component(Result.name, Result)
|
||||
}
|
||||
|
||||
const _Result: SFCWithInstall<typeof Result> = Result
|
||||
|
||||
export default _Result
|
||||
12
packages/result/package.json
Normal file
12
packages/result/package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "@element-plus/result",
|
||||
"version": "0.0.0",
|
||||
"main": "dist/index.js",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/test-utils": "^2.0.0-beta.3"
|
||||
}
|
||||
}
|
||||
15
packages/result/src/icon-error.vue
Normal file
15
packages/result/src/icon-error.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.57818,15.42182 C32.0157534,14.8593933 31.1038797,14.8593933 30.541453,15.42182 L30.541453,15.42182 L24.0006789,21.9625941 L17.458547,15.42182 C16.8961203,14.8593933 15.9842466,14.8593933 15.42182,15.42182 C14.8593933,15.9842466 14.8593933,16.8961203 15.42182,17.458547 L15.42182,17.458547 L21.9639519,23.9993211 L15.42182,30.541453 C14.8593933,31.1038797 14.8593933,32.0157534 15.42182,32.57818 C15.9842466,33.1406067 16.8961203,33.1406067 17.458547,32.57818 L17.458547,32.57818 L24.0006789,26.0360481 L30.541453,32.57818 C31.1038797,33.1406067 32.0157534,33.1406067 32.57818,32.57818 C33.1406067,32.0157534 33.1406067,31.1038797 32.57818,30.541453 L32.57818,30.541453 L26.0374059,23.9993211 L32.57818,17.458547 C33.1406067,16.8961203 33.1406067,15.9842466 32.57818,15.42182 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'IconError',
|
||||
})
|
||||
</script>
|
||||
15
packages/result/src/icon-info.vue
Normal file
15
packages/result/src/icon-info.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,19 L21,19 C20.1715729,19 19.5,19.6715729 19.5,20.5 C19.5,21.3284271 20.1715729,22 21,22 L21,22 L22.5,22 L22.5,31 L21,31 C20.1715729,31 19.5,31.6715729 19.5,32.5 C19.5,33.3284271 20.1715729,34 21,34 L21,34 L27,34 C27.8284271,34 28.5,33.3284271 28.5,32.5 C28.5,31.6715729 27.8284271,31 27,31 L27,31 L25.5,31 L25.5,20.5 C25.5,19.6715729 24.8284271,19 24,19 L24,19 Z M24,13 C22.8954305,13 22,13.8954305 22,15 C22,16.1045695 22.8954305,17 24,17 C25.1045695,17 26,16.1045695 26,15 C26,13.8954305 25.1045695,13 24,13 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'IconInfo',
|
||||
})
|
||||
</script>
|
||||
15
packages/result/src/icon-success.vue
Normal file
15
packages/result/src/icon-success.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M34.5548098,16.4485711 C33.9612228,15.8504763 32.9988282,15.8504763 32.4052412,16.4485711 L32.4052412,16.4485711 L21.413757,27.5805811 L21.413757,27.5805811 L21.4034642,27.590855 C21.0097542,27.9781674 20.3766105,27.9729811 19.9892981,27.5792711 L19.9892981,27.5792711 L15.5947588,23.1121428 C15.0011718,22.514048 14.0387772,22.514048 13.4451902,23.1121428 C12.8516033,23.7102376 12.8516033,24.6799409 13.4451902,25.2780357 L13.4451902,25.2780357 L19.6260786,31.5514289 C20.2196656,32.1495237 21.1820602,32.1495237 21.7756472,31.5514289 L21.7756472,31.5514289 L34.5548098,18.614464 C35.1483967,18.0163692 35.1483967,17.0466659 34.5548098,16.4485711 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'IconSuccess',
|
||||
})
|
||||
</script>
|
||||
15
packages/result/src/icon-warning.vue
Normal file
15
packages/result/src/icon-warning.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,31 C22.8954305,31 22,31.8954305 22,33 C22,34.1045695 22.8954305,35 24,35 C25.1045695,35 26,34.1045695 26,33 C26,31.8954305 25.1045695,31 24,31 Z M24,14 C23.1715729,14 22.5,14.6715729 22.5,15.5 L22.5,15.5 L22.5,27.5 C22.5,28.3284271 23.1715729,29 24,29 C24.8284271,29 25.5,28.3284271 25.5,27.5 L25.5,27.5 L25.5,15.5 C25.5,14.6715729 24.8284271,14 24,14 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'IconWarning',
|
||||
})
|
||||
</script>
|
||||
70
packages/result/src/index.vue
Normal file
70
packages/result/src/index.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="el-result">
|
||||
<div class="el-result__icon">
|
||||
<slot name="icon">
|
||||
<component :is="iconElement" :class="iconElement" />
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="title || $slots.title" class="el-result__title">
|
||||
<slot name="title">
|
||||
<p>{{ title }}</p>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="subTitle || $slots.subTitle" class="el-result__subtitle">
|
||||
<slot name="subTitle">
|
||||
<p>{{ subTitle }}</p>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="$slots.extra" class="el-result__extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import IconSuccess from './icon-success.vue'
|
||||
import IconError from './icon-error.vue'
|
||||
import IconWarning from './icon-warning.vue'
|
||||
import IconInfo from './icon-info.vue'
|
||||
|
||||
const IconMap: Indexable<string> = {
|
||||
success: 'icon-success',
|
||||
warning: 'icon-warning',
|
||||
error: 'icon-error',
|
||||
info: 'icon-info',
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ElResult',
|
||||
components: {
|
||||
[IconSuccess.name]: IconSuccess,
|
||||
[IconError.name]: IconError,
|
||||
[IconWarning.name]: IconWarning,
|
||||
[IconInfo.name]: IconInfo,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const iconElement = computed(() => {
|
||||
const icon = props.icon
|
||||
return icon && IconMap[icon] ? IconMap[icon] : 'icon-info'
|
||||
})
|
||||
|
||||
return {
|
||||
iconElement,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -984,6 +984,19 @@ $--empty-image-width: 160px !default;
|
||||
$--empty-description-margin-top: 20px !default;
|
||||
$--empty-bottom-margin-top: 20px !default;
|
||||
|
||||
/* Result
|
||||
-------------------------- */
|
||||
$--result-padding: 40px 30px !default;
|
||||
$--result-icon-font-size: 64px !default;
|
||||
$--result-title-font-size: 20px !default;
|
||||
$--result-title-margin-top: 20px !default;
|
||||
$--result-subtitle-margin-top: 10px !default;
|
||||
$--result-extra-margin-top: 30px !default;
|
||||
$--result-info-color: $--color-info !default;
|
||||
$--result-success-color: $--color-success !default;
|
||||
$--result-warning-color: $--color-warning !default;
|
||||
$--result-danger-color: $--color-danger !default;
|
||||
|
||||
/* Break-point
|
||||
--------------------------*/
|
||||
$--sm: 768px !default;
|
||||
|
||||
@ -87,3 +87,4 @@
|
||||
@import "./empty.scss";
|
||||
@import "./affix.scss";
|
||||
@import "./check-tag.scss";
|
||||
@import "./result.scss";
|
||||
|
||||
61
packages/theme-chalk/src/result.scss
Normal file
61
packages/theme-chalk/src/result.scss
Normal file
@ -0,0 +1,61 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(result) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: $--result-padding;
|
||||
|
||||
@include e(icon) {
|
||||
svg {
|
||||
width: $--result-icon-font-size;
|
||||
height: $--result-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
margin-top: $--result-title-margin-top;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $--result-title-font-size;
|
||||
color: $--color-text-primary;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(subtitle) {
|
||||
margin-top: $--result-subtitle-margin-top;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-regular;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(extra) {
|
||||
margin-top: $--result-extra-margin-top;
|
||||
}
|
||||
|
||||
.icon-success {
|
||||
fill: $--result-success-color;
|
||||
}
|
||||
|
||||
.icon-error {
|
||||
fill: $--result-danger-color;
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
fill: $--result-info-color;
|
||||
}
|
||||
|
||||
.icon-warning {
|
||||
fill: $--result-warning-color;
|
||||
}
|
||||
}
|
||||
76
website/docs/en-US/result.md
Normal file
76
website/docs/en-US/result.md
Normal file
@ -0,0 +1,76 @@
|
||||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template #icon>
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| sub-title | custom sub title |
|
||||
| extra | custom extra area |
|
||||
76
website/docs/es/result.md
Normal file
76
website/docs/es/result.md
Normal file
@ -0,0 +1,76 @@
|
||||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template #icon>
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| sub-title | custom sub title |
|
||||
| extra | custom extra area |
|
||||
74
website/docs/fr-FR/result.md
Normal file
74
website/docs/fr-FR/result.md
Normal file
@ -0,0 +1,74 @@
|
||||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template #icon>
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| sub-title | custom sub title |
|
||||
| extra | custom extra area |
|
||||
76
website/docs/jp/result.md
Normal file
76
website/docs/jp/result.md
Normal file
@ -0,0 +1,76 @@
|
||||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template #icon>
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| sub-title | custom sub title |
|
||||
| extra | custom extra area |
|
||||
76
website/docs/zh-CN/result.md
Normal file
76
website/docs/zh-CN/result.md
Normal file
@ -0,0 +1,76 @@
|
||||
## Result 结果
|
||||
|
||||
用于对用户的操作结果或者异常状态做反馈。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 自定义内容
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="抱歉，请求错误">
|
||||
<template #icon>
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | 标题 | string | — | — |
|
||||
| sub-title | 二级标题 | string | — | — |
|
||||
| icon | 图标类型 | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | 说明 |
|
||||
|------|--------|
|
||||
| icon | 自定义图标 |
|
||||
| title | 自定义标题 |
|
||||
| sub-title | 自定义二级标题 |
|
||||
| extra | 自定义底部额外区域 |
|
||||
@ -196,6 +196,10 @@
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty 空状态"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result 结果"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -514,6 +518,10 @@
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -836,6 +844,10 @@
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -1158,6 +1170,10 @@
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -1480,6 +1496,10 @@
|
||||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user