✨(component): update
This commit is contained in:
parent
572c5fd274
commit
1e621c4bcd
@ -10,6 +10,16 @@
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.layui-select .layui-icon-triangle-d {
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
color: var(--global-neutral-color-8);
|
||||
}
|
||||
|
||||
.layui-select .layui-icon-triangle-d.triangle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.layui-select-options .layui-select-option {
|
||||
padding: 0 10px;
|
||||
line-height: 36px;
|
||||
@ -30,4 +40,7 @@
|
||||
|
||||
.layui-select-search {
|
||||
padding: 5px 10px;
|
||||
.layui-input-prefix {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
@ -6,19 +6,30 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { provide, computed, WritableComputedRef, ref, Ref, useSlots, onMounted, VNode, Component } from "vue";
|
||||
import {
|
||||
provide,
|
||||
computed,
|
||||
ref,
|
||||
Ref,
|
||||
useSlots,
|
||||
onMounted,
|
||||
VNode,
|
||||
Component,
|
||||
} from "vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayTagInput from "../tagInput/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import LaySelectOption, { LaySelectOptionProps } from "../selectOption/index.vue";
|
||||
import LaySelectOption, {
|
||||
LaySelectOptionProps,
|
||||
} from "../selectOption/index.vue";
|
||||
|
||||
export interface LaySelectProps {
|
||||
name?: string;
|
||||
placeholder?: string;
|
||||
create?: boolean;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
modelValue?: any;
|
||||
multiple?: boolean;
|
||||
create?: boolean;
|
||||
items?: LaySelectOptionProps[];
|
||||
size?: "lg" | "md" | "sm" | "xs";
|
||||
allowClear?: boolean;
|
||||
@ -47,10 +58,11 @@ const selectedItem: Ref<any> = ref([]);
|
||||
const options = ref<any>([]);
|
||||
|
||||
onMounted(() => {
|
||||
if(slots.default) {
|
||||
if (slots.default) {
|
||||
getOption(slots.default());
|
||||
}
|
||||
})
|
||||
Object.assign(options.value, props.items);
|
||||
});
|
||||
|
||||
const getOption = function (nodes: VNode[]) {
|
||||
nodes?.map((item: VNode) => {
|
||||
@ -77,22 +89,21 @@ const multiple = computed(() => {
|
||||
return props.multiple;
|
||||
});
|
||||
|
||||
provide("selectedItem", selectedItem);
|
||||
provide("openState", openState);
|
||||
provide("selectedItem", selectedItem);
|
||||
provide("selectedValue", selectedValue);
|
||||
provide("searchValue", searchValue);
|
||||
provide("multiple", multiple);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
可选项: {{ options }}
|
||||
选中值: {{ selectedValue }}
|
||||
<div class="layui-select">
|
||||
<lay-dropdown
|
||||
:disabled="disabled"
|
||||
:update-at-scroll = "true"
|
||||
:update-at-scroll="true"
|
||||
@show="openState = true"
|
||||
@hide="openState = false">
|
||||
@hide="openState = false"
|
||||
>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="selectedValue"
|
||||
@ -100,27 +111,28 @@ provide("multiple", multiple);
|
||||
:disabledInput="true"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon type="layui-icon-triangle-d"></lay-icon>
|
||||
<lay-icon type="layui-icon-triangle-d" :class="{'triangle':openState}"></lay-icon>
|
||||
</template>
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
v-model="selectedValue"
|
||||
v-model="searchValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="true"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon type="layui-icon-triangle-d"></lay-icon>
|
||||
<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">
|
||||
<div class="layui-select-search" v-if="multiple">
|
||||
<lay-input
|
||||
v-model="searchValue"
|
||||
size="sm"
|
||||
placeholder="请选择"
|
||||
prefix-icon="layui-icon-search"
|
||||
placeholder="请搜索"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
</div>
|
||||
<template v-if="items">
|
||||
|
@ -52,7 +52,6 @@ const selected = computed(() => {
|
||||
});
|
||||
|
||||
const select = () => {
|
||||
|
||||
const info = {
|
||||
label: props.label,
|
||||
value: props.value,
|
||||
@ -69,8 +68,7 @@ const select = () => {
|
||||
} else {
|
||||
selectedItem.value = info;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const display = computed(() => {
|
||||
return (
|
||||
|
@ -60,13 +60,8 @@ const tagData = useVModel(props, "modelValue", emit, {
|
||||
deep: true,
|
||||
defaultValue: [] as TagData[],
|
||||
});
|
||||
const _tagProps = reactive(props.tagProps ?? {})
|
||||
const tagProps = reactiveOmit(
|
||||
_tagProps,
|
||||
"closable",
|
||||
"size",
|
||||
"disabled"
|
||||
);
|
||||
const _tagProps = reactive(props.tagProps ?? {});
|
||||
const tagProps = reactiveOmit(_tagProps, "closable", "size", "disabled");
|
||||
|
||||
const computedTagData = computed(() => {
|
||||
if (!tagData.value) return;
|
||||
|
@ -26,6 +26,7 @@
|
||||
<li>[修复] cascader 外部清空 modelValue, 选中项仍不清楚的问题。</li>
|
||||
<li>[修复] select 组件位于 layer 底部时, 点击时出现滚动条。</li>
|
||||
<li>[修复] select 组件与 table 组件组合使用时, 下拉内容被遮盖。</li>
|
||||
<li>[修复] select 组件多选模式下提示信息错误, 将 "请选择" 调整为 "请输入"。</li>
|
||||
<li>[优化] tag 组件 border background height 等, 使其更贴合 layui 的设计规范。</li>
|
||||
<li>[优化] input 组件 suffix 插槽与 allow-clear 启用时的显示顺序, clear > suffix。</li>
|
||||
</ul>
|
||||
|
Loading…
Reference in New Issue
Block a user