完成 result 组件
This commit is contained in:
就眠儀式
parent
2543aadc01
commit
fde8e63696
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-input-number` 标签, 创建数字输入框
|
||||
|
||||
<template>
|
||||
<lay-input-number v-model="data"></lay-input-number>
|
||||
|
||||
@ -172,17 +172,29 @@ export default {
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<router-link to="">首页</router-link>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
首页
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-sub-menu id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">目录</router-link>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
目录
|
||||
</router-link>
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<router-link to="">菜单</router-link>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<router-link to="">菜单</router-link>
|
||||
<router-link to="">
|
||||
<lay-icon type="layui-icon-home"></lay-icon>
|
||||
菜单
|
||||
</router-link>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-page` 标签, 创建分页
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-radio` 标签, 创建一个单选框
|
||||
|
||||
<template>
|
||||
<lay-form>
|
||||
|
||||
@ -22,4 +22,27 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 失败
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
|
||||
|
||||
<template>
|
||||
<lay-result status="failure"></lay-result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-slider` 标签, 创建滑块
|
||||
|
||||
<template>
|
||||
<lay-slider v-model="value1" :disabled="false"></lay-slider>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-table` 标签, 创建表格
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns" :dataSource="dataSource">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-textarea` 标签, 创建文本域
|
||||
|
||||
<template>
|
||||
<lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 使用 `lay-transfer` 标签, 创建穿梭框
|
||||
|
||||
<template>
|
||||
<lay-transfer :dataSource="dataSource1"></lay-transfer>
|
||||
|
||||
@ -11,6 +11,21 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.3.x">
|
||||
<ul>
|
||||
<a name="0-3-6"> </a>
|
||||
<li>
|
||||
<h3>0.3.6 <span class="layui-badge-rim">2022-01-24</span></h3>
|
||||
<ul>
|
||||
<li>[新增] result 结果组件, 提供 success error 通用状态页。</li>
|
||||
<li>[新增] exception 异常组件, 提供 403, 404, 500 通用异常页。</li>
|
||||
<li>[新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。</li>
|
||||
<li>[新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。</li>
|
||||
<li>[新增] menu 组件 theme 属性, 可选值 light 和 dark。</li>
|
||||
<li>[修复] table 组件 header 不随 body 滚动。</li>
|
||||
<li>[升级] vue 3.2.29 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-5"> </a>
|
||||
<li>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "0.3.6-alpha.6",
|
||||
"version": "0.3.6-alpha.7",
|
||||
"author": "SleepRite",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -9,4 +9,4 @@
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
.layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
|
||||
top: 0px;
|
||||
left: 106px;
|
||||
left: 94px;
|
||||
}
|
||||
|
||||
.layui-nav .layui-show.layui-anim-upbit .layui-nav-item {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
.result .error svg {
|
||||
.result .failure svg {
|
||||
color: #f56c6c;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
@ -29,7 +29,6 @@
|
||||
width: 80%;
|
||||
border-radius: 10px;
|
||||
background-color: whitesmoke;
|
||||
height: 200px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.result .action {
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayResult"
|
||||
}
|
||||
name: "LayResult",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less"
|
||||
import "./index.less";
|
||||
import { defineProps, useSlots } from "vue";
|
||||
|
||||
export interface LayResultProps {
|
||||
title?: string,
|
||||
status?: 'success' | 'failure',
|
||||
describe?: string
|
||||
title?: string;
|
||||
status?: "success" | "failure";
|
||||
describe?: string;
|
||||
}
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
const props = withDefaults(defineProps<LayResultProps>(), {
|
||||
title: "Exception",
|
||||
describe: "describe"
|
||||
title: "提交信息",
|
||||
status: "success",
|
||||
describe: "请核对并修改以下信息后，再重新提交。",
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="result">
|
||||
<div class="error">
|
||||
<div :class="[status]">
|
||||
<svg
|
||||
v-if="status === 'failure'"
|
||||
viewBox="64 64 896 896"
|
||||
data-icon="close-circle"
|
||||
width="80px"
|
||||
@ -42,18 +44,35 @@ const props = withDefaults(defineProps<LayResultProps>(), {
|
||||
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>
|
||||
|
||||
<svg
|
||||
v-else
|
||||
viewBox="64 64 896 896"
|
||||
data-icon="check-circle"
|
||||
width="80px"
|
||||
height="80px"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
class=""
|
||||
>
|
||||
<path
|
||||
d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
></path>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 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>
|
||||
<h2 class="title">{{ title }}</h2>
|
||||
<p class="desc">
|
||||
请核对并修改以下信息后，再重新提交。如果仅是简单操作，使用 Message
|
||||
全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示
|
||||
“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
|
||||
{{ describe }}
|
||||
</p>
|
||||
<div class="content"></div>
|
||||
<div class="content">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
<div class="action">
|
||||
<lay-button>返回修改</lay-button>
|
||||
|
||||
<lay-button type="primary">返回首页</lay-button>
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user