✨(component): 更新日志
This commit is contained in:
就眠儀式
parent
0e8a649fa2
commit
568b8f6131
@ -1,3 +1,8 @@
|
|||||||
|
@import "../checkbox/index.less";
|
||||||
|
@import "../input/index.less";
|
||||||
|
@import "../dropdown/index.less";
|
||||||
|
@import "../tagInput/index.less";
|
||||||
|
|
||||||
.layui-select {
|
.layui-select {
|
||||||
width: 220px;
|
width: 220px;
|
||||||
|
|
||||||
|
|||||||
@ -1,176 +1,191 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "LaySelect",
|
name: "LaySelect",
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import {
|
import {
|
||||||
provide,
|
provide,
|
||||||
computed,
|
computed,
|
||||||
ref,
|
ref,
|
||||||
Ref,
|
Ref,
|
||||||
useSlots,
|
useSlots,
|
||||||
onMounted,
|
onMounted,
|
||||||
VNode,
|
VNode,
|
||||||
Component,
|
Component,
|
||||||
watch,
|
watch,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import LayInput from "../input/index.vue";
|
import LayInput from "../input/index.vue";
|
||||||
import LayTagInput from "../tagInput/index.vue";
|
import LayTagInput from "../tagInput/index.vue";
|
||||||
import LayDropdown from "../dropdown/index.vue";
|
import LayDropdown from "../dropdown/index.vue";
|
||||||
import LaySelectOption, {
|
import LaySelectOption, {
|
||||||
LaySelectOptionProps,
|
LaySelectOptionProps,
|
||||||
} from "../selectOption/index.vue";
|
} from "../selectOption/index.vue";
|
||||||
|
|
||||||
export interface LaySelectProps {
|
export interface LaySelectProps {
|
||||||
name?: string;
|
name?: string;
|
||||||
create?: boolean;
|
create?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
modelValue?: any;
|
showEmpty?: boolean;
|
||||||
multiple?: boolean;
|
emptyMessage?: string;
|
||||||
items?: LaySelectOptionProps[];
|
modelValue?: any;
|
||||||
size?: "lg" | "md" | "sm" | "xs";
|
multiple?: boolean;
|
||||||
allowClear?: boolean;
|
items?: LaySelectOptionProps[];
|
||||||
}
|
size?: "lg" | "md" | "sm" | "xs";
|
||||||
|
collapseTagsTooltip?: boolean;
|
||||||
export interface SelectEmits {
|
minCollapsedNum?: number;
|
||||||
(e: "update:modelValue", value: string): void;
|
allowClear?: boolean;
|
||||||
(e: "change", value: string): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LaySelectProps>(), {
|
|
||||||
modelValue: null,
|
|
||||||
placeholder: "请选择",
|
|
||||||
disabled: false,
|
|
||||||
multiple: false,
|
|
||||||
create: false,
|
|
||||||
size: "md",
|
|
||||||
allowClear: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const slots = useSlots();
|
|
||||||
const searchValue = ref("");
|
|
||||||
const singleValue = ref("");
|
|
||||||
const multipleValue = ref([]);
|
|
||||||
const openState: Ref<boolean> = ref(false);
|
|
||||||
const selectedItem: Ref<any> = ref([]);
|
|
||||||
const options = ref<any>([]);
|
|
||||||
const emits = defineEmits<SelectEmits>();
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (slots.default) {
|
|
||||||
getOption(slots.default());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Object.assign(options.value, props.items);
|
export interface SelectEmits {
|
||||||
|
(e: "update:modelValue", value: string): void;
|
||||||
watch(
|
(e: "change", value: string): void;
|
||||||
selectedValue,
|
}
|
||||||
() => {
|
|
||||||
if (multiple.value) {
|
const props = withDefaults(defineProps<LaySelectProps>(), {
|
||||||
multipleValue.value = selectedValue.value.map((value: any) =>{
|
modelValue: null,
|
||||||
return options.value.find((item: any) => item.value === value)
|
placeholder: "请选择",
|
||||||
})
|
showEmpty: true,
|
||||||
} else {
|
emptyMessage: "请选择",
|
||||||
singleValue.value = options.value.find((item: any) => {
|
collapseTagsTooltip: true,
|
||||||
return item.value === selectedValue.value;
|
minCollapsedNum: 3,
|
||||||
})?.label;
|
disabled: false,
|
||||||
}
|
multiple: false,
|
||||||
},
|
create: false,
|
||||||
{ immediate: true }
|
size: "md",
|
||||||
);
|
allowClear: false,
|
||||||
});
|
|
||||||
|
|
||||||
const getOption = function (nodes: VNode[]) {
|
|
||||||
nodes?.map((item: VNode) => {
|
|
||||||
let component = item.type as Component;
|
|
||||||
if (component.name === LaySelectOption.name) {
|
|
||||||
options.value.push(item.props);
|
|
||||||
} else {
|
|
||||||
getOption(item.children as VNode[]);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
const slots = useSlots();
|
||||||
const selectedValue = computed({
|
const searchValue = ref("");
|
||||||
get() {
|
const singleValue = ref("");
|
||||||
return props.modelValue;
|
const multipleValue = ref([]);
|
||||||
},
|
const openState: Ref<boolean> = ref(false);
|
||||||
set(val) {
|
const selectedItem: Ref<any> = ref([]);
|
||||||
emits("update:modelValue", val);
|
const options = ref<any>([]);
|
||||||
emits("change", val);
|
const emits = defineEmits<SelectEmits>();
|
||||||
},
|
|
||||||
});
|
onMounted(() => {
|
||||||
|
if (slots.default) {
|
||||||
const multiple = computed(() => {
|
getOption(slots.default());
|
||||||
return props.multiple;
|
}
|
||||||
});
|
|
||||||
|
Object.assign(options.value, props.items);
|
||||||
provide("openState", openState);
|
|
||||||
provide("selectedItem", selectedItem);
|
watch(
|
||||||
provide("selectedValue", selectedValue);
|
selectedValue,
|
||||||
provide("searchValue", searchValue);
|
() => {
|
||||||
provide("multiple", multiple);
|
if (multiple.value) {
|
||||||
</script>
|
multipleValue.value = selectedValue.value.map((value: any) => {
|
||||||
|
return options.value.find((item: any) => {
|
||||||
<template>
|
item.disabled == "" || item.disabled == true ? item.closable = false : item.closable = true;
|
||||||
<div class="layui-select">
|
return item.value === value;
|
||||||
<lay-dropdown
|
});
|
||||||
:disabled="disabled"
|
|
||||||
:update-at-scroll="true"
|
});
|
||||||
@show="openState = true"
|
} else {
|
||||||
@hide="openState = false"
|
singleValue.value = options.value.find((item: any) => {
|
||||||
>
|
return item.value === selectedValue.value;
|
||||||
<lay-tag-input
|
})?.label;
|
||||||
v-if="multiple"
|
}
|
||||||
v-model="multipleValue"
|
},
|
||||||
:allow-clear="allowClear"
|
{ immediate: true }
|
||||||
:disabledInput="true"
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const getOption = function (nodes: VNode[]) {
|
||||||
|
nodes?.map((item: VNode) => {
|
||||||
|
let component = item.type as Component;
|
||||||
|
if (component.name === LaySelectOption.name) {
|
||||||
|
options.value.push(item.props);
|
||||||
|
} else {
|
||||||
|
getOption(item.children as VNode[]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedValue = computed({
|
||||||
|
get() {
|
||||||
|
return props.modelValue;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emits("update:modelValue", val);
|
||||||
|
emits("change", val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const multiple = computed(() => {
|
||||||
|
return props.multiple;
|
||||||
|
});
|
||||||
|
|
||||||
|
provide("openState", openState);
|
||||||
|
provide("selectedItem", selectedItem);
|
||||||
|
provide("selectedValue", selectedValue);
|
||||||
|
provide("searchValue", searchValue);
|
||||||
|
provide("multiple", multiple);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="layui-select">
|
||||||
|
<lay-dropdown
|
||||||
|
:disabled="disabled"
|
||||||
|
:update-at-scroll="true"
|
||||||
|
@show="openState = true"
|
||||||
|
@hide="openState = false"
|
||||||
>
|
>
|
||||||
<template #suffix>
|
<lay-tag-input
|
||||||
<lay-icon
|
v-if="multiple"
|
||||||
type="layui-icon-triangle-d"
|
v-model="multipleValue"
|
||||||
:class="{ triangle: openState }"
|
:allow-clear="allowClear"
|
||||||
></lay-icon>
|
:collapseTagsTooltip="collapseTagsTooltip"
|
||||||
</template>
|
:minCollapsedNum="minCollapsedNum"
|
||||||
</lay-tag-input>
|
:disabledInput="true"
|
||||||
<lay-input
|
>
|
||||||
v-else
|
<template #suffix>
|
||||||
v-model="singleValue"
|
<lay-icon
|
||||||
:placeholder="placeholder"
|
type="layui-icon-triangle-d"
|
||||||
:allow-clear="allowClear"
|
:class="{ triangle: openState }"
|
||||||
:readonly="true"
|
></lay-icon>
|
||||||
>
|
|
||||||
<template #suffix>
|
|
||||||
<lay-icon
|
|
||||||
type="layui-icon-triangle-d"
|
|
||||||
:class="{ triangle: openState }"
|
|
||||||
></lay-icon>
|
|
||||||
</template>
|
|
||||||
</lay-input>
|
|
||||||
<template #content>
|
|
||||||
<dl class="layui-select-options">
|
|
||||||
<div class="layui-select-search" v-if="multiple">
|
|
||||||
<lay-input
|
|
||||||
v-model="searchValue"
|
|
||||||
prefix-icon="layui-icon-search"
|
|
||||||
placeholder="请搜索"
|
|
||||||
size="sm"
|
|
||||||
></lay-input>
|
|
||||||
</div>
|
|
||||||
<template v-if="items">
|
|
||||||
<lay-select-option
|
|
||||||
v-for="(item, index) in items"
|
|
||||||
v-bind="item"
|
|
||||||
:key="index"
|
|
||||||
></lay-select-option>
|
|
||||||
</template>
|
</template>
|
||||||
<slot></slot>
|
</lay-tag-input>
|
||||||
</dl>
|
<lay-input
|
||||||
</template>
|
v-else
|
||||||
</lay-dropdown>
|
v-model="singleValue"
|
||||||
</div>
|
:placeholder="placeholder"
|
||||||
</template>
|
:allow-clear="allowClear"
|
||||||
|
:readonly="true"
|
||||||
|
>
|
||||||
|
<template #suffix>
|
||||||
|
<lay-icon
|
||||||
|
type="layui-icon-triangle-d"
|
||||||
|
:class="{ triangle: openState }"
|
||||||
|
></lay-icon>
|
||||||
|
</template>
|
||||||
|
</lay-input>
|
||||||
|
<template #content>
|
||||||
|
<dl class="layui-select-options">
|
||||||
|
<div class="layui-select-search" v-if="multiple">
|
||||||
|
<lay-input
|
||||||
|
v-model="searchValue"
|
||||||
|
prefix-icon="layui-icon-search"
|
||||||
|
placeholder="请搜索"
|
||||||
|
size="sm"
|
||||||
|
></lay-input>
|
||||||
|
</div>
|
||||||
|
<lay-select-option v-if="showEmpty && !multiple" :label="emptyMessage" value=""></lay-select-option>
|
||||||
|
<template v-if="items">
|
||||||
|
<lay-select-option
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
v-bind="item"
|
||||||
|
:key="index"
|
||||||
|
></lay-select-option>
|
||||||
|
</template>
|
||||||
|
<slot></slot>
|
||||||
|
</dl>
|
||||||
|
</template>
|
||||||
|
</lay-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -14,7 +14,6 @@ import {
|
|||||||
Ref,
|
Ref,
|
||||||
onMounted,
|
onMounted,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { arrayExpression } from "@babel/types";
|
|
||||||
|
|
||||||
export interface LaySelectOptionProps {
|
export interface LaySelectOptionProps {
|
||||||
label: string;
|
label: string;
|
||||||
|
|||||||
@ -19,6 +19,8 @@
|
|||||||
<li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
|
<li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
|
||||||
<li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>
|
<li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>
|
||||||
<li>[新增] tabitem 组件 icon 属性, 提供 title 属性前置 icon 设置。</li>
|
<li>[新增] tabitem 组件 icon 属性, 提供 title 属性前置 icon 设置。</li>
|
||||||
|
<li>[新增] select 组件 collapseTagsTooltip 属性, 多选模式下是否悬浮显示折叠的选中项。</li>
|
||||||
|
<li>[新增] select 组件 minCollapsedNum 属性, 多选模式选中项超过多少时折叠。</li>
|
||||||
<li>[修复] tolltip 组件 content 变化时, 位置无法自动计算调整的问题。</li>
|
<li>[修复] tolltip 组件 content 变化时, 位置无法自动计算调整的问题。</li>
|
||||||
<li>[修复] breadcrumb-item 组件无法正确传递 attrs, 导致 @click 等自定义事件失效。</li>
|
<li>[修复] breadcrumb-item 组件无法正确传递 attrs, 导致 @click 等自定义事件失效。</li>
|
||||||
<li>[修复] layout 组件仅引入了 footer 作为内容元素时, layui-layout-vertical 样式不生效, 导致布局错误。</li>
|
<li>[修复] layout 组件仅引入了 footer 作为内容元素时, layui-layout-vertical 样式不生效, 导致布局错误。</li>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user