From 5a1f43a9d8ad666364744be9d4e6ebfa317abc7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com> Date: Sat, 29 Jan 2022 13:07:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=20exception=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/docs/zh-CN/components/exception.md | 87 ++++ example/src/router/zh-CN.ts | 5 + example/src/view/utils/menus.ts | 6 + src/component/exception/image/403.svg | 508 +++++++++++++++++++++ src/component/exception/image/404.svg | 314 +++++++++++++ src/component/exception/image/500.svg | 208 +++++++++ src/component/exception/index.less | 40 ++ src/component/exception/index.ts | 8 + src/component/exception/index.vue | 38 ++ src/index.ts | 3 + 10 files changed, 1217 insertions(+) create mode 100644 example/docs/zh-CN/components/exception.md create mode 100644 src/component/exception/image/403.svg create mode 100644 src/component/exception/image/404.svg create mode 100644 src/component/exception/image/500.svg create mode 100644 src/component/exception/index.less create mode 100644 src/component/exception/index.ts create mode 100644 src/component/exception/index.vue diff --git a/example/docs/zh-CN/components/exception.md b/example/docs/zh-CN/components/exception.md new file mode 100644 index 00000000..73733253 --- /dev/null +++ b/example/docs/zh-CN/components/exception.md @@ -0,0 +1,87 @@ +::: anchor +::: + +::: title 403 +::: + +::: demo 使用 `lay-exception` 标签, 创建一个异常页面 + + + + + +::: + +::: title 404 +::: + +::: demo 使用 `lay-exception` 标签, 创建一个异常页面 + + + + + +::: + + +::: title 500 +::: + +::: demo 使用 `lay-exception` 标签, 创建一个异常页面 + + + + + +::: diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts index 4e1093b3..572fdf91 100644 --- a/example/src/router/zh-CN.ts +++ b/example/src/router/zh-CN.ts @@ -336,6 +336,11 @@ const zhCN = [ component: () => import("../../docs/zh-CN/components/countup.md"), meta: { title: "数字滚动" }, }, + { + path: "/zh-CN/components/exception", + component: () => import("../../docs/zh-CN/components/exception.md"), + meta: { title: "异常" }, + }, ], }, { diff --git a/example/src/view/utils/menus.ts b/example/src/view/utils/menus.ts index 1aa7b746..57012a78 100644 --- a/example/src/view/utils/menus.ts +++ b/example/src/view/utils/menus.ts @@ -303,6 +303,12 @@ const menus = [ subTitle: "splitPanel", path: "/zh-CN/components/splitPanel", }, + { + id: 100, + title: "异常", + subTitle: "exception", + path: "/zh-CN/components/exception", + }, ], }, { diff --git a/src/component/exception/image/403.svg b/src/component/exception/image/403.svg new file mode 100644 index 00000000..610f136f --- /dev/null +++ b/src/component/exception/image/403.svg @@ -0,0 +1,508 @@ + + + + Group 9 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/component/exception/image/404.svg b/src/component/exception/image/404.svg new file mode 100644 index 00000000..5531d05c --- /dev/null +++ b/src/component/exception/image/404.svg @@ -0,0 +1,314 @@ + + + + Group 4 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/component/exception/image/500.svg b/src/component/exception/image/500.svg new file mode 100644 index 00000000..de723b1e --- /dev/null +++ b/src/component/exception/image/500.svg @@ -0,0 +1,208 @@ + + + + Group 4 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/component/exception/index.less b/src/component/exception/index.less new file mode 100644 index 00000000..68abfb6b --- /dev/null +++ b/src/component/exception/index.less @@ -0,0 +1,40 @@ +.layui-exception{ + .layui-exception-image{ + width: 50%; + display: inline-block; + vertical-align: top; + > div { + width: 200px; + height: 200px; + background-size: 100% 100%; + background-repeat: no-repeat; + } + .error-403 { + background-image: url(./image/403.svg); + } + .error-404 { + background-image: url(./image/404.svg); + } + .error-500 { + background-image: url(./image/500.svg); + } + } + .layui-exception-details{ + .layui-exception-details-content { + .layui-exception-details-title{ + font-size: 68px; + color: #434e59; + margin-bottom: 24px; + font-weight: 600; + } + .layui-exception-details-describe{ + font-size: 20px; + color: rgba(0, 0, 0, .45); + margin-bottom: 16px; + } + } + width: 50%; + vertical-align: top; + display: inline-block; + } +} \ No newline at end of file diff --git a/src/component/exception/index.ts b/src/component/exception/index.ts new file mode 100644 index 00000000..5511c18f --- /dev/null +++ b/src/component/exception/index.ts @@ -0,0 +1,8 @@ +import type { App } from "vue"; +import Component from "./index.vue"; + +Component.install = (app: App) => { + app.component(Component.name, Component); +}; + +export default Component; diff --git a/src/component/exception/index.vue b/src/component/exception/index.vue new file mode 100644 index 00000000..96c95d85 --- /dev/null +++ b/src/component/exception/index.vue @@ -0,0 +1,38 @@ + + + \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 4d134a59..c9505ba1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -73,6 +73,7 @@ import LayStepItem from "./component/stepItem/index"; import LaySubMenu from "./component/subMenu/index"; import LaySplitPanel from "./component/splitPanel/index"; import LaySplitPanelItem from "./component/splitPanelItem/index"; +import LayException from "./component/exception/index" const components: Record = { LaySplitPanel, @@ -143,6 +144,7 @@ const components: Record = { LayStep, LayStepItem, LaySubMenu, + LayException }; const install = (app: App): void => { @@ -221,6 +223,7 @@ export { LayStep, LayStepItem, LaySubMenu, + LayException }; export { layer, useLayer };