提交 result 组件

example/docs/zh-CN/components/result.md

@@ -0,0 +1,25 @@
+::: anchor
+:::
+
+::: title 成功
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-result></lay-result>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

example/src/router/zh-CN.ts

@@ -340,6 +340,10 @@ const zhCN = [
             path: "/zh-CN/components/exception",
             component: () => import("../../docs/zh-CN/components/exception.md"),
             meta: { title: "异常" },
+          },          {
+            path: "/zh-CN/components/result",
+            component: () => import("../../docs/zh-CN/components/result.md"),
+            meta: { title: "结果" },
           },
         ],
       },

example/src/view/utils/menus.ts

@@ -309,6 +309,12 @@ const menus = [
         subTitle: "exception",
         path: "/zh-CN/components/exception",
       },      
+      {
+        id: 100,
+        title: "结果",
+        subTitle: "result",
+        path: "/zh-CN/components/result",
+      },
     ],
   },
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.6-alpha.5",
+  "version": "0.3.6-alpha.6",
   "author": "SleepRite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/component/exception/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { useSlots } from '@vue/runtime-core';
 export default {
     name: "LayException"
 }
 </script>
 <script setup lang="ts">
+import { defineProps, useSlots } from "vue";
 import "./index.less";
 
 export interface LayDropdownProps {
@@ -13,7 +13,7 @@ export interface LayDropdownProps {
   describe?: string
 }
 
-const slot = useSlots();
+const slots = useSlots();
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   title: "Exception",
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
 <template>
     <div class="layui-exception">
         <div class="layui-exception-image">
-            <slot name="image" v-if="slot.default"></slot>
+            <slot name="image" v-if="slots.default"></slot>
             <template v-else>
                 <div v-if="status=='401'" class="error-401" />
                 <div v-if="status=='403'" class="error-403" />

src/component/rate/index.ts

@@ -1,9 +1,8 @@
 import type { App } from "vue";
 import Component from "./index.vue";
-import type { IDefineComponent } from "../../types/index";
 
 Component.install = (app: App) => {
-  app.component(Component.name || "LayRate", Component);
+  app.component(Component.name, Component);
 };
 
-export default Component as IDefineComponent;
+export default Component;

src/component/result/index.less

@@ -0,0 +1,39 @@
+.result {
+	text-align: center;
+
+}
+.result .success svg {
+	color: #32C682;
+	text-align: center;
+	margin-top: 40px;
+
+}
+.result .error svg {
+	color: #f56c6c;
+	text-align: center;
+	margin-top: 40px;
+
+}
+.result .title {
+	margin-top: 25px;
+
+}
+.result .desc {
+	margin-top: 25px;
+	width: 60%;
+	margin-left: 20%;
+	color: rgba(0, 0, 0, .45);
+}
+.result .content {
+	margin-top: 20px;
+	width: 80%;
+	border-radius: 10px;
+	background-color: whitesmoke;
+	height: 200px;
+	margin-left: 10%;
+}
+.result .action {
+	padding-top: 10px;
+	border-top: 1px whitesmoke solid;
+	margin-top: 25px;
+}

src/component/result/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;

src/component/result/index.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+</script>
+
+<script setup lang="ts">
+import "./index.less"
+import { defineProps, useSlots } from "vue";
+
+export interface LayResultProps {
+  title?: string,
+  status?: 'success' | 'failure',
+  describe?: string
+}
+
+const slots = useSlots();
+
+const props = withDefaults(defineProps<LayResultProps>(), {
+  title: "Exception",
+  describe: "describe"
+});
+</script>
+
+<template>
+  <div class="result">
+    <div class="error">
+      <svg
+        viewBox="64 64 896 896"
+        data-icon="close-circle"
+        width="80px"
+        height="80px"
+        fill="currentColor"
+        aria-hidden="true"
+        focusable="false"
+        class=""
+      >
+        <path
+          d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+        ></path>
+        <path
+          d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        ></path>
+      </svg>
+    </div>
+    <h2 class="title">提交失败</h2>
+    <p class="desc">
+      请核对并修改以下信息后，再重新提交。如果仅是简单操作，使用 Message
+      全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示
+      “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
+    </p>
+    <div class="content"></div>
+    <div class="action">
+      <lay-button>返回修改</lay-button>
+      &nbsp;&nbsp;&nbsp;
+      <lay-button type="primary">返回首页</lay-button>
+    </div>
+  </div>
+</template>

src/index.ts

@@ -74,6 +74,7 @@ import LaySubMenu from "./component/subMenu/index";
 import LaySplitPanel from "./component/splitPanel/index";
 import LaySplitPanelItem from "./component/splitPanelItem/index";
 import LayException from "./component/exception/index"
+import LayResult from "./component/result/index"
 
 const components: Record<string, Component> = {
   LaySplitPanel,
@@ -144,7 +145,8 @@ const components: Record<string, Component> = {
   LayStep,
   LayStepItem,
   LaySubMenu,
-  LayException
+  LayException,
+  LayResult
 };
 
 const install = (app: App): void => {
@@ -223,7 +225,8 @@ export {
   LayStep,
   LayStepItem,
   LaySubMenu,
-  LayException
+  LayException,
+  LayResult
 };
 
 export { layer, useLayer };