feat: 新增 empty 组件 image 插槽, 完成部分组件的按需加载

This commit is contained in:
就眠儀式 2022-04-10 12:46:31 +08:00
parent ca2ff33119
commit 516fc19eb0
17 changed files with 199 additions and 131 deletions

View File

@ -1,27 +1,22 @@
@import (reference) "../../theme/variable.less"; @import (reference) "../../theme/variable.less";
@button-primary-color: var(--button-primary-color);
@button-primary-border-color: var(--button-primary-border-color);
@button-normal-color: var(--button-normal-color);
@button-normal-border-color: var(--button-normal-border-color);
@button-warm-color: var(--button-warm-color);
@button-warm-border-color: var(--button-warm-border-color);
@button-danger-color: var(--button-danger-color);
@button-danger-border-color: var(--button-danger-border-color);
@button-border-radius: var(--button-border-radius);
@button-border-color: var(--button-border-color);
:root { :root {
--button-primary-color: @global-primary-color; --button-primary-text-color: #fff;
--button-primary-border-color: @global-primary-color; --button-primary-background-color: var(--global-primary-color);
--button-normal-color: @global-normal-color; --button-primary-border-color: var(--global-primary-color);
--button-normal-border-color: @global-normal-color; --button-normal-text-color: #fff;
--button-warm-color: @global-warm-color; --button-normal-background-color: var(--global-normal-color);
--button-warm-border-color: @global-warm-color; --button-normal-border-color: var(--global-normal-color);
--button-danger-color: @global-danger-color; --button-warm-text-color: #fff;
--button-danger-border-color: @global-danger-color; --button-warm-background-color: var(--global-warm-color);
--button-border-radius: @global-border-radius; --button-warm-border-color: var(--global-warm-color);
--button-border-color: @global-neutral-color-6; --button-danger-text-color: #fff;
--button-danger-background-color: var(--global-danger-color);
--button-danger-border-color: var(--global-danger-color);
--button-border-radius: var(--global-border-radius);
--button-border-color: var(--global-neutral-color-6);
--button-background-color: 0 0;
--button-text-color: #666;
} }
.layui-btn { .layui-btn {
@ -31,63 +26,47 @@
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border-radius: @button-border-radius; color: var(--button-text-color);
border-color: @button-border-color; background: var(--button-background-color);
border-radius: var(--button-border-radius);
border-color: var(--button-border-color);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
background: 0 0;
color: #666;
cursor: pointer; cursor: pointer;
} :hover,
:active {
.layui-btn:hover, color: #333;
.layui-btn:active { }
color: #333;
}
.layui-btn + .layui-btn {
margin-left: 10px;
}
.layui-btn-radius {
border-radius: 100px;
}
.layui-btn .layui-icon {
padding: 0 2px;
vertical-align: middle\9;
vertical-align: bottom;
} }
.layui-btn-primary { .layui-btn-primary {
color: #fff; color: var(--button-primary-text-color);
background-color: @button-primary-color; background-color: var(--button-primary-background-color);
border-color: @button-primary-border-color; border-color: var(--button-primary-border-color);
} }
.layui-btn-normal { .layui-btn-normal {
color: #fff; color: var(--button-normal-text-color);
background-color: @button-normal-color; background-color: var(--button-normal-background-color);
border-color: @button-normal-border-color; border-color: var(--button-normal-border-color);
} }
.layui-btn-warm { .layui-btn-warm {
color: #fff; color: var(--button-warm-text-color);
background-color: @button-warm-color; background-color: var(--button-warm-background-color);
border-color: @button-warm-border-color; border-color: var(--button-warm-border-color);
} }
.layui-btn-danger { .layui-btn-danger {
color: #fff; color: var(--button-danger-text-color);
background-color: @button-danger-color; background-color: var(--button-danger-background-color);
border-color: @button-danger-border-color; border-color: var(--button-danger-border-color);
} }
.layui-btn-primary:hover, .layui-btn-primary:hover,
.layui-btn-normal:hover, .layui-btn-normal:hover,
.layui-btn-warm:hover, .layui-btn-warm:hover,
.layui-btn-danger:hover { .layui-btn-danger:hover {
color: #fff;
opacity: 0.8; opacity: 0.8;
filter: alpha(opacity=80); filter: alpha(opacity=80);
} }
@ -120,6 +99,10 @@
width: 100%; width: 100%;
} }
.layui-btn-radius {
border-radius: 100px;
}
.layui-btn-disabled, .layui-btn-disabled,
.layui-btn-disabled:active, .layui-btn-disabled:active,
.layui-btn-disabled:hover { .layui-btn-disabled:hover {
@ -129,3 +112,13 @@
cursor: not-allowed !important; cursor: not-allowed !important;
opacity: 1; opacity: 1;
} }
.layui-btn + .layui-btn {
margin-left: 10px;
}
.layui-btn .layui-icon {
padding: 0 2px;
vertical-align: middle\9;
vertical-align: bottom;
}

View File

@ -1,3 +1,4 @@
<!-- done -->
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayButton", name: "LayButton",
@ -9,6 +10,7 @@ import "./index.less";
import { computed } from "vue"; import { computed } from "vue";
import { import {
ButtonBorder, ButtonBorder,
ButtonEmits,
ButtonNativeType, ButtonNativeType,
ButtonSize, ButtonSize,
ButtonType, ButtonType,
@ -38,9 +40,9 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
borderStyle: "soild", borderStyle: "soild",
}); });
const emit = defineEmits(["click"]); const emit = defineEmits(ButtonEmits);
const onClick = (event: any) => { const onClick = (event: MouseEvent) => {
if (!props.disabled) { if (!props.disabled) {
emit("click", event); emit("click", event);
} }

View File

@ -2,3 +2,7 @@ export type ButtonType = "primary" | "normal" | "warm" | "danger";
export type ButtonSize = "lg" | "sm" | "xs"; export type ButtonSize = "lg" | "sm" | "xs";
export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black"; export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black";
export type ButtonNativeType = "button" | "submit" | "reset"; export type ButtonNativeType = "button" | "submit" | "reset";
export const ButtonEmits = {
click: (evt: MouseEvent) => evt instanceof MouseEvent,
}

View File

@ -2,11 +2,13 @@
.layui-btn-container { .layui-btn-container {
font-size: 0; font-size: 0;
.layui-btn { }
margin-right: 10px;
margin-bottom: 10px; .layui-btn-container .layui-btn {
} margin-right: 10px;
.layui-btn + .layui-btn { margin-bottom: 10px;
margin-left: 0; }
}
.layui-btn-container .layui-btn + .layui-btn {
margin-left: 0;
} }

View File

@ -1,32 +1,30 @@
@import (reference) "../../theme/variable.less"; @import (reference) "../../theme/variable.less";
@card-border-radius: var(--card-border-radius);
@card-fore-color: var(--card-fore-color);
:root { :root {
--card-border-radius: @global-border-radius; --card-border-radius: var(--global-border-radius);
--card-fore-color: @global-fore-color;
} }
.layui-card { .layui-card {
margin-bottom: 15px; margin-bottom: 15px;
border-radius: @card-border-radius;
background-color: #ffffff; background-color: #ffffff;
.layui-card-header { border-radius: var(--card-border-radius);
height: 42px; }
line-height: 42px;
padding: 0 15px; .layui-card .layui-card-header {
border-bottom: 1px solid #f6f6f6; height: 42px;
color: @card-fore-color; line-height: 42px;
font-size: 14px; padding: 0 15px;
.layui-card-header-extra { border-bottom: 1px solid #f6f6f6;
float: right; font-size: 14px;
} }
}
.layui-card-body { .layui-card .layui-card-header .layui-card-header-extra {
padding: 10px 15px; float: right;
line-height: 24px; }
}
.layui-card .layui-card-body {
padding: 10px 15px;
line-height: 24px;
} }
.layui-card:last-child { .layui-card:last-child {

View File

@ -5,11 +5,12 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue";
import "./index.less"; import "./index.less";
import { computed } from "vue";
import { BooleanOrString } from '../../types';
export interface LayContainerProps { export interface LayContainerProps {
fluid?: boolean | string; fluid?: BooleanOrString;
} }
const props = withDefaults(defineProps<LayContainerProps>(), { const props = withDefaults(defineProps<LayContainerProps>(), {

View File

@ -8,12 +8,11 @@
} }
.layui-empty-image { .layui-empty-image {
height: 100px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.layui-empty-image img { .layui-empty-image img {
height: 100%; height: 100px;
margin: auto; margin: auto;
} }

View File

@ -6,13 +6,15 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import "./index.less"; import "./index.less";
import { withDefaults } from "vue"; import { useSlots, withDefaults } from "vue";
export interface LayEmptyProps { export interface LayEmptyProps {
description?: string; description?: string;
image?: string; image?: string;
} }
const slots = useSlots();
const props = withDefaults(defineProps<LayEmptyProps>(), { const props = withDefaults(defineProps<LayEmptyProps>(), {
description: "暂无数据", description: "暂无数据",
}); });
@ -21,7 +23,8 @@ const props = withDefaults(defineProps<LayEmptyProps>(), {
<template> <template>
<div class="layui-empty"> <div class="layui-empty">
<div class="layui-empty-image"> <div class="layui-empty-image">
<img class="layui-empty-image-default" src="./index.svg" /> <slot v-if="slots.image" name="image"></slot>
<img v-else class="layui-empty-image-default" src="./index.svg" />
</div> </div>
<div class="layui-empty-description">{{ description }}</div> <div class="layui-empty-description">{{ description }}</div>
<div class="layui-empty-extra"> <div class="layui-empty-extra">

View File

@ -14,10 +14,12 @@
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
border-color: @panel-border-color; border-color: @panel-border-color;
background-color: #fff; background-color: #fff;
.is-hover-shadow:hover { }
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
} .layui-panel.is-hover-shadow:hover {
.shadow { box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
}
.layui-panel.shadow {
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
} }

View File

@ -9,7 +9,7 @@ import "./index.less";
import { computed, withDefaults } from "vue"; import { computed, withDefaults } from "vue";
export interface LayTimelineProps { export interface LayTimelineProps {
direction: "horizontal" | "vertical"; direction?: "horizontal" | "vertical";
} }
const props = withDefaults(defineProps<LayTimelineProps>(), { const props = withDefaults(defineProps<LayTimelineProps>(), {

View File

@ -6,6 +6,44 @@
* layer API * layer API
*/ */
const matchComponents = [ const matchComponents = [
// done
{
pattern: /^LayButton$/,
styleDir: "button",
},
{
pattern: /^LayButtonContainer$/,
styleDir: "container",
},
{
pattern: /^LayButtonGroup$/,
styleDir: "buttonGroup",
},
{
pattern: /^LayContainer$/,
styleDir: "container",
},
{
pattern: /^LayCard$/,
styleDir: "card",
},
{
pattern: /^LayPanel$/,
styleDir: "panel",
},
{
pattern: /^LayFooter$/,
styleDir: "footer",
},
{
pattern: /^LayBody$/,
styleDir: "body",
},
{
pattern: /^LayEmpty$/,
styleDir: "empty",
},
// ....
{ {
pattern: /^LayAvatarList$/, pattern: /^LayAvatarList$/,
styleDir: "avatar", styleDir: "avatar",

View File

@ -302,20 +302,16 @@ a cite {
box-sizing: border-box; box-sizing: border-box;
} }
.layui-card-body,
.layui-card-header,
.layui-form-label, .layui-form-label,
.layui-form-mid, .layui-form-mid,
.layui-input-block, .layui-input-block,
.layui-input-inline, .layui-input-inline,
.layui-input-wrap, .layui-input-wrap,
.layui-panel,
.layui-textarea { .layui-textarea {
position: relative; position: relative;
} }
.layui-form-select dl, .layui-form-select dl {
.layui-panel {
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
} }
@ -328,14 +324,6 @@ a cite {
color: #fff !important; color: #fff !important;
} }
.layui-panel-window {
position: relative;
padding: 15px;
border-radius: 0;
border-top: 5px solid @global-neutral-color-3;
background-color: #fff;
}
.layui-border, .layui-border,
.layui-border-black, .layui-border-black,
.layui-border-blue, .layui-border-blue,

View File

@ -98,20 +98,20 @@ export default {
::: table ::: table
| 类名 | 描述 | 使用 | | 类名 | 描述 | 使用 |
| --------------------------------- | ------------ | ---------------------------------------------- | | ---------------------------------| ------------ | ---------------------------------------------- |
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` | | layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` | | layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` | | layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` | | layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` | | layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` | | layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
| layui-anim-scalesmall | 平滑放小 | `layui-anim layui-anim-scalesmall` | | layui-anim-scalesmall | 平滑放小 | `layui-anim layui-anim-scalesmall` |
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring` | | layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring` |
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein` | | layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein` |
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout` | | layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout` |
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` | | layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` | | layui-anim-rotate layui-anim-loop| 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
::: :::

View File

@ -80,6 +80,33 @@ export default {
::: :::
::: title 图片插槽
:::
::: demo
<template>
<lay-empty description="刷新试试">
<template #image>
图片
</template>
</lay-empty>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Empty 属性 ::: title Empty 属性
::: :::

View File

@ -30,6 +30,17 @@ export default {
::: :::
::: title Panel 属性
:::
::: table
| 插槽 | 描述 | 类型 | 默认值 | 可选值 |
| ------- | -------- | ------ | ------ | ----- |
| shadow | 阴影 | `string` | `always` | `always` `hover` `never` |
:::
::: title Panel 插槽 ::: title Panel 插槽
::: :::