✨(component): update
This commit is contained in:
parent
954e14bff6
commit
c8aafeaa51
@ -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;
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user