Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop
This commit is contained in:
halo
@@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item a {
|
||||
.layui-nav .layui-nav-item > a {
|
||||
display: block;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-nav .layui-this:after,
|
||||
@@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item a {
|
||||
.layui-nav-tree .layui-nav-item > a {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 5px 30px 5px 30px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item > a {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
.layui-nav-tree .layui-nav-item * {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-more {
|
||||
|
||||
23
src/index.ts
23
src/index.ts
@@ -9,6 +9,7 @@ import { layer } from "@layui/layer-vue";
|
||||
import LayLayer from "./module/layer/index";
|
||||
import LayBacktop from "./module/backTop/index";
|
||||
import LayAvatar from "./module/avatar/index";
|
||||
import LayAvatarList from "./module/avatarList/index";
|
||||
import LayRadio from "./module/radio/index";
|
||||
import LayButton from "./module/button/index";
|
||||
import LayButtonContainer from "./module/buttonContainer/index";
|
||||
@@ -70,8 +71,9 @@ import LaySkeleton from "./module/skeleton/index";
|
||||
import LaySkeletonItem from "./module/skeletonItem/index";
|
||||
import LayStep from "./module/step/index";
|
||||
import LayStepItem from "./module/stepItem/index";
|
||||
import LaySubMenu from "./module/subMenu/index"
|
||||
|
||||
const components: Record<string, IDefineComponent> = {
|
||||
export const components: Record<string, IDefineComponent> = {
|
||||
LayRadio,
|
||||
LayButton,
|
||||
LayIcon,
|
||||
@@ -107,6 +109,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayBreadcrumb,
|
||||
LayBreadcrumbItem,
|
||||
LayAvatar,
|
||||
LayAvatarList,
|
||||
LayField,
|
||||
LaySelect,
|
||||
LayScroll,
|
||||
@@ -136,6 +139,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayCountUp,
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySubMenu
|
||||
};
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@@ -148,13 +152,9 @@ const install = (app: App, options?: InstallOptions): void => {
|
||||
};
|
||||
|
||||
export {
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayRadio,
|
||||
LayIcon,
|
||||
LayButton,
|
||||
LayIcon,
|
||||
LayBacktop,
|
||||
LayLayout,
|
||||
LaySide,
|
||||
@@ -187,6 +187,7 @@ export {
|
||||
LayBreadcrumb,
|
||||
LayBreadcrumbItem,
|
||||
LayAvatar,
|
||||
LayAvatarList,
|
||||
LayField,
|
||||
LaySelect,
|
||||
LayScroll,
|
||||
@@ -208,7 +209,15 @@ export {
|
||||
LayCarousel,
|
||||
LayCarouselItem,
|
||||
LayColorPicker,
|
||||
LayLayer
|
||||
LayLayer,
|
||||
LayTooltip,
|
||||
LayInputNumber,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayCountUp,
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySubMenu
|
||||
};
|
||||
|
||||
export { layer };
|
||||
|
||||
@@ -40,3 +40,8 @@
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.layui-avatar-list .layui-avatar {
|
||||
margin-left: -10px;
|
||||
display: inline-block;
|
||||
}
|
||||
9
src/module/avatarList/index.ts
Normal file
9
src/module/avatarList/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { App } from "vue";
|
||||
import Component from "./index.vue";
|
||||
import type { IDefineComponent } from "../type/index";
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || "LayAvatarList", Component);
|
||||
};
|
||||
|
||||
export default Component as IDefineComponent;
|
||||
15
src/module/avatarList/index.vue
Normal file
15
src/module/avatarList/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayAvatarList",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-avatar-list">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -27,6 +27,14 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
|
||||
nativeType: "button",
|
||||
});
|
||||
|
||||
const emit = defineEmits(["click"]);
|
||||
|
||||
const onClick = (event : any) => {
|
||||
if(!props.disabled) {
|
||||
emit("click", event);
|
||||
}
|
||||
}
|
||||
|
||||
const classes = computed(() => {
|
||||
return [
|
||||
props.type ? `layui-btn-${props.type}` : "",
|
||||
@@ -48,6 +56,7 @@ const classes = computed(() => {
|
||||
classes,
|
||||
]"
|
||||
:type="nativeType"
|
||||
@click="onClick"
|
||||
>
|
||||
<i
|
||||
v-if="loading"
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<span class="layui-count"></span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCount" lang="ts"></script>
|
||||
@@ -1,59 +1,35 @@
|
||||
<template>
|
||||
<li
|
||||
v-if="slots.default"
|
||||
class="layui-nav-item"
|
||||
:class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
|
||||
>
|
||||
<a href="javascript:void(0)" @click="openHandle">
|
||||
{{ title }}
|
||||
<i :class="[openKeys.includes(id) && !isTree ? 'layui-nav-mored' : '']" class="layui-icon layui-icon-down layui-nav-more"></i>
|
||||
</a>
|
||||
<dl
|
||||
class="layui-nav-child"
|
||||
:class="[
|
||||
openKeys.includes(id) && !isTree ? 'layui-show' : '',
|
||||
!isTree ? 'layui-anim layui-anim-upbit' : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</li>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayMenuItem"
|
||||
}
|
||||
</script>
|
||||
|
||||
<li
|
||||
v-else
|
||||
class="layui-nav-item"
|
||||
:class="[selectedKey === id ? 'layui-this' : '']"
|
||||
@click="selectHandle()"
|
||||
>
|
||||
<slot v-if="slots.title" name="title"></slot>
|
||||
<a v-else href="javascript:void(0)">
|
||||
{{ title }}
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { defineProps, inject, Ref, useSlots } from "vue";
|
||||
|
||||
<script setup name="LayMenuItem" lang="ts">
|
||||
import { defineProps, inject, Ref, ref, useSlots } from "vue";
|
||||
const slots = useSlots();
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
title: string;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const isTree = inject("isTree");
|
||||
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
||||
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
|
||||
|
||||
const openHandle = function () {
|
||||
if (openKeys.value.includes(props.id)) {
|
||||
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
|
||||
} else {
|
||||
openKeys.value.push(props.id);
|
||||
}
|
||||
};
|
||||
|
||||
const selectHandle = function () {
|
||||
selectedKey.value = props.id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="[selectedKey === id ? 'layui-this' : '']"
|
||||
@click="selectHandle()"
|
||||
>
|
||||
<a href="javascript:void(0)">
|
||||
<slot v-if="slots.default"></slot>
|
||||
<span v-else>{{ title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
@@ -1,122 +1,163 @@
|
||||
<template>
|
||||
<div class="layui-box layui-laypage layui-laypage-default">
|
||||
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
|
||||
><a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-prev"
|
||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||
@click="prev()"
|
||||
><slot v-if="slots.prev" name="prev"></slot>
|
||||
<template v-else>上一页</template></a
|
||||
>
|
||||
<template v-if="showPage">
|
||||
<template v-for="index of totalPage" :key="index">
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr"
|
||||
><em
|
||||
class="layui-laypage-em"
|
||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||
></em
|
||||
><em>{{ index }}</em></span
|
||||
>
|
||||
<a v-else href="javascript:;" @click="jump(index)">
|
||||
{{ index }}
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
<div class="layui-box layui-laypage layui-laypage-default">
|
||||
<span v-if="showCount" class="layui-laypage-count"
|
||||
>共 {{ total }} 条 {{ maxPage }} 页</span
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-prev"
|
||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||
@click="prev()"
|
||||
>
|
||||
<slot v-if="slots.prev" name="prev"></slot>
|
||||
<template v-else>上一页</template>
|
||||
</a>
|
||||
<template v-if="showPage">
|
||||
<template v-for="index of totalPage" :key="index">
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr">
|
||||
<em
|
||||
class="layui-laypage-em"
|
||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||
></em>
|
||||
<em>{{ index }}</em>
|
||||
</span>
|
||||
<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-next"
|
||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||
@click="next()"
|
||||
><slot v-if="slots.next" name="next"></slot>
|
||||
<template v-else>下一页</template></a
|
||||
><span v-if="showLimit" class="layui-laypage-limits"
|
||||
><select v-model="inlimit">
|
||||
<option value="10">10 条/页</option>
|
||||
<option value="20">20 条/页</option>
|
||||
<option value="30">30 条/页</option>
|
||||
<option value="40">40 条/页</option>
|
||||
<option value="50">50 条/页</option>
|
||||
</select></span
|
||||
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
|
||||
><i class="layui-icon layui-icon-refresh"></i></a
|
||||
><span v-if="showSkip" class="layui-laypage-skip"
|
||||
>到第<input
|
||||
v-model="currentPageShow"
|
||||
type="number"
|
||||
class="layui-input layui-input-number"
|
||||
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
|
||||
确定
|
||||
</button></span
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-next"
|
||||
:class="[currentPage === maxPage ? 'layui-disabled' : '']"
|
||||
@click="next()"
|
||||
>
|
||||
<slot v-if="slots.next" name="next"></slot>
|
||||
<template v-else>下一页</template>
|
||||
</a>
|
||||
<span v-if="showLimit" class="layui-laypage-limits">
|
||||
<select v-model="inlimit">
|
||||
<option v-for="val of limits" :key="val" :value="val">
|
||||
{{ val }} 条/页
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
<span v-if="showSkip" class="layui-laypage-skip">
|
||||
到第
|
||||
<input
|
||||
v-model="currentPageShow"
|
||||
@keypress.enter="jumpPage()"
|
||||
type="number"
|
||||
class="layui-input layui-input-number"
|
||||
/>页
|
||||
<button
|
||||
type="button"
|
||||
class="layui-laypage-btn"
|
||||
@click="jumpPage()"
|
||||
:disabled="currentPageShow > maxPage"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayPage" lang="ts">
|
||||
import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
|
||||
import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
total: number;
|
||||
limit: number;
|
||||
theme?: string;
|
||||
showPage?: boolean | string;
|
||||
showSkip?: boolean | string;
|
||||
showCount?: boolean | string;
|
||||
showLimit?: boolean | string;
|
||||
showInput?: boolean | string;
|
||||
showRefresh?: boolean | string;
|
||||
}>(),
|
||||
{
|
||||
limit: 10,
|
||||
theme: "green",
|
||||
showPage: false,
|
||||
showSkip: false,
|
||||
showCount: false,
|
||||
showLimit: true,
|
||||
showInput: false,
|
||||
showRefresh: false,
|
||||
}
|
||||
defineProps<{
|
||||
total: number;
|
||||
limit: number;
|
||||
theme?: string;
|
||||
showPage?: boolean | string;
|
||||
showSkip?: boolean | string;
|
||||
showCount?: boolean | string;
|
||||
showLimit?: boolean | string;
|
||||
showInput?: boolean | string;
|
||||
showRefresh?: boolean | string;
|
||||
pages?: number;
|
||||
limits?: number[];
|
||||
}>(),
|
||||
{
|
||||
limit: 10,
|
||||
theme: "green",
|
||||
showPage: false,
|
||||
showSkip: false,
|
||||
showCount: false,
|
||||
showLimit: true,
|
||||
showInput: false,
|
||||
showRefresh: false,
|
||||
pages: 10,
|
||||
limits: () => [10, 20, 30, 40, 50],
|
||||
}
|
||||
);
|
||||
|
||||
const inlimit = ref(props.limit);
|
||||
const totalPage = ref(Math.ceil(props.total / inlimit.value));
|
||||
const limits = ref(props.limits);
|
||||
const pages = props.pages / 2;
|
||||
const inlimit = computed({
|
||||
get() {
|
||||
return props.limit;
|
||||
},
|
||||
set(v: number) {
|
||||
emit("limit", v);
|
||||
},
|
||||
});
|
||||
const maxPage = ref(0);
|
||||
const totalPage = computed(() => {
|
||||
maxPage.value = Math.ceil(props.total / props.limit);
|
||||
let r: number[] = [],
|
||||
start =
|
||||
maxPage.value <= props.pages
|
||||
? 1
|
||||
: currentPage.value > pages
|
||||
? currentPage.value - pages
|
||||
: 1;
|
||||
for (let i = start; ; i++) {
|
||||
if (r.length >= props.pages || i > maxPage.value) {
|
||||
break;
|
||||
}
|
||||
r.push(i);
|
||||
}
|
||||
return r;
|
||||
});
|
||||
const currentPage: Ref<number> = ref(1);
|
||||
const currentPageShow: Ref<number> = ref(currentPage.value);
|
||||
const emit = defineEmits(["jump"]);
|
||||
|
||||
const emit = defineEmits(["jump", "limit"]);
|
||||
|
||||
const prev = function () {
|
||||
if (currentPage.value === 1) {
|
||||
return;
|
||||
}
|
||||
currentPage.value--;
|
||||
if (currentPage.value === 1) {
|
||||
return;
|
||||
}
|
||||
currentPage.value--;
|
||||
};
|
||||
|
||||
const next = function () {
|
||||
if (currentPage.value === totalPage.value) {
|
||||
return;
|
||||
}
|
||||
currentPage.value++;
|
||||
if (currentPage.value === maxPage.value) {
|
||||
return;
|
||||
}
|
||||
currentPage.value++;
|
||||
};
|
||||
|
||||
const jump = function (page: number) {
|
||||
currentPage.value = page;
|
||||
currentPage.value = page;
|
||||
};
|
||||
|
||||
const jumpPage = function () {
|
||||
currentPage.value = currentPageShow.value;
|
||||
currentPage.value = currentPageShow.value;
|
||||
};
|
||||
|
||||
watch(inlimit, function () {
|
||||
currentPage.value = 1;
|
||||
totalPage.value = Math.ceil(props.total / inlimit.value);
|
||||
currentPage.value = 1;
|
||||
// maxPage.value = Math.ceil(props.total / inlimit.value);
|
||||
});
|
||||
|
||||
watch(currentPage, function () {
|
||||
currentPageShow.value = currentPage.value;
|
||||
emit("jump", { current: currentPage.value });
|
||||
currentPageShow.value = currentPage.value;
|
||||
emit("jump", { current: currentPage.value });
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
<template>
|
||||
<div
|
||||
ref="selectRef"
|
||||
class="layui-unselect layui-form-select"
|
||||
:class="{ 'layui-form-selected': openState }"
|
||||
>
|
||||
<div class="layui-select-title" @click="open">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
selectItem.value !== null &&
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0
|
||||
? ''
|
||||
: emptyMessage ?? placeholder
|
||||
"
|
||||
:disabled="disabled"
|
||||
readonly
|
||||
:value="
|
||||
!selectItem.multiple && selectItem.value !== null
|
||||
? selectItem.label
|
||||
: null
|
||||
"
|
||||
:name="name"
|
||||
:class="[
|
||||
'layui-input',
|
||||
'layui-unselect',
|
||||
{ 'layui-disabled': disabled },
|
||||
]"
|
||||
/>
|
||||
<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
|
||||
<!-- 多选 -->
|
||||
<div
|
||||
v-if="selectItem.multiple && Array.isArray(selectItem.label)"
|
||||
class="layui-multiple-select-row"
|
||||
>
|
||||
<div class="layui-multiple-select-badge">
|
||||
<template v-for="(item, index) in selectItem.label" :key="index">
|
||||
<lay-badge theme="green">
|
||||
<span>{{ item }}</span>
|
||||
<i
|
||||
:class="['layui-icon', { 'layui-icon-close': true }]"
|
||||
v-if="
|
||||
!disabled &&
|
||||
!(
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0 &&
|
||||
disabledItemMap[selectItem.value[index]]
|
||||
)
|
||||
"
|
||||
@click="
|
||||
removeItemHandle($event, {
|
||||
label: item,
|
||||
value: Array.isArray(selectItem.value)
|
||||
? selectItem.value[index]
|
||||
: null,
|
||||
})
|
||||
"
|
||||
>
|
||||
</i>
|
||||
</lay-badge>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<!-- 多选不支持空提示 -->
|
||||
<template v-if="!multiple && showEmpty">
|
||||
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
ref="selectRef"
|
||||
class="layui-unselect layui-form-select"
|
||||
:class="{ 'layui-form-selected': openState }"
|
||||
>
|
||||
<div class="layui-select-title" @click="open">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
selectItem.value !== null &&
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0
|
||||
? ''
|
||||
: emptyMessage ?? placeholder
|
||||
"
|
||||
:disabled="disabled"
|
||||
readonly
|
||||
:value="
|
||||
!selectItem.multiple && selectItem.value !== null
|
||||
? selectItem.label
|
||||
: null
|
||||
"
|
||||
:name="name"
|
||||
:class="[
|
||||
'layui-input',
|
||||
'layui-unselect',
|
||||
{ 'layui-disabled': disabled },
|
||||
]"
|
||||
/>
|
||||
<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
|
||||
<!-- 多选 -->
|
||||
<div
|
||||
v-if="selectItem.multiple && Array.isArray(selectItem.label)"
|
||||
class="layui-multiple-select-row"
|
||||
>
|
||||
<div class="layui-multiple-select-badge">
|
||||
<template v-for="(item, index) in selectItem.label" :key="index">
|
||||
<lay-badge theme="green">
|
||||
<span>{{ item }}</span>
|
||||
<i
|
||||
:class="['layui-icon', { 'layui-icon-close': true }]"
|
||||
v-if="
|
||||
!disabled &&
|
||||
!(
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0 &&
|
||||
disabledItemMap[selectItem.value[index]]
|
||||
)
|
||||
"
|
||||
@click="
|
||||
removeItemHandle($event, {
|
||||
label: item,
|
||||
value: Array.isArray(selectItem.value)
|
||||
? selectItem.value[index]
|
||||
: null,
|
||||
})
|
||||
"
|
||||
>
|
||||
</i>
|
||||
</lay-badge>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<!-- 多选不支持空提示 -->
|
||||
<template v-if="!multiple && showEmpty">
|
||||
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import "./index.less";
|
||||
import LaySelectOption from "../selectOption/index.vue";
|
||||
import {
|
||||
defineProps,
|
||||
provide,
|
||||
isProxy,
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
Ref,
|
||||
defineProps,
|
||||
provide,
|
||||
isProxy,
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
Ref,
|
||||
} from "vue";
|
||||
import { useClickOutside } from "@layui/hooks-vue";
|
||||
import { SelectItem } from "../type";
|
||||
@@ -94,115 +94,127 @@ const selectRef = ref<null | HTMLElement>(null);
|
||||
const isClickOutside = useClickOutside(selectRef);
|
||||
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false;
|
||||
}
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string | number | [] | null;
|
||||
name?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
showEmpty?: boolean;
|
||||
emptyMessage?: string;
|
||||
multiple?: boolean;
|
||||
}>(),
|
||||
{
|
||||
modelValue: null,
|
||||
placeholder: "请选择",
|
||||
disabled: false,
|
||||
showEmpty: true,
|
||||
multiple: false,
|
||||
}
|
||||
defineProps<{
|
||||
modelValue?: string | number | [] | null;
|
||||
name?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
showEmpty?: boolean;
|
||||
emptyMessage?: string;
|
||||
multiple?: boolean;
|
||||
}>(),
|
||||
{
|
||||
modelValue: null,
|
||||
placeholder: "请选择",
|
||||
disabled: false,
|
||||
showEmpty: true,
|
||||
multiple: false,
|
||||
}
|
||||
);
|
||||
|
||||
const openState = ref(false);
|
||||
|
||||
const open = function () {
|
||||
// 禁用
|
||||
if (props.disabled) {
|
||||
openState.value = false;
|
||||
return;
|
||||
}
|
||||
openState.value = !openState.value;
|
||||
// 禁用
|
||||
if (props.disabled) {
|
||||
openState.value = false;
|
||||
return;
|
||||
}
|
||||
openState.value = !openState.value;
|
||||
};
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const selectItem = ref<SelectItem>({
|
||||
value: !props.multiple
|
||||
? props.modelValue
|
||||
: props.modelValue
|
||||
? ([] as any[]).concat(props.modelValue)
|
||||
: [],
|
||||
label: props.multiple ? [] : null,
|
||||
multiple: props.multiple,
|
||||
value: !props.multiple
|
||||
? props.modelValue
|
||||
: props.modelValue
|
||||
? ([] as any[]).concat(props.modelValue)
|
||||
: [],
|
||||
label: props.multiple ? [] : null,
|
||||
multiple: props.multiple,
|
||||
} as SelectItem);
|
||||
|
||||
watch(
|
||||
() => selectItem.value.value,
|
||||
(val) => {
|
||||
emit("update:modelValue", val);
|
||||
emit("change", val);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
() => selectItem.value.value,
|
||||
(val) => {
|
||||
emit("update:modelValue", val);
|
||||
emit("change", val);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
selectItem.value.value = value;
|
||||
if (!value && value !== 0) {
|
||||
props.multiple && (selectItem.value.value = []);
|
||||
selectItem.value.label = props.multiple ? [] : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(props, () => {
|
||||
let value = props.modelValue;
|
||||
if (props.multiple) {
|
||||
if (Array.isArray(value)) {
|
||||
selectItem.value.value = value;
|
||||
selectItem.value.label = value.map((o) => ItemsMap.value[o]);
|
||||
} else {
|
||||
console.error("多选时请传入数组值");
|
||||
}
|
||||
} else {
|
||||
selectItem.value.value = value;
|
||||
//@ts-ignore
|
||||
selectItem.value.label = ItemsMap.value[value] || "";
|
||||
}
|
||||
});
|
||||
|
||||
// 禁止操作子项
|
||||
const disabledItemMap: { [key: string | number]: boolean } = {};
|
||||
const selectItemHandle = function (
|
||||
_selectItem: SelectItem,
|
||||
isChecked?: boolean
|
||||
_selectItem: SelectItem,
|
||||
isChecked?: boolean
|
||||
) {
|
||||
if (!props.multiple) {
|
||||
openState.value = false;
|
||||
}
|
||||
disabledItemMap[_selectItem.value as string | number] =
|
||||
_selectItem.disabled as boolean;
|
||||
if (typeof isChecked !== "boolean") {
|
||||
props.multiple
|
||||
? (selectItem.value.label as any[]).push(_selectItem.label)
|
||||
: (selectItem.value.label = _selectItem.label);
|
||||
return;
|
||||
}
|
||||
let values = selectItem.value.value;
|
||||
if (props.multiple && Array.isArray(values)) {
|
||||
const _values = values as any[];
|
||||
const _labels = selectItem.value.label as any[];
|
||||
if (isChecked) {
|
||||
_values.push(_selectItem.value);
|
||||
_labels.push(_selectItem.label);
|
||||
} else {
|
||||
_values.splice(_values.indexOf(_selectItem.value), 1);
|
||||
_labels.splice(_labels.indexOf(_selectItem.label), 1);
|
||||
}
|
||||
selectItem.value.value = _values;
|
||||
selectItem.value.label = _labels;
|
||||
} else {
|
||||
selectItem.value.value = _selectItem.value;
|
||||
selectItem.value.label = _selectItem.label;
|
||||
}
|
||||
if (!props.multiple) {
|
||||
openState.value = false;
|
||||
}
|
||||
disabledItemMap[_selectItem.value as string | number] =
|
||||
_selectItem.disabled as boolean;
|
||||
if (typeof isChecked !== "boolean") {
|
||||
props.multiple
|
||||
? (selectItem.value.label as any[]).push(_selectItem.label)
|
||||
: (selectItem.value.label = _selectItem.label);
|
||||
return;
|
||||
}
|
||||
let values = selectItem.value.value;
|
||||
if (props.multiple && Array.isArray(values)) {
|
||||
const _values = values as any[];
|
||||
const _labels = selectItem.value.label as any[];
|
||||
if (isChecked) {
|
||||
_values.push(_selectItem.value);
|
||||
_labels.push(_selectItem.label);
|
||||
} else {
|
||||
_values.splice(_values.indexOf(_selectItem.value), 1);
|
||||
_labels.splice(_labels.indexOf(_selectItem.label), 1);
|
||||
}
|
||||
selectItem.value.value = _values;
|
||||
selectItem.value.label = _labels;
|
||||
} else {
|
||||
selectItem.value.value = _selectItem.value;
|
||||
selectItem.value.label = _selectItem.label;
|
||||
}
|
||||
};
|
||||
|
||||
const removeItemHandle = function (e: MouseEvent, _selectItem: SelectItem) {
|
||||
e.stopPropagation();
|
||||
selectItemHandle(_selectItem, false);
|
||||
e.stopPropagation();
|
||||
selectItemHandle(_selectItem, false);
|
||||
};
|
||||
const ItemsMap: Ref<{ [index: string]: string }> = ref({});
|
||||
const selectItemPush = function (p: SelectItem) {
|
||||
if (p.value !== null) {
|
||||
//@ts-ignore
|
||||
ItemsMap.value[p.value] = p.label;
|
||||
}
|
||||
};
|
||||
|
||||
provide("selectItemHandle", selectItemHandle);
|
||||
provide("selectItem", selectItem);
|
||||
provide("selectItemPush", selectItemPush);
|
||||
</script>
|
||||
|
||||
@@ -1,65 +1,81 @@
|
||||
<template>
|
||||
<dd
|
||||
:value="value"
|
||||
:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
|
||||
@click="selectHandle"
|
||||
>
|
||||
<template v-if="selectItem.multiple">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
v-model="selected"
|
||||
@change="selectHandle"
|
||||
label=""
|
||||
/>
|
||||
</template>
|
||||
<slot>{{ label }}</slot>
|
||||
</dd>
|
||||
<dd
|
||||
:value="value"
|
||||
:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
|
||||
@click="selectHandle"
|
||||
>
|
||||
<template v-if="selectItem.multiple">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
v-model="selected"
|
||||
@change="selectHandle"
|
||||
label=""
|
||||
/>
|
||||
</template>
|
||||
<slot>{{ label }}</slot>
|
||||
</dd>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySelectOption",
|
||||
name: "LaySelectOption",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LayCheckbox from "../checkbox";
|
||||
import { SelectItem, SelectItemHandle } from "../type";
|
||||
import { SelectItem, SelectItemHandle, SelectItemPush } from "../type";
|
||||
import { computed, defineProps, inject, onMounted, Ref } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value: string | null | undefined;
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
}
|
||||
defineProps<{
|
||||
value: string | null | undefined;
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
}
|
||||
);
|
||||
|
||||
const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
|
||||
const selectItem = inject("selectItem") as Ref<SelectItem>;
|
||||
const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
|
||||
|
||||
const selectHandle = function () {
|
||||
!props.disabled && callSelectItemHandle(!selected.value);
|
||||
}
|
||||
const callSelectItemHandle = function(isChecked ?: boolean){
|
||||
selectItemHandle({
|
||||
value : props.value,
|
||||
label : props.label,
|
||||
disabled : props.disabled
|
||||
}, isChecked);
|
||||
}
|
||||
!props.disabled && callSelectItemHandle(!selected.value);
|
||||
};
|
||||
const callSelectItemHandle = function (isChecked?: boolean) {
|
||||
// console.log("callSelectItemHandle");
|
||||
selectItemHandle(
|
||||
{
|
||||
value: props.value,
|
||||
label: props.label,
|
||||
disabled: props.disabled,
|
||||
},
|
||||
isChecked
|
||||
);
|
||||
};
|
||||
const selected = computed({
|
||||
get(){
|
||||
const selectValues = selectItem.value.value;
|
||||
if (Array.isArray(selectValues)) {
|
||||
return (selectValues as any[]).indexOf(props.value) > -1;
|
||||
}
|
||||
return selectItem.value.value === props.value
|
||||
},
|
||||
set(val){}
|
||||
})
|
||||
onMounted(() => selected.value && callSelectItemHandle())
|
||||
get() {
|
||||
const selectValues = selectItem.value.value;
|
||||
if (Array.isArray(selectValues)) {
|
||||
return (selectValues as any[]).indexOf(props.value) > -1;
|
||||
}
|
||||
return selectItem.value.value === props.value;
|
||||
},
|
||||
set(val) {},
|
||||
});
|
||||
const callSelectItemPush = function () {
|
||||
let item = {
|
||||
value: props.value,
|
||||
label: props.label,
|
||||
disabled: props.disabled,
|
||||
};
|
||||
selectItemPush(item);
|
||||
};
|
||||
onMounted(() => {
|
||||
callSelectItemPush();
|
||||
selected.value && callSelectItemHandle();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
@width-height-pace: 20px;
|
||||
@step-color: #5FB878;
|
||||
@width-height-pace: 24px;
|
||||
@step-color: @step-success-color;
|
||||
@step-fail-color: #FF5722;
|
||||
@step-primary-color: #1E9FFF;
|
||||
@step-warning-color: #FFB800;
|
||||
@step-success-color: #5FB878;
|
||||
|
||||
.lay-step{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.lay-step-item{
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-item-center{
|
||||
@@ -16,9 +21,10 @@
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
.lay-step-item-pace{
|
||||
cursor: pointer;
|
||||
width: @width-height-pace;
|
||||
height: @width-height-pace;
|
||||
border: 2px #8D8D8D solid;
|
||||
border: 1px #8D8D8D solid;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: @width-height-pace;
|
||||
@@ -28,69 +34,88 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lay-step-item-active{
|
||||
border: 2px @step-color solid;
|
||||
color: #FFFFFF;
|
||||
background: @step-color;
|
||||
border: 1px @step-color solid;
|
||||
color: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-wait{
|
||||
border: 2px #000000 solid;
|
||||
border: 1px #000000 solid;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.lay-step-item--success {
|
||||
border: 2px @step-color solid;
|
||||
border: 1px @step-color solid;
|
||||
color: #FFFFFF;
|
||||
background: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item--fail{
|
||||
border: 2px #FF5722 solid;
|
||||
border: 1px @step-fail-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FF5722;
|
||||
background: @step-fail-color;
|
||||
}
|
||||
|
||||
.lay-step-item--warning{
|
||||
border: 2px #FFB800 solid;
|
||||
border: 1px @step-warning-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FFB800;
|
||||
background: @step-warning-color;
|
||||
}
|
||||
.lay-step-item--primary{
|
||||
border: 2px #1E9FFF solid;
|
||||
border: 1px @step-primary-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #1E9FFF;
|
||||
background: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-success {
|
||||
border: 2px @step-color solid;
|
||||
border: 1px @step-color solid;
|
||||
color: #FFFFFF;
|
||||
background: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-fail{
|
||||
border: 2px #FF5722 solid;
|
||||
border: 1px @step-fail-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FF5722;
|
||||
background: @step-fail-color;
|
||||
}
|
||||
|
||||
.lay-step-item-warning{
|
||||
border: 2px #FFB800 solid;
|
||||
border: 1px @step-warning-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FFB800;
|
||||
background: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-primary{
|
||||
border: 2px #1E9FFF solid;
|
||||
border: 1px @step-primary-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #1E9FFF;
|
||||
background: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content{
|
||||
color: #8D8D8D;
|
||||
cursor: pointer;
|
||||
.lay-step-item-content-title{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.lay-step-item-content-row {
|
||||
color: #8D8D8D;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 24px;
|
||||
width: calc( 100% - 26px );
|
||||
.lay-step-item-content-title{
|
||||
word-wrap:break-word;
|
||||
max-width: calc(100% - 8px);
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
background: #ffffff;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.lay-step-item-content-active{
|
||||
color: @step-color;
|
||||
}
|
||||
@@ -99,13 +124,13 @@
|
||||
color: @step-color;
|
||||
}
|
||||
.lay-step-item-content--fail{
|
||||
color: #FF5722;
|
||||
color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-content--warning{
|
||||
color: #FFB800;
|
||||
color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-content--primary{
|
||||
color: #1E9FFF;
|
||||
color: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content-wait{
|
||||
@@ -115,13 +140,13 @@
|
||||
color: @step-color;
|
||||
}
|
||||
.lay-step-item-content-fail{
|
||||
color: #FF5722;
|
||||
color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-content-warning{
|
||||
color: #FFB800;
|
||||
color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-content-primary{
|
||||
color: #1E9FFF;
|
||||
color: @step-primary-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -134,9 +159,9 @@
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
// transform: translateY(-50%);
|
||||
display: block;
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #C9C5C5;
|
||||
}
|
||||
@@ -146,22 +171,99 @@
|
||||
|
||||
.lay-step-item-line-active:before {
|
||||
transition: background 150ms;
|
||||
background: #5FB878 !important;
|
||||
background: @step-success-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-fail:before {
|
||||
transition: background 150ms;
|
||||
background: #FF5722 !important;
|
||||
background: @step-fail-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-warning:before {
|
||||
transition: background 150ms;
|
||||
background: #FFB800 !important;
|
||||
background: @step-warning-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-primary:before {
|
||||
transition: background 150ms;
|
||||
background: #1E9FFF !important;
|
||||
background: @step-primary-color !important;
|
||||
}
|
||||
|
||||
.lay-step-simple{
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
background-color: #cecece;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lay-step-item-simple{
|
||||
padding: 0 18px;
|
||||
}
|
||||
.lay-step-item-simple:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 15px solid;
|
||||
border-color: transparent transparent transparent #cecece;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
.lay-step-item-simple:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border: 15px solid;
|
||||
border-color: transparent transparent transparent #cecece;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
.lay-step-item-simple-border:before{
|
||||
left: 1px;
|
||||
border-color: transparent transparent transparent #ffffff;
|
||||
}
|
||||
|
||||
.lay-step-item-simple-active {
|
||||
background-color: #9fd4ae;
|
||||
}
|
||||
.lay-step-item-simple-success {
|
||||
background-color: @step-color;
|
||||
}
|
||||
.lay-step-item-simple-fail {
|
||||
background-color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-simple-warning {
|
||||
background-color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-simple-primary {
|
||||
background-color: @step-primary-color;
|
||||
}
|
||||
.lay-step-item-simple-active-border:after{
|
||||
border-color: transparent transparent transparent #9fd4ae !important;
|
||||
}
|
||||
.lay-step-item-simple-success-border:after{
|
||||
border-color: transparent transparent transparent @step-success-color!important;
|
||||
}
|
||||
.lay-step-item-simple-fail-border:after{
|
||||
border-color: transparent transparent transparent @step-fail-color!important;
|
||||
}
|
||||
.lay-step-item-simple-warning-border:after{
|
||||
border-color: transparent transparent transparent @step-warning-color!important;
|
||||
}
|
||||
.lay-step-item-simple-primary-border:after{
|
||||
border-color: transparent transparent transparent @step-primary-color!important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -179,12 +281,15 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
// transform: translateX(-50%);
|
||||
display: block;
|
||||
width: 2px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #C9C5C5;
|
||||
}
|
||||
.lay-step-item-content{
|
||||
margin-left: 8px;
|
||||
}
|
||||
.is-vertical{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,14 @@
|
||||
</template>
|
||||
|
||||
<script setup name="layStep" lang="ts">
|
||||
import { ref, watch, provide, defineProps, withDefaults } from "vue";
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
provide,
|
||||
defineProps,
|
||||
withDefaults,
|
||||
defineEmits,
|
||||
} from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface LayStepProps {
|
||||
@@ -14,6 +21,8 @@ export interface LayStepProps {
|
||||
direction?: string;
|
||||
space?: string;
|
||||
currentStatus?: string;
|
||||
composition?: string;
|
||||
simple?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayStepProps>(), {
|
||||
@@ -21,11 +30,19 @@ const props = withDefaults(defineProps<LayStepProps>(), {
|
||||
center: false,
|
||||
direction: "horizontal",
|
||||
space: "auto",
|
||||
currentStatus: "primary",
|
||||
currentStatus: "success",
|
||||
composition: "default",
|
||||
simple: false,
|
||||
});
|
||||
|
||||
const steps = ref([]);
|
||||
|
||||
const emits = defineEmits(["onChange"]);
|
||||
|
||||
const change = (index) => {
|
||||
emits("onChange", index - 1);
|
||||
};
|
||||
|
||||
watch(steps, () => {
|
||||
steps.value.forEach(
|
||||
(instance: { setIndex: (arg0: any) => void }, index: any) => {
|
||||
@@ -37,6 +54,7 @@ watch(steps, () => {
|
||||
provide("LayStep", {
|
||||
props,
|
||||
steps,
|
||||
change,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!simple"
|
||||
:class="[
|
||||
'lay-step-item',
|
||||
isLast && !isCenter ? 'lay-step-item-last' : '',
|
||||
isLast && !isCenter && composition !== 'row' ? 'lay-step-item-last' : '',
|
||||
isCenter ? 'is-item-center' : '',
|
||||
isVertical ? 'is-vertical' : '',
|
||||
]"
|
||||
@@ -27,6 +28,7 @@
|
||||
isWait ? 'lay-step-item-wait' : '',
|
||||
isCenter ? 'is-center' : '',
|
||||
]"
|
||||
@click="onChange(index + 1)"
|
||||
>
|
||||
<slot name="pace">
|
||||
<template v-if="icon">
|
||||
@@ -42,20 +44,40 @@
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<slot>
|
||||
<div
|
||||
:class="[
|
||||
'lay-step-item-content',
|
||||
isActive ? `lay-step-item-content-active` : '',
|
||||
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
|
||||
status ? `lay-step-item-content-${status}` : '',
|
||||
isWait ? 'lay-step-item-content-wait' : '',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'lay-step-item-content',
|
||||
composition === 'row' ? 'lay-step-item-content-row' : '',
|
||||
isActive ? `lay-step-item-content-active` : '',
|
||||
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
|
||||
status ? `lay-step-item-content-${status}` : '',
|
||||
isWait ? 'lay-step-item-content-wait' : '',
|
||||
]"
|
||||
@click="onChange(index + 1)"
|
||||
>
|
||||
<slot>
|
||||
<div class="lay-step-item-content-title">{{ title }}</div>
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
</slot>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
:class="[
|
||||
'lay-step-item',
|
||||
'lay-step-simple',
|
||||
!isStart ? 'lay-step-item-simple' : '',
|
||||
'lay-step-item-simple-border',
|
||||
isActive ? 'lay-step-item-simple-active' : '',
|
||||
isCurrent === index ? `lay-step-item-simple-${currentStatus}` : '',
|
||||
isCurrentBorder === index
|
||||
? `lay-step-item-simple-${currentStatus}-border`
|
||||
: '',
|
||||
isSimpleActive ? 'lay-step-item-simple-active-border' : '',
|
||||
]"
|
||||
@click="onChange(index + 1)"
|
||||
>
|
||||
<slot>{{ index + 1 }}.{{ title }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -95,6 +117,10 @@ const setIndex = (val: number) => {
|
||||
index.value = val;
|
||||
};
|
||||
|
||||
const onChange = (index) => {
|
||||
parents.change(index);
|
||||
};
|
||||
|
||||
const stepsCount = computed(() => {
|
||||
return parents.steps.value.length;
|
||||
});
|
||||
@@ -102,10 +128,21 @@ const stepsCount = computed(() => {
|
||||
const currentStatus = computed(() => {
|
||||
return parents.props.currentStatus;
|
||||
});
|
||||
|
||||
const simple = computed(() => {
|
||||
return parents.props.simple;
|
||||
});
|
||||
|
||||
const composition = computed(() => {
|
||||
return parents.props.composition;
|
||||
});
|
||||
const isCurrent = computed(() => {
|
||||
return parents.props.active;
|
||||
});
|
||||
console.log(isCurrent);
|
||||
|
||||
const isCurrentBorder = computed(() => {
|
||||
return parents.props.active + 1;
|
||||
});
|
||||
const space = computed(() => {
|
||||
return parents.props.space;
|
||||
});
|
||||
@@ -126,6 +163,10 @@ const isWait: ComputedRef<boolean> = computed(() => {
|
||||
return index.value === parents.props.active + 1;
|
||||
});
|
||||
|
||||
const isSimpleActive: ComputedRef<boolean> = computed(() => {
|
||||
return index.value - 1 <= parents.props.active;
|
||||
});
|
||||
|
||||
const isActive: ComputedRef<boolean> = computed(() => {
|
||||
return index.value <= parents.props.active;
|
||||
});
|
||||
@@ -135,6 +176,10 @@ const isLast: ComputedRef<boolean> = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const isStart: ComputedRef<boolean> = computed(() => {
|
||||
return parents.steps.value[0]?.itemId === currentInstance.uid;
|
||||
});
|
||||
|
||||
const stepItemState = reactive({
|
||||
itemId: computed(() => currentInstance?.uid),
|
||||
setIndex,
|
||||
|
||||
@@ -3,7 +3,7 @@ import Component from "./index.vue";
|
||||
import type { IDefineComponent } from "../type/index";
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || "LayCount", Component);
|
||||
app.component(Component.name || "laySubMenu", Component);
|
||||
};
|
||||
|
||||
export default Component as IDefineComponent;
|
||||
57
src/module/subMenu/index.vue
Normal file
57
src/module/subMenu/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySubMenu",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, inject, Ref, useSlots } from "vue";
|
||||
|
||||
const slots = useSlots();
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const isTree = inject("isTree");
|
||||
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
||||
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
|
||||
|
||||
const openHandle = function () {
|
||||
if (openKeys.value.includes(props.id)) {
|
||||
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
|
||||
} else {
|
||||
openKeys.value.push(props.id);
|
||||
}
|
||||
};
|
||||
|
||||
const isOpen = computed(() => {
|
||||
return openKeys.value.includes(props.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="layui-nav-item"
|
||||
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
|
||||
>
|
||||
<a href="javascript:void(0)" @click="openHandle()">
|
||||
<slot v-if="slots.title" name="title"></slot>
|
||||
<span v-else>{{ title }}</span>
|
||||
<i
|
||||
:class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
|
||||
class="layui-icon layui-icon-down layui-nav-more"
|
||||
></i>
|
||||
</a>
|
||||
<dl
|
||||
class="layui-nav-child"
|
||||
:class="[
|
||||
isOpen && !isTree ? 'layui-show' : '',
|
||||
!isTree ? 'layui-anim layui-anim-upbit' : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</li>
|
||||
</template>
|
||||
180
src/module/tree/index.less
Normal file
180
src/module/tree/index.less
Normal file
@@ -0,0 +1,180 @@
|
||||
|
||||
.layui-tree {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.layui-tree .layui-form-checkbox {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.layui-tree-set {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-tree-pack {
|
||||
display: none;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-tree-iconClick,
|
||||
.layui-tree-main {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-pack {
|
||||
padding-left: 27px;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-set .layui-tree-set:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: -9px;
|
||||
width: 17px;
|
||||
height: 0;
|
||||
border-top: 1px dotted #c0c4cc;
|
||||
}
|
||||
|
||||
.layui-tree-entry {
|
||||
position: relative;
|
||||
padding: 3px 0;
|
||||
height: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layui-tree-entry:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-entry:hover {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
|
||||
color: #999;
|
||||
text-decoration: underline;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.layui-tree-main {
|
||||
cursor: pointer;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-set:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -9px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 1px dotted #c0c4cc;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-set.layui-tree-setLineShort:before {
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-set.layui-tree-setHide:before {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.layui-tree-iconClick {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0 10px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.layui-tree-icon {
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #c0c4cc;
|
||||
}
|
||||
|
||||
.layui-tree-iconClick .layui-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.layui-tree-icon .layui-icon {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-tree-iconArrow {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.layui-tree-iconArrow:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 3px;
|
||||
z-index: 100;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent #c0c4cc;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.layui-tree-btnGroup,
|
||||
.layui-tree-editInput {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-tree-spread
|
||||
> .layui-tree-entry
|
||||
> .layui-tree-iconClick
|
||||
> .layui-tree-iconArrow:after {
|
||||
transform: rotate(90deg) translate(3px, 4px);
|
||||
}
|
||||
|
||||
.layui-tree-txt {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.layui-tree-search {
|
||||
margin-bottom: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-tree-btnGroup .layui-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-tree-btnGroup .layui-icon:hover {
|
||||
color: #999;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.layui-tree-entry:hover .layui-tree-btnGroup {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.layui-tree-editInput {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 0 3px;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.layui-tree-emptyText {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
@@ -1,9 +1,3 @@
|
||||
<!--
|
||||
* @Date: 2021-10-16 13:22:38
|
||||
* @LastEditors: 落小梅
|
||||
* @LastEditTime: 2021-10-16 13:53:14
|
||||
* @FilePath: \layui-vue\src\module\tree\new-tree\index.vue
|
||||
-->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayTree",
|
||||
@@ -16,6 +10,7 @@ import TreeNode from "./TreeNode.vue";
|
||||
import { computed } from "vue";
|
||||
import { useTree } from "./useTree";
|
||||
import { TreeData } from "./tree";
|
||||
import "./index.less";
|
||||
|
||||
type StringFn = () => string;
|
||||
type StringOrNumber = string | number;
|
||||
|
||||
@@ -9,3 +9,7 @@ export interface SelectItem {
|
||||
export interface SelectItemHandle {
|
||||
(selectItem: SelectItem, isChecked?: boolean): void;
|
||||
}
|
||||
|
||||
export interface SelectItemPush {
|
||||
(selectItem: SelectItem): void
|
||||
}
|
||||
Reference in New Issue
Block a user