(component): update

This commit is contained in:
就眠儀式 2022-09-30 17:32:49 +08:00
parent 954e14bff6
commit c8aafeaa51
4 changed files with 234 additions and 227 deletions

View File

@ -5,6 +5,7 @@
.layui-select { .layui-select {
width: 220px; width: 220px;
cursor: pointer;
.layui-tag-input{ .layui-tag-input{
width: 220px; width: 220px;
&-clear{ &-clear{
@ -13,6 +14,10 @@
} }
} }
.layui-unselect * {
cursor: pointer;
}
.layui-select-content { .layui-select-content {
max-height: 300px; max-height: 300px;
padding: 5px 0px; padding: 5px 0px;

View File

@ -1,12 +1,12 @@
<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,
@ -17,17 +17,17 @@
Component, Component,
watch, watch,
nextTick, nextTick,
onUnmounted onUnmounted,
} from "vue"; } from "vue";
import { LayIcon } from "@layui/icons-vue"; import { LayIcon } from "@layui/icons-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;
disabled?: boolean; disabled?: boolean;
placeholder?: string; placeholder?: string;
@ -42,15 +42,15 @@
minCollapsedNum?: number; minCollapsedNum?: number;
allowClear?: boolean; allowClear?: boolean;
showSearch?: boolean; showSearch?: boolean;
} }
export interface SelectEmits { export interface SelectEmits {
(e: "update:modelValue", value: string): void; (e: "update:modelValue", value: string): void;
(e: "change", value: string): void; (e: "change", value: string): void;
(e: "search", value: string): void; (e: "search", value: string): void;
} }
const props = withDefaults(defineProps<LaySelectProps>(), { const props = withDefaults(defineProps<LaySelectProps>(), {
modelValue: null, modelValue: null,
placeholder: "请选择", placeholder: "请选择",
showEmpty: true, showEmpty: true,
@ -63,18 +63,18 @@
allowClear: false, allowClear: false,
showSearch: false, showSearch: false,
size: "md", size: "md",
}); });
const slots = useSlots(); const slots = useSlots();
const searchValue = ref(""); const searchValue = ref("");
const singleValue = ref(""); const singleValue = ref("");
const multipleValue = ref([]); const multipleValue = ref([]);
const emits = defineEmits<SelectEmits>(); const emits = defineEmits<SelectEmits>();
const openState: Ref<boolean> = ref(false); const openState: Ref<boolean> = ref(false);
const options = ref<any>([]); const options = ref<any>([]);
var timer: any; var timer: any;
const getOption = (nodes: VNode[]) => { const getOption = (nodes: VNode[]) => {
nodes?.map((item: VNode) => { nodes?.map((item: VNode) => {
let component = item.type as Component; let component = item.type as Component;
if (component.name === LaySelectOption.name) { if (component.name === LaySelectOption.name) {
@ -83,17 +83,16 @@
getOption(item.children as VNode[]); getOption(item.children as VNode[]);
} }
}); });
}; };
const intOption = () => { const intOption = () => {
if (slots.default) { if (slots.default) {
getOption(slots.default()); getOption(slots.default());
} }
Object.assign(options.value, props.items); Object.assign(options.value, props.items);
} };
onMounted(() => {
onMounted(() => {
intOption(); intOption();
timer = setInterval(intOption, 500); timer = setInterval(intOption, 500);
@ -118,13 +117,13 @@
}, },
{ immediate: true, deep: true } { immediate: true, deep: true }
); );
}); });
onUnmounted(() => { onUnmounted(() => {
clearInterval(timer); clearInterval(timer);
}) });
const selectedValue = computed({ const selectedValue = computed({
get() { get() {
return props.modelValue; return props.modelValue;
}, },
@ -132,33 +131,33 @@
emits("update:modelValue", value); emits("update:modelValue", value);
emits("change", value); emits("change", value);
}, },
}); });
const multiple = computed(() => { const multiple = computed(() => {
return props.multiple; return props.multiple;
}); });
const handleSearch = (value: string) => { const handleSearch = (value: string) => {
emits("search", value); emits("search", value);
searchValue.value = value; searchValue.value = value;
}; };
const handleClear = () => { const handleClear = () => {
if (multiple.value) { if (multiple.value) {
selectedValue.value = []; selectedValue.value = [];
} else { } else {
selectedValue.value = ""; selectedValue.value = "";
} }
}; };
provide("openState", openState); provide("openState", openState);
provide("selectedValue", selectedValue); provide("selectedValue", selectedValue);
provide("searchValue", searchValue); provide("searchValue", searchValue);
provide("multiple", multiple); provide("multiple", multiple);
</script> </script>
<template> <template>
<div class="layui-select layui-unselect"> <div class="layui-select">
<lay-dropdown <lay-dropdown
:disabled="disabled" :disabled="disabled"
:update-at-scroll="true" :update-at-scroll="true"
@ -174,6 +173,7 @@
:minCollapsedNum="minCollapsedNum" :minCollapsedNum="minCollapsedNum"
:disabledInput="true" :disabledInput="true"
:size="size" :size="size"
:class="{'layui-unselect': true}"
@clear="handleClear" @clear="handleClear"
> >
<template #suffix> <template #suffix>
@ -189,6 +189,7 @@
:placeholder="placeholder" :placeholder="placeholder"
:allow-clear="allowClear" :allow-clear="allowClear"
:readonly="!showSearch" :readonly="!showSearch"
:class="{'layui-unselect': !showSearch}"
:size="size" :size="size"
@Input="handleSearch" @Input="handleSearch"
@clear="handleClear" @clear="handleClear"
@ -227,5 +228,4 @@
</template> </template>
</lay-dropdown> </lay-dropdown>
</div> </div>
</template> </template>

View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-select` 标签, 创建下拉选择框 ::: demo 使用 `lay-select` 标签, 创建下拉选择框
<template> <template>
<lay-select v-model="value"> <lay-select v-model="value" placeholder="请选择">
<lay-select-option value="1" label="学习"></lay-select-option> <lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option> <lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option> <lay-select-option value="3" label="运动"></lay-select-option>

View File

@ -14,17 +14,19 @@
<ul> <ul>
<a name="1-5-1"></a> <a name="1-5-1"></a>
<li> <li>
<h3>1.5.1 <span class="layui-badge-rim">2022-10-01</span></h3> <h3>1.5.1 <span class="layui-badge-rim">2022-09-30</span></h3>
<ul> <ul>
<li>[新增] avatar 组件 default 查询, 用于显示文本头像</li> <li>[新增] avatar 组件 default 插槽, 支持文本头像, 用于复杂场景</li>
<li>[新增] avatar 组件 icon 属性, 用于展示 iconfont 头像, 默认值为 `layui-icon-username`</li> <li>[新增] avatar 组件 icon 属性, 用于展示 iconfont 头像, 默认值为 `layui-icon-username`</li>
<li>[修复] select 组件 multiple 为 true 且 showSearch 为 true 时光标为输入, 否则为小手指。</li>
<li>[修复] select 组件 slots 延时渲染, 选中项 label 不更新的问题。</li>
</ul> </ul>
</li> </li>
</ul> </ul>
<ul> <ul>
<a name="1-5-0"></a> <a name="1-5-0"></a>
<li> <li>
<h3>1.5.0 <span class="layui-badge-rim">2022-10-01</span></h3> <h3>1.5.0 <span class="layui-badge-rim">2022-09-29</span></h3>
<ul> <ul>
<li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li> <li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
<li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li> <li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>