theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[优化] 组件代码

Browse Source
This commit is contained in:
就眠儀式 2021-11-17 23:37:54 +08:00
parent 117ef91144
commit 624d4916e1
14 changed files with 245 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/docs/zh-CN/components/color.md
View File

@ -101,30 +101,30 @@ export default {
<template>
<ul class="layui-row site-doc-color site-doc-necolor">
<li class="layui-col-md6">
<li class="layui-col-md12">
<div style="background-color: #FAFAFA;">
<p>#FAFAFA</p><p>
</p></div>
</li>
<li class="layui-col-md6">
<li class="layui-col-md12">
<div style="background-color: #f6f6f6;"><p>#F6F6F6</p><p></p></div>
</li>
<li class="layui-col-md2">
<li class="layui-col-md4">
<div style="background-color: #eeeeee;"><p>#eeeeee</p><p></p></div>
</li>
<li class="layui-col-md2">
<li class="layui-col-md4">
<div style="background-color: #e2e2e2;"><p>#e2e2e2</p><p></p></div>
</li>
<li class="layui-col-md2">
<li class="layui-col-md4">
<div style="background-color: #dddddd;"><p>#dddddd</p><p></p></div>
</li>
<li class="layui-col-md2">
<li class="layui-col-md4">
<div style="background-color: #d2d2d2;"><p>#d2d2d2</p><p></p></div>
</li>
<li class="layui-col-md2">
<li class="layui-col-md4">
<div style="background-color: #cccccc;"><p>#cccccc</p><p></p></div>
</li>
<li class="layui-col-md2">
<li class="layui-col-md4">
<div style="background-color: #c2c2c2;"><p>#c2c2c2</p><p></p></div>
</li>
</ul>

1
docs/src/assets/css/markdown.css
View File

@ -171,7 +171,6 @@ form {
padding: 20px 10px;
color: #fff;
text-align: center;
border-radius: 2px;
line-height: 1.6;
font-size: 14px;
}

104
src/css/layui.css
View File

@ -1049,19 +1049,6 @@ a cite {
top: 0;
}
.layui-container {
position: relative;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
.layui-fluid {
position: relative;
margin: 0 auto;
padding: 0 15px;
}
.layui-btn,
.layui-input,
.layui-select,
@ -1074,21 +1061,6 @@ a cite {
box-sizing: border-box;
}
.layui-elem-quote {
margin-bottom: 10px;
padding: 15px;
line-height: 1.6;
border-left: 5px solid #5fb878;
border-radius: 0 2px 2px 0;
background-color: #fafafa;
}
.layui-quote-nm {
border-style: solid;
border-width: 1px 1px 1px 5px;
background: 0 0;
}
.layui-elem-field {
margin-bottom: 10px;
padding: 0;
@ -1211,53 +1183,11 @@ a cite {
position: relative;
}
.layui-card {
margin-bottom: 15px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.layui-form-select dl,
.layui-panel {
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
}
.layui-card:last-child {
margin-bottom: 0;
}
.layui-card-header {
height: 42px;
line-height: 42px;
padding: 0 15px;
border-bottom: 1px solid #f6f6f6;
color: #333;
border-radius: 2px 2px 0 0;
font-size: 14px;
}
.layui-card-body {
padding: 10px 15px;
line-height: 24px;
}
.layui-card-body[pad15] {
padding: 15px;
}
.layui-card-body[pad20] {
padding: 20px;
}
.layui-card-body .layui-table {
margin: 5px 0;
}
.layui-card .layui-tab {
margin: 0;
}
.layui-bg-black,
.layui-bg-blue,
.layui-bg-cyan,
@ -4201,40 +4131,6 @@ body .layui-table-tips .layui-layer-content {
line-height: 22px;
}
.layui-badge,
.layui-badge-dot,
.layui-badge-rim {
position: relative;
display: inline-block;
padding: 0 6px;
font-size: 12px;
text-align: center;
background-color: #ff5722;
color: #fff;
border-radius: 2px;
}
.layui-badge {
height: 18px;
line-height: 18px;
}
.layui-badge-dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
.layui-badge-rim {
height: 18px;
line-height: 18px;
border-width: 1px;
border-style: solid;
background-color: #fff;
color: #666;
}
.layui-btn .layui-badge,
.layui-btn .layui-badge-dot {
margin-left: 5px;

33
src/module/badge/index.less Normal file
View File

@ -0,0 +1,33 @@
.layui-badge,
.layui-badge-dot,
.layui-badge-rim {
position: relative;
display: inline-block;
padding: 0 6px;
font-size: 12px;
text-align: center;
background-color: #ff5722;
color: #fff;
border-radius: 2px;
}
.layui-badge {
height: 18px;
line-height: 18px;
}
.layui-badge-dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
.layui-badge-rim {
height: 18px;
line-height: 18px;
border-width: 1px;
border-style: solid;
background-color: #fff;
color: #666;
}

58
src/module/badge/index.vue
View File

@ -1,26 +1,38 @@
<script lang="ts">
export default {
name: "LayBadge",
};
</script>
<script setup lang="ts">
import { computed, defineProps } from "vue";
import "./index.less";
export interface LayBadgeProps {
type?: "dot" | "rim";
theme?: string;
color?: string;
}
const props = defineProps<LayBadgeProps>();
const classes = computed(() => {
return [
{
"layui-badge": !props.type,
"layui-badge-dot": props.type == "dot",
"layui-badge-rim": props.type == "rim",
},
`layui-bg-${props.theme}`,
];
});
const styles = computed(() => {
props.color ? `background-color: ${props.color}` : "";
});
</script>
<template>
<span :class="classList" :style="styleList">
<span :class="classes" :style="styles">
<slot v-if="type != 'dot'" />
</span>
</template>
<script setup name="LayBadge" lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
type?: string
theme?: string
color?: string
}>()
const classList = [
{
'layui-badge': !props.type,
'layui-badge-dot': props.type == 'dot',
'layui-badge-rim': props.type == 'rim',
},
'layui-bg-' + props.theme,
]
const styleList = props.color ? 'background-color: ' + props.color : ''
</script>
</template>

14
src/module/block/index.less Normal file
View File

@ -0,0 +1,14 @@
.layui-elem-quote {
margin-bottom: 10px;
padding: 15px;
line-height: 1.6;
border-left: 5px solid #5fb878;
border-radius: 0 2px 2px 0;
background-color: #fafafa;
}
.layui-quote-nm {
border-style: solid;
border-width: 1px 1px 1px 5px;
background: 0 0;
}

25
src/module/block/index.vue
View File

@ -1,13 +1,20 @@
<template>
<blockquote class="layui-elem-quote" :class="[nm ? 'layui-quote-nm' : '']">
<slot />
</blockquote>
</template>
<script lang="ts">
export default {
name: "LayBlock",
};
</script>
<script setup name="LayBlock" lang="ts">
import { defineProps } from 'vue'
<script setup lang="ts">
import { defineProps } from "vue";
import "./index.less"
const props = defineProps<{
nm?: boolean
}>()
nm?: boolean;
}>();
</script>
<template>
<blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }">
<slot />
</blockquote>
</template>

41
src/module/card/index.less Normal file
View File

@ -0,0 +1,41 @@
.layui-card {
margin-bottom: 15px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.layui-card:last-child {
margin-bottom: 0;
}
.layui-card-header {
height: 42px;
line-height: 42px;
padding: 0 15px;
border-bottom: 1px solid #f6f6f6;
color: #333;
border-radius: 2px 2px 0 0;
font-size: 14px;
}
.layui-card-body {
padding: 10px 15px;
line-height: 24px;
}
.layui-card-body[pad15] {
padding: 15px;
}
.layui-card-body[pad20] {
padding: 20px;
}
.layui-card-body .layui-table {
margin: 5px 0;
}
.layui-card .layui-tab {
margin: 0;
}

14
src/module/card/index.vue
View File

@ -12,12 +12,14 @@
</template>
<script setup name="LayCard" lang="ts">
import { useSlots } from 'vue'
import { useSlots } from "vue";
import "./index.less";
const slot = useSlots()
const slot = useSlots();
const props =
defineProps<{
title?: string
}>()
export interface LayCardProps {
title?: string;
}
const props = defineProps<LayCardProps>();
</script>

0
src/module/checkbox/index.less Normal file
View File

57
src/module/checkbox/index.vue
View File

@ -1,3 +1,35 @@
<script lang="ts">
export default {
name: "LayCheckbox",
};
</script>
<script setup name="LayCheckbox" lang="ts">
import { computed, defineProps } from "vue";
import "./index.less";
export interface LayCheckbox {
name?: string;
skin?: string;
label?: string;
modelValue?: boolean;
disabled?: boolean;
}
const props = withDefaults(defineProps<LayCheckbox>(), {
modelValue: false
});
const emit = defineEmits(["update:modelValue", "change"]);
const handleClick = function () {
if (!props.disabled) {
emit("update:modelValue", !props.modelValue);
emit("change", { checked: !props.modelValue, value: props.label });
}
};
</script>
<template>
<span @click.stop="handleClick">
<input type="checkbox" :name="name" :value="label" />
@ -13,27 +45,4 @@
<i class="layui-icon layui-icon-ok" />
</div>
</span>
</template>
<script setup name="LayCheckbox" lang="ts">
import { defineProps, useSlots } from 'vue'
const slot = useSlots()
const props = defineProps<{
name?: string
skin?: string
label?: string
checked?: boolean
disabled?: boolean
}>()
const emit = defineEmits(['update:checked', 'change'])
const handleClick = function () {
if (!props.disabled) {
emit('update:checked', !props.checked)
emit('change', { checked: !props.checked, value: props.label })
}
}
</script>
</template>

12
src/module/container/index.less Normal file
View File

@ -0,0 +1,12 @@
.layui-container {
position: relative;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
.layui-fluid {
position: relative;
margin: 0 auto;
padding: 0 15px;
}

33
src/module/container/index.vue
View File

@ -1,15 +1,26 @@
<script lang="ts">
export default {
name: "LayContainer"
}
</script>
<script setup lang="ts">
import { computed, defineProps } from 'vue'
import "./index.less"
export interface LayContainerProps {
fluid?: boolean
}
const props = withDefaults(defineProps<LayContainerProps>(), {
fluid: false
});
const classes = computed(() => props.fluid ? 'layui-fluid' : 'layui-container')
</script>
<template>
<div :class="classes">
<slot />
</div>
</template>
<script setup name="LayContainer" lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
fluid?: boolean
}>()
const classes = props.fluid ? 'layui-fluid' : 'layui-container'
</script>
</template>

41
src/module/icon/index.vue
View File

@ -1,19 +1,24 @@
<template>
<i :class="[prefix, type]" :style="{ color: color , fontSize: size}"/>
</template>
<script setup name="LayIcon" lang="ts">
import { defineProps } from 'vue'
const props = withDefaults(
defineProps<{
type?: string
prefix?: string
color?: string
size?: string
}>(),
{
prefix: 'layui-icon',
}
)
<script lang="ts">
export default {
name: "LayIcon",
};
</script>
<script setup lang="ts">
import { defineProps } from "vue";
export interface LayIconProps {
prefix?: string;
color?: string;
size?: string;
type?: string;
}
const props = withDefaults(defineProps<LayIconProps>(), {
prefix: "layui-icon",
});
</script>
<template>
<i :class="[prefix, type]" :style="{ color: color, fontSize: size }" />
</template>