Merge branch 'v1.7.0' of https://gitee.com/layui/layui-vue into v1.7.0
This commit is contained in:
commit
379a852aee
@ -16,13 +16,13 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
|
||||
|
||||
## 反馈
|
||||
|
||||
欢迎在 [提交问题](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想贡献，请查看 [快速指南](./CONTRIBUTING.md)！
|
||||
欢迎在 [Gitee Issues](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想参与贡献，请查看 [快速指南](./CONTRIBUTING.md)！
|
||||
|
||||
如果您有什么想聊的，请随时加入我们的 [Gitter chat](https://gitter.im/layui-vue/community)！
|
||||
|
||||
## 贡献者
|
||||
|
||||
这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些 [出色的贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
|
||||
这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些出色的 [贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
|
||||
|
||||
<a href="https://github.com/layui/layui-vue/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=layui/layui-vue" />
|
||||
|
||||
@ -16,13 +16,13 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
|
||||
|
||||
## 反馈
|
||||
|
||||
欢迎在 [提交问题](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想贡献，请查看 [快速指南](./CONTRIBUTING.md)！
|
||||
欢迎在 [Gitee Issues](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想参与贡献，请查看 [快速指南](./CONTRIBUTING.md)！
|
||||
|
||||
如果您有什么想聊的，请随时加入我们的 [Gitter chat](https://gitter.im/layui-vue/community)！
|
||||
|
||||
## 贡献者
|
||||
|
||||
这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些 [出色的贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
|
||||
这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些出色的 [贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
|
||||
|
||||
<a href="https://github.com/layui/layui-vue/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=layui/layui-vue" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.7.7",
|
||||
"version": "1.7.11",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -31,7 +31,9 @@
|
||||
:size="size"
|
||||
@clear="onClear"
|
||||
></lay-input>
|
||||
<slot v-else></slot>
|
||||
<div class="slot-area" v-else>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<template #content>
|
||||
<div class="layui-cascader-panel">
|
||||
@ -137,12 +139,19 @@ watch(
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
if (props.modelValue === null || props.modelValue === "") {
|
||||
onClear();
|
||||
if (watchModelValue.value) {
|
||||
if (props.modelValue === null || props.modelValue === "") {
|
||||
onClear();
|
||||
} else {
|
||||
updateDisplayByModelValue();
|
||||
}
|
||||
setTimeout(() => {
|
||||
watchModelValue.value = true;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const watchModelValue = ref(true);
|
||||
const treeData = ref<any>([]);
|
||||
const initTreeData = () => {
|
||||
let treeLvNum = getMaxFloor(props.options);
|
||||
@ -159,31 +168,28 @@ const initTreeData = () => {
|
||||
};
|
||||
}
|
||||
}
|
||||
updateDisplayByModelValue();
|
||||
};
|
||||
|
||||
function updateDisplayByModelValue() {
|
||||
if (props.modelValue) {
|
||||
try {
|
||||
let valueData = props.modelValue.split(props.decollator);
|
||||
let data: any[] = [];
|
||||
for (let index = 0; index < treeData.value.length; index++) {
|
||||
const element = treeData.value[index];
|
||||
const nowValue = valueData[index];
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const ele = element[i];
|
||||
if (nowValue === ele.value) {
|
||||
data.push(ele);
|
||||
element.selectIndex = i;
|
||||
}
|
||||
for (let index = 0; index < valueData.length; index++) {
|
||||
const element = valueData[index];
|
||||
let selectIndex = treeData.value[index].data.findIndex(
|
||||
(e: { value: string }) => e.value === element
|
||||
);
|
||||
if (selectIndex == -1) {
|
||||
break;
|
||||
}
|
||||
selectBar(treeData.value[index].data[selectIndex], selectIndex, index);
|
||||
}
|
||||
displayValue.value = data
|
||||
.map((e) => {
|
||||
return e.label;
|
||||
})
|
||||
.join(` ${props.decollator} `);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getMaxFloor(treeData: any) {
|
||||
//let floor = 0;
|
||||
@ -274,6 +280,7 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
|
||||
return e.value;
|
||||
})
|
||||
.join(props.decollator);
|
||||
watchModelValue.value = false;
|
||||
emit("update:modelValue", value);
|
||||
let evt = {
|
||||
display: displayValue.value,
|
||||
|
||||
@ -79,7 +79,9 @@
|
||||
width: 29px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--global-neutral-color-6);
|
||||
border-top: 1px solid var(--global-neutral-color-6);
|
||||
border-bottom: 1px solid var(--global-neutral-color-6);
|
||||
border-right: 1px solid var(--global-neutral-color-6);
|
||||
border-radius: 0 2px 2px 0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
|
||||
@ -20,7 +20,6 @@ import {
|
||||
cloneVNode,
|
||||
useAttrs,
|
||||
StyleValue,
|
||||
PropType,
|
||||
} from "vue";
|
||||
import {
|
||||
computed,
|
||||
@ -45,9 +44,8 @@ import {
|
||||
DropdownContext,
|
||||
} from "./interface";
|
||||
import TeleportWrapper from "../_components/teleportWrapper.vue";
|
||||
import { useFirstElement, isScrollElement, getScrollElements } from "./util";
|
||||
import RenderFunction, { RenderFunc } from "../_components/renderFunction";
|
||||
import { transformPlacement } from "./util";
|
||||
import { useFirstElement, getScrollElements, transformPlacement } from "./util";
|
||||
import RenderFunction from "../_components/renderFunction";
|
||||
|
||||
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
|
||||
|
||||
@ -105,7 +103,6 @@ const dropdownCtx = inject<DropdownContext | undefined>(
|
||||
undefined
|
||||
);
|
||||
const { children, firstElement: dropdownRef } = useFirstElement();
|
||||
//const dropdownRef = shallowRef<HTMLElement | undefined>();
|
||||
const contentRef = shallowRef<HTMLElement | undefined>();
|
||||
const contentStyle = ref<CSSProperties>({});
|
||||
const { width: windowWidth, height: windowHeight } = useWindowSize();
|
||||
|
||||
@ -1,27 +1,12 @@
|
||||
import { DropdownPlacement } from "./interface";
|
||||
|
||||
import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
|
||||
import { isArrayChildren, isComponent, isElement } from "../../utils";
|
||||
|
||||
export interface SlotChildren {
|
||||
value?: VNode[];
|
||||
}
|
||||
|
||||
// Quoted from arco-vue
|
||||
// https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/vue-utils.ts
|
||||
export enum ShapeFlags {
|
||||
ELEMENT = 1,
|
||||
FUNCTIONAL_COMPONENT = 1 << 1,
|
||||
STATEFUL_COMPONENT = 1 << 2,
|
||||
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
|
||||
TEXT_CHILDREN = 1 << 3,
|
||||
ARRAY_CHILDREN = 1 << 4,
|
||||
SLOTS_CHILDREN = 1 << 5,
|
||||
TELEPORT = 1 << 6,
|
||||
SUSPENSE = 1 << 7,
|
||||
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
|
||||
COMPONENT_KEPT_ALIVE = 1 << 9,
|
||||
}
|
||||
|
||||
export const isScrollElement = (element: HTMLElement) => {
|
||||
return (
|
||||
element.scrollHeight > element.offsetHeight ||
|
||||
@ -41,24 +26,6 @@ export const getScrollElements = (container: HTMLElement | undefined) => {
|
||||
return scrollElements;
|
||||
};
|
||||
|
||||
export const isElement = (vn: VNode) => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
|
||||
};
|
||||
|
||||
export const isComponent = (
|
||||
vn: VNode,
|
||||
type?: VNodeTypes
|
||||
): type is Component => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
|
||||
};
|
||||
|
||||
export const isArrayChildren = (
|
||||
vn: VNode,
|
||||
children: VNode["children"]
|
||||
): children is VNode[] => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
|
||||
};
|
||||
|
||||
export const getChildrenArray = (vn: VNode): VNode[] | undefined => {
|
||||
if (isArrayChildren(vn, vn.children)) {
|
||||
return vn.children;
|
||||
@ -140,6 +107,5 @@ export const transformPlacement = (
|
||||
placementMap[separated[1]] || separated[1]
|
||||
}` as DropdownPlacement;
|
||||
}
|
||||
|
||||
return placement;
|
||||
};
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
|
||||
@ -151,6 +152,15 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-icon-picker-clear {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.layui-icon-picker-clear:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.layui-colorpicker-disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@ -158,4 +168,8 @@
|
||||
.layui-colorpicker-disabled,
|
||||
.layui-colorpicker-disabled * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.transform{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@ -17,6 +17,7 @@ export interface IconPickerProps {
|
||||
modelValue?: string;
|
||||
disabled?: boolean;
|
||||
showSearch?: boolean;
|
||||
allowClear?: boolean;
|
||||
contentClass?: string | Array<string | object> | object;
|
||||
contentStyle?: StyleValue;
|
||||
}
|
||||
@ -30,6 +31,7 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const selectedIcon = computed(() => props.modelValue);
|
||||
const dropdownRef = ref<any>(null);
|
||||
const openState = ref<boolean>(false);
|
||||
|
||||
const selectIcon = function (icon: string): void {
|
||||
emit("update:modelValue", icon);
|
||||
@ -37,6 +39,14 @@ const selectIcon = function (icon: string): void {
|
||||
dropdownRef.value?.hide();
|
||||
};
|
||||
|
||||
const onClear = function (): void {
|
||||
emit("update:modelValue", "");
|
||||
};
|
||||
|
||||
const hasContent = computed(() => {
|
||||
return props.modelValue != null && props.modelValue != "";
|
||||
});
|
||||
|
||||
const icones: Ref = ref([]);
|
||||
const total: Ref<number> = ref(icons.length);
|
||||
const totalPage: Ref<number> = ref(total.value / 12);
|
||||
@ -143,6 +153,8 @@ const searchList = (str: string, container: any) => {
|
||||
:disabled="disabled"
|
||||
:contentClass="contentClass"
|
||||
:contentStyle="contentStyle"
|
||||
@hide="openState = false"
|
||||
@show="openState = true"
|
||||
updateAtScroll
|
||||
>
|
||||
<div
|
||||
@ -152,8 +164,17 @@ const searchList = (str: string, container: any) => {
|
||||
<div class="layui-inline layui-iconpicker-main">
|
||||
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
||||
</div>
|
||||
<span
|
||||
class="layui-icon-picker-clear"
|
||||
v-if="allowClear && hasContent && !disabled"
|
||||
>
|
||||
<lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
|
||||
</span>
|
||||
<span class="layui-inline layui-iconpicker-suffix"
|
||||
><i class="layui-icon layui-icon-down layui-anim"></i
|
||||
><i
|
||||
class="layui-icon layui-icon-down"
|
||||
:class="[openState ? 'transform' : '']"
|
||||
></i
|
||||
></span>
|
||||
</div>
|
||||
<template #content>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="lay-page-header">
|
||||
<div class="lay-page-header__left" @click="emits('back')">
|
||||
<slot name="backIcon"
|
||||
<slot :name="backIconSlotName"
|
||||
><i class="layui-icon" :class="[backIcon]"></i
|
||||
></slot>
|
||||
<div class="lay-page-header__title">{{ backText }}</div>
|
||||
@ -19,7 +19,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { useSlots } from "vue";
|
||||
import { convertSlotName } from "../../utils";
|
||||
import { getCurrentInstance, useSlots } from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface PageHeaderProps {
|
||||
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
|
||||
});
|
||||
|
||||
const emits = defineEmits(["back"]);
|
||||
|
||||
const slots = useSlots();
|
||||
const instance = getCurrentInstance()!;
|
||||
const backIconSlotName = convertSlotName(instance, "backIcon");
|
||||
</script>
|
||||
|
||||
@ -18,6 +18,7 @@ import {
|
||||
watch,
|
||||
onUnmounted,
|
||||
StyleValue,
|
||||
Fragment,
|
||||
} from "vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
@ -25,12 +26,14 @@ import LayTagInput from "../tagInput/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import LaySelectOption, { SelectOptionProps } from "../selectOption/index.vue";
|
||||
import { SelectSize } from "./interface";
|
||||
import { isArrayChildren } from "../../utils";
|
||||
|
||||
export interface SelectProps {
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
searchMethod?: Function;
|
||||
modelValue?: any;
|
||||
multiple?: boolean;
|
||||
items?: SelectOptionProps[];
|
||||
@ -73,15 +76,13 @@ var timer: any;
|
||||
|
||||
const getOption = (nodes: VNode[], newOptions: any[]) => {
|
||||
nodes?.map((item) => {
|
||||
let component = item.type as Component;
|
||||
if (item.type.toString() == "Symbol(Fragment)") {
|
||||
if (isArrayChildren(item, item.children)) {
|
||||
getOption(item.children as VNode[], newOptions);
|
||||
} else {
|
||||
if (component.name == LaySelectOption.name) {
|
||||
if ((item.type as Component).name == LaySelectOption.name) {
|
||||
if (item.children) {
|
||||
// @ts-ignore
|
||||
const label = item.children.default()[0].children;
|
||||
|
||||
if (typeof label == "string") {
|
||||
// @ts-ignore
|
||||
item.props.label = label;
|
||||
@ -122,7 +123,6 @@ const onCompositionend = (event: Event) => {
|
||||
onMounted(() => {
|
||||
intOption();
|
||||
timer = setInterval(intOption, 500);
|
||||
|
||||
watch(
|
||||
[selectedValue, options],
|
||||
() => {
|
||||
@ -178,11 +178,17 @@ const handleClear = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleHide = () => {
|
||||
searchValue.value = "";
|
||||
openState.value = false;
|
||||
};
|
||||
|
||||
provide("selectRef", selectRef);
|
||||
provide("openState", openState);
|
||||
provide("selectedValue", selectedValue);
|
||||
provide("searchValue", searchValue);
|
||||
provide("multiple", multiple);
|
||||
provide("searchMethod", props.searchMethod);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -194,22 +200,27 @@ provide("multiple", multiple);
|
||||
:contentStyle="contentStyle"
|
||||
:update-at-scroll="true"
|
||||
:autoFitWidth="true"
|
||||
@hide="openState = false"
|
||||
@hide="handleHide"
|
||||
@show="openState = true"
|
||||
>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="multipleValue"
|
||||
v-model:input-value="searchValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:collapseTagsTooltip="collapseTagsTooltip"
|
||||
:minCollapsedNum="minCollapsedNum"
|
||||
:disabledInput="true"
|
||||
:disabled="disabled"
|
||||
:disabledInput="!showSearch"
|
||||
:size="size"
|
||||
:class="{ 'layui-unselect': true }"
|
||||
@remove="handleRemove"
|
||||
@clear="handleClear"
|
||||
@input-value-change="handleSearch"
|
||||
@keyup.delete.capture.prevent.stop
|
||||
@keyup.backspace.capture.prevent.stop
|
||||
@keydown.enter.capture.prevent.stop
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
@ -220,13 +231,13 @@ provide("multiple", multiple);
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
:modelValue="singleValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="!showSearch"
|
||||
:disabled="disabled"
|
||||
:class="{ 'layui-unselect': !showSearch }"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:readonly="!showSearch"
|
||||
:modelValue="singleValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:class="{ 'layui-unselect': !showSearch }"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
@Input="handleSearch"
|
||||
@ -241,17 +252,6 @@ provide("multiple", multiple);
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<dl class="layui-select-content">
|
||||
<div class="layui-select-search" v-if="multiple && showSearch">
|
||||
<lay-input
|
||||
:modelValue="searchValue"
|
||||
:placeholder="searchPlaceholder"
|
||||
@Input="handleSearch"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
prefix-icon="layui-icon-search"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
</div>
|
||||
<template v-if="items">
|
||||
<lay-select-option
|
||||
v-for="(item, index) in items"
|
||||
|
||||
@ -30,6 +30,7 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {
|
||||
|
||||
const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
|
||||
const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>;
|
||||
const searchMethod: Function = inject("searchMethod") as Function;
|
||||
const selectedValue: WritableComputedRef<any> = inject(
|
||||
"selectedValue"
|
||||
) as WritableComputedRef<any>;
|
||||
@ -59,7 +60,13 @@ const selected = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const first = ref(true);
|
||||
|
||||
const display = computed(() => {
|
||||
if (searchMethod && !first.value) {
|
||||
return searchMethod(searchValue.value, props);
|
||||
}
|
||||
first.value = false;
|
||||
return (
|
||||
props.keyword?.toString().indexOf(searchValue.value) > -1 ||
|
||||
props.label?.toString().indexOf(searchValue.value) > -1
|
||||
|
||||
@ -97,8 +97,6 @@
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-tab-title.is-right {
|
||||
border-left: 1px solid var(--global-neutral-color-3);
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ import {
|
||||
} from "vue";
|
||||
import { useResizeObserver } from "@vueuse/core";
|
||||
import { TabData, TabInjectKey, TabPosition } from "./interface";
|
||||
import { isArrayChildren } from "../../utils";
|
||||
|
||||
export interface TabProps {
|
||||
type?: string;
|
||||
@ -41,16 +42,15 @@ export interface TabProps {
|
||||
}
|
||||
|
||||
const slot = useSlots();
|
||||
const childrens: Ref<VNode[]> = ref([]);
|
||||
const tabMap = reactive(new Map<number, TabData>());
|
||||
const childrens: Ref<VNode[]> = ref([]);
|
||||
|
||||
const setItemInstanceBySlot = function (nodes: VNode[]) {
|
||||
nodes?.map((item) => {
|
||||
let component = item.type as Component;
|
||||
if (item.type.toString() == "Symbol(Fragment)") {
|
||||
if (isArrayChildren(item, item.children)) {
|
||||
setItemInstanceBySlot(item.children as VNode[]);
|
||||
} else {
|
||||
if (component.name == tabItem.name) {
|
||||
if ((item.type as Component).name == tabItem.name) {
|
||||
childrens.value.push(item);
|
||||
}
|
||||
}
|
||||
@ -265,6 +265,24 @@ const update = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const horizontalScroll = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
const navSize = getNavSize();
|
||||
const containerSize = navRef.value![`offset${sizeName.value}`];
|
||||
const currentOffset = navOffset.value;
|
||||
const scrollNextSize = scrollNextRef.value?.[`offset${sizeName.value}`] ?? 0;
|
||||
const direction =
|
||||
Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
|
||||
const distance = 50 * (direction > 0 ? 1 : -1);
|
||||
const newOffset = Math.max(currentOffset + distance, 0);
|
||||
if (
|
||||
navSize - currentOffset <= containerSize - scrollNextSize &&
|
||||
direction > 0
|
||||
)
|
||||
return;
|
||||
navOffset.value = newOffset;
|
||||
};
|
||||
|
||||
const renderTabIcon = (attrs: Record<string, unknown>) => {
|
||||
const tab = attrs.tabData as TabData;
|
||||
if (typeof tab.icon === "function") {
|
||||
@ -293,7 +311,7 @@ useResizeObserver(navRef, update);
|
||||
|
||||
watch(
|
||||
tabMap,
|
||||
function () {
|
||||
() => {
|
||||
childrens.value = [];
|
||||
setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
|
||||
},
|
||||
@ -335,6 +353,7 @@ provide("active", active);
|
||||
>
|
||||
<ul
|
||||
ref="navRef"
|
||||
@wheel="horizontalScroll"
|
||||
:class="[
|
||||
'layui-tab-title',
|
||||
props.tabPosition ? `is-${tabPosition}` : '',
|
||||
|
||||
@ -486,51 +486,58 @@ const radioProps = props.getRadioProps(props.data, props.index);
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
<div
|
||||
style="display: flex"
|
||||
:style="[
|
||||
{ textAlign: column.align, justifyContent: column.align },
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
<template #content>
|
||||
<lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</template>
|
||||
</lay-tooltip>
|
||||
<slot
|
||||
v-else
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
<template #content>
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</template>
|
||||
</lay-tooltip>
|
||||
<slot
|
||||
v-else
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
@ -558,39 +565,47 @@ const radioProps = props.getRadioProps(props.data, props.index);
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
:isAutoShow="true"
|
||||
<div
|
||||
style="display: flex"
|
||||
:style="[
|
||||
{ textAlign: column.align, justifyContent: column.align },
|
||||
]"
|
||||
>
|
||||
{{ data[column.key] }}
|
||||
</lay-tooltip>
|
||||
<span v-else> {{ data[column.key] }} </span>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
:isAutoShow="true"
|
||||
>
|
||||
{{ data[column.key] }}
|
||||
</lay-tooltip>
|
||||
|
||||
<span v-else> {{ data[column.key] }} </span>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -44,12 +44,11 @@
|
||||
|
||||
.layui-table-mend,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-patch,
|
||||
.layui-table-click,
|
||||
.layui-table-hover,
|
||||
.layui-table-header,
|
||||
.layui-table-total tr,
|
||||
.layui-table-total td,
|
||||
.layui-table thead tr,
|
||||
.layui-table tbody tr:hover td,
|
||||
.layui-table.layui-table-even tr:nth-child(even) td {
|
||||
@ -305,6 +304,11 @@
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.layui-table-tool-self {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layui-table-col-set {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@ -32,7 +32,7 @@ export interface TableProps {
|
||||
page?: Recordable;
|
||||
columns: Recordable[];
|
||||
dataSource: Recordable[];
|
||||
defaultToolbar?: boolean | Recordable[];
|
||||
defaultToolbar?: boolean | any[];
|
||||
selectedKey?: string;
|
||||
selectedKeys?: Recordable[];
|
||||
indentSize?: number;
|
||||
@ -60,6 +60,7 @@ const props = withDefaults(defineProps<TableProps>(), {
|
||||
childrenColumnName: "children",
|
||||
dataSource: () => [],
|
||||
selectedKeys: () => [],
|
||||
defaultToolbar: false,
|
||||
selectedKey: "",
|
||||
maxHeight: "auto",
|
||||
even: false,
|
||||
@ -518,9 +519,6 @@ const childrenExpandSpace = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* @remark 排除 hide 列
|
||||
*/
|
||||
const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||
if (column.fixed) {
|
||||
if (column.fixed == "left") {
|
||||
@ -563,6 +561,55 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||
return {} as StyleValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* @remark 排除 hide 列
|
||||
*/
|
||||
const renderHeadFixedStyle = (
|
||||
column: any,
|
||||
columnIndex: number,
|
||||
tableHeadColumn: any[]
|
||||
) => {
|
||||
if (column.fixed) {
|
||||
if (column.fixed == "left") {
|
||||
var left = 0;
|
||||
for (var i = 0; i < columnIndex; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "left" &&
|
||||
tableColumnKeys.value.includes(props.columns[i].key)
|
||||
) {
|
||||
left = left + Number(props.columns[i]?.width?.replace("px", ""));
|
||||
}
|
||||
}
|
||||
return { left: `${left}px` } as StyleValue;
|
||||
} else {
|
||||
var right = 0;
|
||||
for (var i = columnIndex + 1; i < props.columns.length; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "right" &&
|
||||
tableColumnKeys.value.includes(props.columns[i].key)
|
||||
) {
|
||||
right = right + Number(props.columns[i]?.width?.replace("px", ""));
|
||||
}
|
||||
}
|
||||
return { right: `${right}px` } as StyleValue;
|
||||
}
|
||||
} else {
|
||||
var isLast = true;
|
||||
for (var i = columnIndex + 1; i < tableHeadColumn.length; i++) {
|
||||
if (
|
||||
tableHeadColumn[i].fixed == undefined &&
|
||||
tableColumnKeys.value.includes(tableHeadColumn[i].key)
|
||||
) {
|
||||
isLast = false;
|
||||
}
|
||||
}
|
||||
return isLast ? ({ "border-right": "none" } as StyleValue) : {};
|
||||
}
|
||||
return {} as StyleValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* @remark 排除 hide 列
|
||||
*/
|
||||
@ -628,6 +675,19 @@ const totalRowMethod = (column: any, dataSource: any[]) => {
|
||||
return total;
|
||||
};
|
||||
|
||||
const showToolbar = (toolbarName: string) => {
|
||||
if (props.defaultToolbar instanceof Array) {
|
||||
return props.defaultToolbar.includes(toolbarName);
|
||||
}
|
||||
return props.defaultToolbar;
|
||||
};
|
||||
|
||||
const toolbarStyle = (toolbarName: string) => {
|
||||
if (props.defaultToolbar instanceof Array) {
|
||||
return { order: props.defaultToolbar.indexOf(toolbarName) } as StyleValue;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.onresize = null;
|
||||
});
|
||||
@ -642,7 +702,12 @@ onBeforeUnmount(() => {
|
||||
<slot name="toolbar"></slot>
|
||||
</div>
|
||||
<div v-if="defaultToolbar" class="layui-table-tool-self">
|
||||
<lay-dropdown updateAtScroll>
|
||||
<!-- 筛选 -->
|
||||
<lay-dropdown
|
||||
v-if="showToolbar('filter')"
|
||||
updateAtScroll
|
||||
:style="toolbarStyle('filter')"
|
||||
>
|
||||
<div class="layui-inline" title="筛选" lay-event>
|
||||
<i class="layui-icon layui-icon-slider"></i>
|
||||
</div>
|
||||
@ -660,15 +725,28 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<!-- 导出 -->
|
||||
<div
|
||||
v-if="showToolbar('export')"
|
||||
class="layui-inline"
|
||||
title="导出"
|
||||
lay-event
|
||||
:style="toolbarStyle('export')"
|
||||
@click="exportData()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
</div>
|
||||
<div class="layui-inline" title="打印" lay-event @click="print()">
|
||||
|
||||
<!-- 打印 -->
|
||||
<div
|
||||
v-if="showToolbar('print')"
|
||||
:style="toolbarStyle('print')"
|
||||
class="layui-inline"
|
||||
title="打印"
|
||||
lay-event
|
||||
@click="print()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -739,7 +817,11 @@ onBeforeUnmount(() => {
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderHeadFixedStyle(
|
||||
column,
|
||||
columnIndex,
|
||||
tableHeadColumn
|
||||
),
|
||||
]"
|
||||
>
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
|
||||
@ -73,12 +73,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-ellipsis &-text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis
|
||||
& &-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
& &-close-icon {
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
<script lang="ts" setup>
|
||||
import "./index.less";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, nextTick, ref } from "vue";
|
||||
import { TinyColor } from "@ctrl/tinycolor";
|
||||
import { TagShape, TagType, TagVariant } from "./interface";
|
||||
|
||||
@ -49,13 +49,12 @@ const classTag = computed(() => [
|
||||
[`layui-tag-${props.type}`]: props.type,
|
||||
"layui-tag-bordered": props.bordered,
|
||||
"layui-tag-disabled": props.disabled,
|
||||
"layui-tag-ellipsis": props.maxWidth,
|
||||
},
|
||||
]);
|
||||
|
||||
const styleTag = computed(() => [
|
||||
{
|
||||
"max-width": props.maxWidth ?? "unset",
|
||||
"max-width": props.maxWidth ?? "100%",
|
||||
...useTagCustomStyle(props).value,
|
||||
},
|
||||
]);
|
||||
@ -105,10 +104,9 @@ function useTagCustomStyle(props: TagProps) {
|
||||
<span v-if="$slots.icon" class="layui-tag-icon">
|
||||
<slot name="icon" />
|
||||
</span>
|
||||
<span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
|
||||
<span class="layui-tag-text">
|
||||
<slot />
|
||||
</span>
|
||||
<slot v-else />
|
||||
<span
|
||||
v-if="closable"
|
||||
class="layui-tag-close-icon"
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
@ -108,6 +108,9 @@
|
||||
.layui-tag-input-inner-input {
|
||||
height: @@height - (@@inner-padding + @tag-input-boeder)* 2;
|
||||
vertical-align: middle;
|
||||
&:disabled {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-tag-input-inner {
|
||||
|
||||
@ -300,24 +300,22 @@ defineExpose({
|
||||
</template>
|
||||
</LayToopTip>
|
||||
</template>
|
||||
<template v-if="!disabledInput">
|
||||
<input
|
||||
ref="inputRefEl"
|
||||
class="layui-tag-input-inner-input"
|
||||
:style="inputStyle"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:readonly="readonly"
|
||||
@keydown.enter="handleEnter"
|
||||
@keyup="handleBackspaceKeyUp"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
/>
|
||||
</template>
|
||||
<input
|
||||
ref="inputRefEl"
|
||||
class="layui-tag-input-inner-input"
|
||||
:style="inputStyle"
|
||||
:disabled="disabled || disabledInput"
|
||||
:placeholder="placeholder"
|
||||
:readonly="readonly"
|
||||
@keydown.enter="handleEnter"
|
||||
@keyup="handleBackspaceKeyUp"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="allowClear && tagData?.length && !disabled"
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
padding: 6px 10px;
|
||||
resize: vertical;
|
||||
position: relative;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
}
|
||||
|
||||
.layui-textarea-wrapper {
|
||||
|
||||
@ -6,7 +6,8 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { isObject } from "@vueuse/shared";
|
||||
import "./index.less";
|
||||
|
||||
export interface TextareaProps {
|
||||
@ -17,6 +18,7 @@ export interface TextareaProps {
|
||||
showCount?: boolean;
|
||||
allowClear?: boolean;
|
||||
maxlength?: number;
|
||||
autosize?: boolean | { minHeight: number; maxHeight: number };
|
||||
}
|
||||
|
||||
const props = defineProps<TextareaProps>();
|
||||
@ -31,6 +33,7 @@ interface TextareaEmits {
|
||||
}
|
||||
|
||||
const emit = defineEmits<TextareaEmits>();
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null);
|
||||
const composing = ref(false);
|
||||
|
||||
const onInput = function (event: Event) {
|
||||
@ -78,11 +81,31 @@ const wordCount = computed(() => {
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
watch(
|
||||
[() => props.modelValue, textareaRef],
|
||||
() => {
|
||||
if (!textareaRef.value || !props.autosize) return;
|
||||
const height: number = textareaRef.value?.scrollHeight + 2; // 边框
|
||||
if (isObject(props.autosize)) {
|
||||
const { minHeight, maxHeight } = props.autosize;
|
||||
if (height < minHeight || height > maxHeight) return;
|
||||
}
|
||||
textareaRef.value!.style.height = "1px";
|
||||
textareaRef.value!.style.height = `${
|
||||
textareaRef.value?.scrollHeight + 2
|
||||
}px`;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-textarea-wrapper">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
class="layui-textarea"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
|
||||
@ -29,5 +29,7 @@
|
||||
--global-neutral-color-7: #cccccc;
|
||||
|
||||
--global-neutral-color-8: #c2c2c2;
|
||||
|
||||
--darkreader-border--global-primary-color: #0d796f;
|
||||
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
export * from "./domUtil";
|
||||
export * from "./withInstall";
|
||||
export * from "./arrayUtil";
|
||||
export * from "./vueUtil";
|
||||
|
||||
57
package/component/src/utils/vueUtil.ts
Normal file
57
package/component/src/utils/vueUtil.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { Component, ComponentInternalInstance, VNode, VNodeTypes } from "vue";
|
||||
|
||||
export enum ShapeFlags {
|
||||
ELEMENT = 1,
|
||||
FUNCTIONAL_COMPONENT = 1 << 1,
|
||||
STATEFUL_COMPONENT = 1 << 2,
|
||||
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
|
||||
TEXT_CHILDREN = 1 << 3,
|
||||
ARRAY_CHILDREN = 1 << 4,
|
||||
SLOTS_CHILDREN = 1 << 5,
|
||||
TELEPORT = 1 << 6,
|
||||
SUSPENSE = 1 << 7,
|
||||
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
|
||||
COMPONENT_KEPT_ALIVE = 1 << 9,
|
||||
}
|
||||
|
||||
export const isElement = (vn: VNode) => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
|
||||
};
|
||||
|
||||
export const isComponent = (
|
||||
vn: VNode,
|
||||
type?: VNodeTypes
|
||||
): type is Component => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
|
||||
};
|
||||
|
||||
export const isArrayChildren = (
|
||||
vn: VNode,
|
||||
children: VNode["children"]
|
||||
): children is VNode[] => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
|
||||
};
|
||||
|
||||
/**
|
||||
* 同时支持驼峰命名和破折号命名的插槽，示例：back-icon 和 backIcon
|
||||
* @param vm 组件实例
|
||||
* @param name 插槽名
|
||||
*/
|
||||
export function convertSlotName(vm: ComponentInternalInstance, name: string) {
|
||||
const camelCaseName = camelCase(name);
|
||||
const kebabCaseName = kebabCase(name);
|
||||
return vm.slots[camelCaseName]
|
||||
? camelCaseName
|
||||
: vm.slots[kebabCaseName]
|
||||
? kebabCaseName
|
||||
: name;
|
||||
}
|
||||
|
||||
export function camelCase(str: string) {
|
||||
return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ""));
|
||||
}
|
||||
|
||||
export function kebabCase(key: string) {
|
||||
const result = key.replace(/([A-Z])/g, " $1").trim();
|
||||
return result.split(" ").join("-").toLowerCase();
|
||||
}
|
||||
@ -10,7 +10,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 如上是不同的动画类名，点击上述绿色块，可直接预览动画。
|
||||
|
||||
<template>
|
||||
<div class="anim">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-button` 标签, 创建一个按钮
|
||||
::: demo 使用 `lay-button` 标签, 创建一个按钮。
|
||||
|
||||
<template>
|
||||
<lay-button type="primary">原始按钮</lay-button>
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
::: title 简约按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `border` 属性设置边框颜色
|
||||
::: demo 通过 `border` 属性设置边框颜色
|
||||
|
||||
<template>
|
||||
<lay-button>原始按钮</lay-button>
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
::: title 次要按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `border-style` 属性设置边框样式
|
||||
::: demo 通过 `border-style` 属性设置边框样式。
|
||||
|
||||
<template>
|
||||
<lay-button border-style="dashed">原始按钮</lay-button>
|
||||
@ -91,7 +91,7 @@ export default {
|
||||
::: title 按钮尺寸
|
||||
:::
|
||||
|
||||
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
|
||||
::: demo 通过 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`。
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" size="lg">原始按钮</lay-button>
|
||||
@ -119,7 +119,7 @@ export default {
|
||||
::: title 流式按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `fluid` 属性, 使其适合父最大宽度
|
||||
::: demo 通过 `fluid` 属性, 使其适合父级最大宽度。
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" fluid>最大化按钮</lay-button>
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
::: title 圆角按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `radius` 属性，创建圆角按钮
|
||||
::: demo 通过 `radius` 属性，创建圆角按钮。
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" radius>原始按钮</lay-button>
|
||||
@ -173,7 +173,7 @@ export default {
|
||||
::: title 按钮分组
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
|
||||
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组。
|
||||
|
||||
<template>
|
||||
<div>
|
||||
@ -212,7 +212,7 @@ export default {
|
||||
::: title 图标按钮
|
||||
:::
|
||||
|
||||
::: demo 结合 `lay-icon` 组件, 创建图标按钮
|
||||
::: demo 结合 `lay-icon` 组件, 创建图标按钮。
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
@ -239,7 +239,7 @@ export default {
|
||||
::: title 按钮容器
|
||||
:::
|
||||
|
||||
::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
|
||||
::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器。
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
@ -266,7 +266,7 @@ export default {
|
||||
::: title 加载按钮
|
||||
:::
|
||||
|
||||
::: demo 使用 `loading` 属性, 控制按钮的加载状态
|
||||
::: demo 通过 `loading` 属性, 控制按钮的加载状态。
|
||||
|
||||
<template>
|
||||
<lay-button-container>
|
||||
@ -296,7 +296,7 @@ export default {
|
||||
::: title 事件处理
|
||||
:::
|
||||
|
||||
::: demo 使用 `@click` 设置单击回调
|
||||
::: demo 使用 `@click` 设置单击回调。
|
||||
|
||||
<template>
|
||||
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
|
||||
|
||||
@ -336,9 +336,11 @@ const valueLv=ref(null)
|
||||
:::
|
||||
::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值，同时你也可以使用`动态插槽名`来自定义你想要展示的内容，只需要在传入的数据中加入 `slot`参数，然后愉快的使用插槽自定义内容
|
||||
<template>
|
||||
<lay-cascader :options="options" v-model="value2" @change="onChange">
|
||||
<lay-button type="normal">Click me ❤️</lay-button>
|
||||
<lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
|
||||
<lay-cascader :options="options" v-model="value2" @change="onChange" style="width:350px;">
|
||||
<div style='display:flex;align-items:center'>
|
||||
<lay-button type="normal">Click me ❤️</lay-button>
|
||||
<lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
|
||||
</div>
|
||||
</lay-cascader>
|
||||
<lay-cascader :options="options2" v-model="value" placeholder="动态插槽案例" style="width:250px;margin-left:20px">
|
||||
<template #Guide>🤨😐😑😶😏😒🙄😬🤥😌</template>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `color` 属性设置颜色
|
||||
::: demo 使用 `lay-icon` 标签创建一个图标。
|
||||
|
||||
<template>
|
||||
<lay-icon type="layui-icon-face-smile"></lay-icon>
|
||||
|
||||
@ -59,6 +59,32 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 选择清空
|
||||
:::
|
||||
|
||||
::: demo 使用 lay-icon-picker 标签, 创建图标选择器
|
||||
|
||||
<template>
|
||||
<lay-icon-picker v-model="icon" :allow-clear="true"></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
icon
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 开启分页
|
||||
:::
|
||||
|
||||
@ -116,12 +142,13 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| | | | | |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| ---------- | -------- | --- |--- |--- |
|
||||
| v-model | 默认值 | -- |-- |-- |
|
||||
| page | 开启分页 | -- |-- |-- |
|
||||
| showSearch | 启用搜索 | -- |-- |-- |
|
||||
| disabled | 禁用 | `boolean` |-- |-- |
|
||||
| allow-clear | 允许清空 | `boolean` |-- |-- |
|
||||
| contentStyle | 内容自定义样式 | `StyleValue` | -- | -- |
|
||||
| contentClass | 内容自定义Class | `string` `Array<string \| object>` `object` | -- | -- |
|
||||
|
||||
|
||||
@ -4,16 +4,16 @@
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
|
||||
::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-select` 标签, 创建下拉选择框
|
||||
::: demo 使用 `lay-select` 标签, 创建下拉选择框。
|
||||
|
||||
<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="2" label="编码"></lay-select-option>
|
||||
<lay-select-option :value="3" label="运动"></lay-select-option>
|
||||
@ -35,61 +35,17 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 进阶使用
|
||||
:::
|
||||
|
||||
::: demo 根据 v-model 的特性, 通过修改值更改 select 的下拉选项。
|
||||
|
||||
<template>
|
||||
<lay-space>
|
||||
<lay-select v-model="value2">
|
||||
<lay-select-option :value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option :value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option :value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-button @click="change2"> change ：{{value2}} </lay-button>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const value2 = ref(null);
|
||||
var i = 1;
|
||||
function change2(){
|
||||
value2.value=i++%3+1
|
||||
}
|
||||
return {
|
||||
value2,
|
||||
change2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 禁止选择
|
||||
:::
|
||||
|
||||
::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
|
||||
::: demo 通过 `disabled` 属性, 禁用下拉选择。
|
||||
|
||||
<template>
|
||||
<lay-space>
|
||||
<lay-select v-model="value3" :disabled="true" :allow-clear="true">
|
||||
<lay-select v-model="value2" :disabled="true">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-select v-model="value4" :disabled="true" :multiple="true" :allow-clear="true">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -98,11 +54,10 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const value3 = ref('1')
|
||||
const value4 = ref(['1'])
|
||||
const value2 = ref('1')
|
||||
|
||||
return {
|
||||
value3,
|
||||
value4
|
||||
value2
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,21 +68,14 @@ export default {
|
||||
::: title 开启检索
|
||||
:::
|
||||
|
||||
::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
|
||||
::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部, 同时你可以使用 search-method 属性自定义搜索逻辑。
|
||||
|
||||
<template>
|
||||
<lay-space>
|
||||
<lay-select v-model="value3" :show-search="true">
|
||||
<lay-select v-model="value3" :show-search="true">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-select v-model="value4" :show-search="true" :multiple="true">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -137,11 +85,9 @@ export default {
|
||||
setup() {
|
||||
|
||||
const value3 = ref('1')
|
||||
const value4 = ref(['1'])
|
||||
|
||||
return {
|
||||
value3,
|
||||
value4,
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -152,10 +98,10 @@ export default {
|
||||
::: title 传入选项
|
||||
:::
|
||||
|
||||
::: demo 传入 options 数据，如果设置则不需要手动构造 selectOption 节点
|
||||
::: demo 传入 options 数据，如果设置则不需要手动构造 select-option 节点。
|
||||
|
||||
<template>
|
||||
<lay-select v-model="value5" :items="items5"></lay-select>
|
||||
<lay-select v-model="value4" :items="items4"></lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -163,15 +109,17 @@ import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const value5 = ref('1');
|
||||
const items5=ref([
|
||||
const value4 = ref('1');
|
||||
|
||||
const items4=ref([
|
||||
{label:'选项1', value:1},
|
||||
{label:'选项2', value:2},
|
||||
{label:'选项3', value:3, disabled:true},
|
||||
])
|
||||
|
||||
return {
|
||||
items5,
|
||||
value5,
|
||||
items4,
|
||||
value4,
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -185,46 +133,11 @@ export default {
|
||||
::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
|
||||
|
||||
<template>
|
||||
<lay-space>
|
||||
<lay-select v-model="value3" :allow-clear="true">
|
||||
<lay-select v-model="value5" :allow-clear="true">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-select v-model="value4" :allow-clear="true" :multiple="true">
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const value3 = ref('1')
|
||||
const value4 = ref(['1'])
|
||||
return {
|
||||
value3,
|
||||
value4
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 海量数据
|
||||
:::
|
||||
|
||||
::: demo
|
||||
<template>
|
||||
<lay-select v-model="selected2" :multiple="true">
|
||||
<lay-select-option v-for="index of count2" :value="index" :label="index"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -233,31 +146,24 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const count2 = ref(0)
|
||||
const selected2 = ref([1])
|
||||
|
||||
setTimeout(() => {
|
||||
count2.value = 100;
|
||||
}, 2000);
|
||||
const value5 = ref('1')
|
||||
|
||||
return {
|
||||
count2,
|
||||
selected2
|
||||
value5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 多选使用
|
||||
::: title 开启多选
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `multiple` 属性, 开启多选模式。
|
||||
|
||||
<template>
|
||||
<lay-button @click="mvalue=['1','5','7']">点击切换(当前值:{{mvalue.join()}})</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-select v-model="mvalue" @change="change" multiple>
|
||||
<lay-select v-model="value6" multiple>
|
||||
<lay-select-option value="1" label="学习"></lay-select-option>
|
||||
<lay-select-option value="2" label="编码" disabled></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
@ -273,23 +179,20 @@ import { ref,watch } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const mvalue = ref(['1','2']);
|
||||
const change = function(val){
|
||||
console.log(val, mvalue.value)
|
||||
}
|
||||
const value6 = ref(['1','2']);
|
||||
|
||||
return {
|
||||
mvalue,
|
||||
change
|
||||
value6
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title 定制选项
|
||||
::: title 使用插槽
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-select` 标签, 创建下拉选择框
|
||||
::: demo 通过 `default` 插槽, 实现选项的自定义渲染。
|
||||
|
||||
<template>
|
||||
<lay-select v-model="value">
|
||||
@ -314,7 +217,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title Select 属性
|
||||
:::
|
||||
|
||||
@ -328,6 +230,8 @@ export default {
|
||||
| disabled | 是否禁用 | `boolean` | `true` `false` | `false` |
|
||||
| multiple | 是否为多选 | `boolean` | `true` `false` | `false` |
|
||||
| size | 尺寸 | `string` | `lg` `md` `sm` `xs`| `md` |
|
||||
| showSearch | 开启搜索 | `boolean` | -- | -- |
|
||||
| searchMethod | 自定义搜索逻辑 (text, optionProps) | `Function` | -- | -- |
|
||||
| searchPlaceholder | 搜索提示 | `string` | -- | -- |
|
||||
| minCollapsedNum | 多选模式最小折叠数量 | `number` | -- | -- |
|
||||
| collapseTagsTooltip | 多选折叠后时候悬浮展示 | `boolean` | -- | -- |
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
::: demo 使用 `lay-table` 标签, 创建表格
|
||||
|
||||
<template>
|
||||
<lay-table :columns="columns1" :data-source="dataSource1"></lay-table>
|
||||
<lay-table :columns="columns66" :data-source="dataSource1"></lay-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -22,7 +22,7 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const columns1 = [
|
||||
const columns66 = [
|
||||
{
|
||||
title:"账户",
|
||||
width:"200px",
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
]
|
||||
|
||||
return {
|
||||
columns1,
|
||||
columns66,
|
||||
dataSource1
|
||||
}
|
||||
}
|
||||
@ -299,7 +299,7 @@ export default {
|
||||
title:"姓名",
|
||||
width:"200px",
|
||||
key:"name",
|
||||
ellipsisTooltip: true,
|
||||
ellipsisTooltip: true
|
||||
},{
|
||||
title:"成绩",
|
||||
width: "180px",
|
||||
@ -1270,25 +1270,31 @@ export default {
|
||||
title:"名称",
|
||||
width:"200px",
|
||||
key:"username"
|
||||
},{
|
||||
},
|
||||
{
|
||||
title:"地址",
|
||||
children: [
|
||||
{ title: "省", key: "province", width: "300px" },
|
||||
{ title: "市", key: "city", width: "300px" },
|
||||
{ title: "区", key: "area", width: "300px" },
|
||||
]
|
||||
},{
|
||||
title:"性别",
|
||||
key:"sex"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "300px",
|
||||
key:"age"
|
||||
},{
|
||||
},
|
||||
{
|
||||
title:"备注",
|
||||
width: "180px",
|
||||
key:"remark",
|
||||
ellipsisTooltip: true
|
||||
ellipsisTooltip: true,
|
||||
children: [
|
||||
{
|
||||
title:"性别",
|
||||
key:"sex"
|
||||
},{
|
||||
title:"年龄",
|
||||
width: "300px",
|
||||
totalRow:"统计",
|
||||
key:"age"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -1424,7 +1430,7 @@ export default {
|
||||
|
||||
const selectedKeys5 = ref(['1'])
|
||||
const checkbox5 = ref(true)
|
||||
const defaultToolbar5 = ref(true)
|
||||
const defaultToolbar5 = ref(['export','print'])
|
||||
const maxHeight5 = ref('600px');
|
||||
|
||||
const page5 = {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
<template>
|
||||
<lay-space size="md">
|
||||
<lay-tag>标签</lay-tag>
|
||||
<lay-tag maxWidth="100px">标签</lay-tag>
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
|
||||
</lay-space>
|
||||
</template>
|
||||
@ -164,10 +164,11 @@ export default {
|
||||
<template v-for="(tag, index) of tagData" :key="`tag-${index}`">
|
||||
<lay-tag
|
||||
closable
|
||||
maxWidth="100px"
|
||||
@close="handleClose(index)"
|
||||
style="margin-right: 5px;"
|
||||
>
|
||||
{{tag}}
|
||||
{{tag}}
|
||||
</lay-tag>
|
||||
</template>
|
||||
<span id="tagDemo" @click="handlerFocus">
|
||||
@ -195,7 +196,7 @@ import { ref, nextTick } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const tagData = ref(['Tag', 'Selected', 'Tags']);
|
||||
const tagData = ref(['Tag', 'Selected1111111111111111111111111111111', 'Tags']);
|
||||
const inputRef = ref(null);
|
||||
const showInput = ref(false);
|
||||
const inputVal = ref('');
|
||||
|
||||
@ -36,7 +36,7 @@ const changeVisible = () => {
|
||||
::: title 淡入淡出
|
||||
:::
|
||||
|
||||
::: demo 使用 `type` 属性，设置过渡方式。
|
||||
::: demo 通过 `type` 属性，设置你要采用的过渡效果。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1">开始</lay-button>
|
||||
|
||||
@ -46,12 +46,12 @@ export default {
|
||||
::: title 手动上传
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-upload` 标签, 创建一个上传按钮
|
||||
::: demo 通过设置 `auto` 属性为 `false`, 使用 `v-model` 接收选择的文件对象。
|
||||
|
||||
<template>
|
||||
<lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model="file1" field="file" :auto="false">
|
||||
<template #preview>
|
||||
{{ file1 }}
|
||||
{{ file1[0]?.name }}
|
||||
</template>
|
||||
</lay-upload>
|
||||
</template>
|
||||
@ -62,7 +62,7 @@ import { ref,reactive } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const file1 = ref();
|
||||
const file1 = ref([]);
|
||||
|
||||
return {
|
||||
file1
|
||||
|
||||
@ -11,6 +11,65 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="1.7.x">
|
||||
<ul>
|
||||
<a name="1-7-11"></a>
|
||||
<li>
|
||||
<h3>1.7.11 <span class="layui-badge-rim">2022-12-05</span></h3>
|
||||
<ul>
|
||||
<li>[新增] tab 组件鼠标滚动功能, 兼容移动端 touch 事件。</li>
|
||||
<li>[新增] textarea 组件 autosize 属性, 根据内容自适应大小。</li>
|
||||
<li>[新增] icon-picker 组件 allow-clear 属性, 开启清空操作。</li>
|
||||
<li>[修复] button 组件 夜间模式 下, 普通按钮边框高亮与背景色不一致的问题。</li>
|
||||
<li>[修复] cascader 组件 v-model 属性不为空时, 无法正常回显。</li>
|
||||
<li>[修复] select 组件 muilpart 为 true 时候 placeholder 属性无效。</li>
|
||||
<li>[修复] page-header 组件 backIcon 插槽 html 中使用无效。</li>
|
||||
<li>[优化] checkbox 组件 默认主题 下, 勾选框多余的左边框。</li>
|
||||
<li>[优化] icon-picker 组件 下拉 图标, 在打开关闭时赋予不同的状态。</li>
|
||||
<li>[优化] table 组件 .layui-table-total 背景色 fixed 字段不生效的问题。</li>
|
||||
<li>[优化] layer 组件 success 回调执行时机。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-7-10"></a>
|
||||
<li>
|
||||
<h3>1.7.10 <span class="layui-badge-rim">2022-11-30</span></h3>
|
||||
<ul>
|
||||
<li>[修复] select 组件 search-method 属性, 自定义搜索逻辑不生效。</li>
|
||||
<li>[优化] select 组件文档, 简化使用案例。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-7-9"></a>
|
||||
<li>
|
||||
<h3>1.7.9 <span class="layui-badge-rim">2022-11-22</span></h3>
|
||||
<ul>
|
||||
<li>[新增] select 组件 search-method 属性, 允许自定义搜索逻辑。</li>
|
||||
<li>[修复] tag 组件 max-width 属性, 内容超出后 `...` 省略符缺失。</li>
|
||||
<li>[修复] table 组件 column 属性 align 配置失效, 该问题仅存在 1.7.8 版本。</li>
|
||||
<li>[修复] select 组件 build 后, 选中内容无法正确回显。</li>
|
||||
<li>[修复] tab 组件 build 后, tab-item 无法正确显示, 在嵌套 v-for 时。</li>
|
||||
<li>[修复] table 组件 default-toolbar 在配置数组时, 未按顺序渲染。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-7-8"></a>
|
||||
<li>
|
||||
<h3>1.7.8 <span class="layui-badge-rim">2022-11-19</span></h3>
|
||||
<ul>
|
||||
<li>[新增] upload 组件 auto 属性, 是否自动上传配置。</li>
|
||||
<li>[修复] table 组件 ellipsisTooltip 属性不生效。</li>
|
||||
<li>[优化] backtop 组件部分浏览器版本无法正常返回顶部。</li>
|
||||
<li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li>
|
||||
<li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li>
|
||||
<li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li>
|
||||
<li>[优化] table 组件 default-toolbar 属性支持 Array 类型, 举例：['print']。</li>
|
||||
<li>[优化] select 组件 dropdown 关闭时统一清空 search 内容。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="1-7-7"></a>
|
||||
<li>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
>
|
||||
<span
|
||||
>{{ t("home.download") }}：<em class="site-showdowns"
|
||||
>35,223</em
|
||||
>39,044</em
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
@ -43,7 +43,7 @@
|
||||
rel="nofollow"
|
||||
class="site-star"
|
||||
>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">1633</cite>
|
||||
<i class="layui-icon"></i> Star <cite id="getStars">1710</cite>
|
||||
</a>
|
||||
<a
|
||||
href="https://gitee.com/layui-vue"
|
||||
|
||||
@ -337,7 +337,7 @@ watch(
|
||||
props.success();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: true, flush: "post" }
|
||||
);
|
||||
|
||||
watch(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user