📝: 更新日志
This commit is contained in:
parent
c2f8511da9
commit
33bfadd92b
@ -1,23 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<lay-dropdown class="layui-cascader" ref="dropdownRef" :autoFitMinWidth="false" :updateAtScroll="true">
|
<lay-dropdown
|
||||||
<lay-input v-model="displayValue" readonly suffix-icon="layui-icon-down" :placeholder="placeholder"
|
class="layui-cascader"
|
||||||
v-if="!slots.default"></lay-input>
|
ref="dropdownRef"
|
||||||
|
:autoFitMinWidth="false"
|
||||||
|
:updateAtScroll="true"
|
||||||
|
>
|
||||||
|
<lay-input
|
||||||
|
v-model="displayValue"
|
||||||
|
readonly
|
||||||
|
suffix-icon="layui-icon-down"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
v-if="!slots.default"
|
||||||
|
></lay-input>
|
||||||
<slot v-else></slot>
|
<slot v-else></slot>
|
||||||
|
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="layui-cascader-panel">
|
<div class="layui-cascader-panel">
|
||||||
<template v-for="(itemCol, index) in treeData">
|
<template v-for="(itemCol, index) in treeData">
|
||||||
<lay-scroll height="180px" class="layui-cascader-menu" :key="'cascader-menu' + index"
|
<lay-scroll
|
||||||
v-if="itemCol.data.length">
|
height="180px"
|
||||||
<div class="layui-cascader-menu-item" v-for="(item, i) in itemCol.data" :key="index + i"
|
class="layui-cascader-menu"
|
||||||
@click="selectBar(item, i, index)" :class="[
|
:key="'cascader-menu' + index"
|
||||||
|
v-if="itemCol.data.length"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="layui-cascader-menu-item"
|
||||||
|
v-for="(item, i) in itemCol.data"
|
||||||
|
:key="index + i"
|
||||||
|
@click="selectBar(item, i, index)"
|
||||||
|
:class="[
|
||||||
{
|
{
|
||||||
'layui-cascader-selected': itemCol.selectIndex === i,
|
'layui-cascader-selected': itemCol.selectIndex === i,
|
||||||
},
|
},
|
||||||
]">
|
]"
|
||||||
<slot :name="item.slot" v-if="item.slot && slots[item.slot]"></slot>
|
>
|
||||||
|
<slot
|
||||||
|
:name="item.slot"
|
||||||
|
v-if="item.slot && slots[item.slot]"
|
||||||
|
></slot>
|
||||||
<template v-else>{{ item.label }}</template>
|
<template v-else>{{ item.label }}</template>
|
||||||
<i class="layui-icon layui-icon-right" v-if="item.children && item.children.length"></i>
|
<i
|
||||||
|
class="layui-icon layui-icon-right"
|
||||||
|
v-if="item.children && item.children.length"
|
||||||
|
></i>
|
||||||
</div>
|
</div>
|
||||||
</lay-scroll>
|
</lay-scroll>
|
||||||
</template>
|
</template>
|
||||||
@ -44,7 +69,7 @@ export interface LayCascaderProps {
|
|||||||
decollator?: string;
|
decollator?: string;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
onlyLastLevel?: boolean;
|
onlyLastLevel?: boolean;
|
||||||
replaceFields?: { label: string, value: string, children: string }
|
replaceFields?: { label: string; value: string; children: string };
|
||||||
}
|
}
|
||||||
const props = withDefaults(defineProps<LayCascaderProps>(), {
|
const props = withDefaults(defineProps<LayCascaderProps>(), {
|
||||||
options: null,
|
options: null,
|
||||||
@ -54,11 +79,11 @@ const props = withDefaults(defineProps<LayCascaderProps>(), {
|
|||||||
onlyLastLevel: false,
|
onlyLastLevel: false,
|
||||||
replaceFields: () => {
|
replaceFields: () => {
|
||||||
return {
|
return {
|
||||||
label: 'label',
|
label: "label",
|
||||||
value: 'value',
|
value: "value",
|
||||||
children: 'children'
|
children: "children",
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
const emit = defineEmits(["update:modelValue", "change", "clear"]);
|
const emit = defineEmits(["update:modelValue", "change", "clear"]);
|
||||||
|
|
||||||
@ -126,7 +151,10 @@ function getMaxFloor(treeData: any) {
|
|||||||
if (floor > max) {
|
if (floor > max) {
|
||||||
max = floor;
|
max = floor;
|
||||||
}
|
}
|
||||||
if (e[props.replaceFields.children] && e[props.replaceFields.children].length > 0) {
|
if (
|
||||||
|
e[props.replaceFields.children] &&
|
||||||
|
e[props.replaceFields.children].length > 0
|
||||||
|
) {
|
||||||
each(e[props.replaceFields.children], floor + 1);
|
each(e[props.replaceFields.children], floor + 1);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -144,11 +172,15 @@ function findData(orginData: any, level: number) {
|
|||||||
label: element[props.replaceFields.label],
|
label: element[props.replaceFields.label],
|
||||||
slot: element.slot || false,
|
slot: element.slot || false,
|
||||||
children: element[props.replaceFields.children] ?? false,
|
children: element[props.replaceFields.children] ?? false,
|
||||||
orginData: element
|
orginData: element,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (level !== 1 && element[props.replaceFields.children] && element[props.replaceFields.children].length > 0) {
|
if (
|
||||||
|
level !== 1 &&
|
||||||
|
element[props.replaceFields.children] &&
|
||||||
|
element[props.replaceFields.children].length > 0
|
||||||
|
) {
|
||||||
findData(element[props.replaceFields.children], level - 1);
|
findData(element[props.replaceFields.children], level - 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -181,23 +213,31 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
extractData(treeData.value, data, 0);
|
extractData(treeData.value, data, 0);
|
||||||
let fullLable = data.map((e: any) => { return e.label; }).join(` ${props.decollator} `);
|
let fullLable = data
|
||||||
|
.map((e: any) => {
|
||||||
|
return e.label;
|
||||||
|
})
|
||||||
|
.join(` ${props.decollator} `);
|
||||||
if (!props.onlyLastLevel) {
|
if (!props.onlyLastLevel) {
|
||||||
displayValue.value = fullLable
|
displayValue.value = fullLable;
|
||||||
} else {
|
} else {
|
||||||
let _data = data.map((e: any) => {
|
let _data = data.map((e: any) => {
|
||||||
return e.label;
|
return e.label;
|
||||||
});
|
});
|
||||||
displayValue.value = _data[_data.length - 1];
|
displayValue.value = _data[_data.length - 1];
|
||||||
}
|
}
|
||||||
let value = data.map((e: any) => { return e.value; }).join(props.decollator);
|
let value = data
|
||||||
|
.map((e: any) => {
|
||||||
|
return e.value;
|
||||||
|
})
|
||||||
|
.join(props.decollator);
|
||||||
emit("update:modelValue", value);
|
emit("update:modelValue", value);
|
||||||
let evt = {
|
let evt = {
|
||||||
display: displayValue.value,
|
display: displayValue.value,
|
||||||
value: value,
|
value: value,
|
||||||
label: fullLable,
|
label: fullLable,
|
||||||
currentClick: JSON.parse(JSON.stringify(item.orginData))
|
currentClick: JSON.parse(JSON.stringify(item.orginData)),
|
||||||
}
|
};
|
||||||
emit("change", evt);
|
emit("change", evt);
|
||||||
if (dropdownRef.value)
|
if (dropdownRef.value)
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
@ -30,7 +30,7 @@ const props = withDefaults(defineProps<LayInputProps>(), {
|
|||||||
readonly: false,
|
readonly: false,
|
||||||
allowClear: false,
|
allowClear: false,
|
||||||
autofocus: false,
|
autofocus: false,
|
||||||
modelValue: '',
|
modelValue: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
interface InputEmits {
|
interface InputEmits {
|
||||||
@ -49,13 +49,19 @@ const slots = useSlots();
|
|||||||
const currentValue = ref<string>(String(props.modelValue));
|
const currentValue = ref<string>(String(props.modelValue));
|
||||||
const hasContent = computed(() => (props.modelValue as string)?.length > 0);
|
const hasContent = computed(() => (props.modelValue as string)?.length > 0);
|
||||||
|
|
||||||
watch(() => props.modelValue, () => {
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
() => {
|
||||||
currentValue.value = String(props.modelValue);
|
currentValue.value = String(props.modelValue);
|
||||||
})
|
}
|
||||||
|
);
|
||||||
|
|
||||||
watch(() => currentValue, () => {
|
watch(
|
||||||
|
() => currentValue,
|
||||||
|
() => {
|
||||||
emit("update:modelValue", currentValue.value);
|
emit("update:modelValue", currentValue.value);
|
||||||
})
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const onInput = function (event: Event) {
|
const onInput = function (event: Event) {
|
||||||
const inputElement = event.target as HTMLInputElement;
|
const inputElement = event.target as HTMLInputElement;
|
||||||
|
@ -16,9 +16,10 @@
|
|||||||
<li>
|
<li>
|
||||||
<h3>1.2.8 <span class="layui-badge-rim">2022-07-08</span></h3>
|
<h3>1.2.8 <span class="layui-badge-rim">2022-07-08</span></h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>[修复] layer 组件 Notify 关闭图标样式问题。 by @SmallWai</li>
|
<li>[优化] cascader 组件 change 回调函数。 by @SmallWai</li>
|
||||||
<li>[优化] cascader 组件 优化change回调参数 by @SmallWai</li>
|
<li>[修复] layer 组件 Notifiy 缺失关闭图标。 by @SmallWai</li>
|
||||||
<li>[新增] cascader 组件 新增replaceFields属性 用于自义定key by @SmallWai</li>
|
<li>[修复] input 组件 modelValue 设置为 zero 不显示的问题。by @Jmysy</li>
|
||||||
|
<li>[新增] cascader 组件 replaceFields属性 用于自义定字段。by @SmallWai</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -372,8 +372,8 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
|
|||||||
// @ts-ignore 删除项的高度
|
// @ts-ignore 删除项的高度
|
||||||
let offsetHeight =
|
let offsetHeight =
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
document.getElementById(layerId)?.firstElementChild?.firstElementChild
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
document.getElementById(layerId)?.firstElementChild?.firstElementChild
|
||||||
?.offsetHeight;
|
?.offsetHeight;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
window.NotifiyQueen = window.NotifiyQueen || [];
|
window.NotifiyQueen = window.NotifiyQueen || [];
|
||||||
|
Loading…
Reference in New Issue
Block a user