(component): update

This commit is contained in:
就眠儀式 2022-09-25 22:08:35 +08:00
parent 572c5fd274
commit 1e621c4bcd
5 changed files with 62 additions and 43 deletions

View File

@ -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;
}
}

View File

@ -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">

View File

@ -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 (

View File

@ -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;

View File

@ -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>