diff --git a/.gitee/ISSUE_TEMPLATE.zh-CN.md b/.gitee/ISSUE_TEMPLATE.zh-CN.md index 6dbae868..47595f9b 100644 --- a/.gitee/ISSUE_TEMPLATE.zh-CN.md +++ b/.gitee/ISSUE_TEMPLATE.zh-CN.md @@ -6,6 +6,8 @@ - 3.合理的建议 +- 4.当前版本 + ## 思路 描述大概的解决思路，可以包含 API 设计和伪代码等 diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index db58e436..47595f9b 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,15 +1,17 @@ -## background +## 背景 -- 1.Describe the problem you want to solve +- 1.描述你希望解决的问题 -- 2.State the status of the problem +- 2.陈述问题的现状 -- 3.Reasonable suggestion +- 3.合理的建议 -## train of thought +- 4.当前版本 -Idea describes the general solution idea, including API design, pseudo code, etc +## 思路 -## follow-up +描述大概的解决思路，可以包含 API 设计和伪代码等 -For subsequent editing, attach the corresponding pull request address in the form of ` - [] some task '. \ No newline at end of file +## 跟进 + +后续编辑，附上对应的 Pull Request 地址，可以用 `- [ ] some task` 的方式。 \ No newline at end of file diff --git a/README.md b/README.md index 5c332a9c..7a8be3ad 100644 --- a/README.md +++ b/README.md @@ -11,8 +11,6 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库. -QQ 群 ：[➀ 336720831](https://jq.qq.com/?_wv=1027&k=oQA1SC80) - **Run with code Sandbox.** [![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/11mvy) diff --git a/README.zh.md b/README.zh.md index 6dd0d569..2ce2f4d6 100644 --- a/README.zh.md +++ b/README.zh.md @@ -10,8 +10,6 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库. -QQ 群 ：[➀ 336720831](https://jq.qq.com/?_wv=1027&k=oQA1SC80) - **Run with code Sandbox.** [![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/11mvy) diff --git a/package/component/package.json b/package/component/package.json index 68305349..420aa54a 100644 --- a/package/component/package.json +++ b/package/component/package.json @@ -1,6 +1,6 @@ { "name": "@layui/layui-vue", - "version": "1.4.0-alpha.1", + "version": "1.4.5", "author": "就眠儀式", "license": "MIT", "description": "a component library for Vue 3 base on layui-vue", diff --git a/package/component/src/component/card/index.less b/package/component/src/component/card/index.less index bb7cf356..f2cb0b7a 100644 --- a/package/component/src/component/card/index.less +++ b/package/component/src/component/card/index.less @@ -16,6 +16,14 @@ font-size: 14px; } +.layui-card .layui-card-footer { + height: 42px; + line-height: 42px; + padding: 0 15px; + border-top: 1px solid #f6f6f6; + font-size: 14px; +} + .layui-card .layui-card-header .layui-card-header-extra { float: right; } diff --git a/package/component/src/component/card/index.vue b/package/component/src/component/card/index.vue index 6bcb89c0..4deb4c49 100644 --- a/package/component/src/component/card/index.vue +++ b/package/component/src/component/card/index.vue @@ -44,5 +44,8 @@ const classes = computed(() => { +
+ +
diff --git a/package/component/src/component/datePicker/index.vue b/package/component/src/component/datePicker/index.vue index d61040b1..a41bc471 100644 --- a/package/component/src/component/datePicker/index.vue +++ b/package/component/src/component/datePicker/index.vue @@ -12,10 +12,11 @@ (), { @@ -142,6 +145,8 @@ const props = withDefaults(defineProps(), { readonly: false, allowClear: false, size: "md", + prefixIcon: "layui-icon-date", + suffixIcon: "", }); const dropdownRef = ref(null); @@ -293,22 +298,29 @@ watch( props.range && props.modelValue ? (props.modelValue as string[])[0] || "" : (props.modelValue as string); - hms.value.hh = dayjs(initModelValue).hour(); - hms.value.mm = dayjs(initModelValue).minute(); - hms.value.ss = dayjs(initModelValue).second(); + + hms.value.hh = isNaN(dayjs(initModelValue).hour()) + ? 0 + : dayjs(initModelValue).hour(); + hms.value.mm = isNaN(dayjs(initModelValue).minute()) + ? 0 + : dayjs(initModelValue).minute(); + hms.value.ss = isNaN(dayjs(initModelValue).second()) + ? 0 + : dayjs(initModelValue).second(); + if (initModelValue.length === 8 && props.type === "time") { - //dayjs 解析时间容错 let modelValue = initModelValue; modelValue = "1970-01-01 " + modelValue; hms.value.hh = dayjs(modelValue).hour(); hms.value.mm = dayjs(modelValue).minute(); hms.value.ss = dayjs(modelValue).second(); } + currentYear.value = initModelValue ? getYear(initModelValue) : -1; currentMonth.value = initModelValue ? getMonth(initModelValue) : -1; currentDay.value = initModelValue ? getDay(initModelValue) : -1; if (props.type === "date" || props.type === "datetime") { - // date与datetime容错 if (currentYear.value === -1) currentYear.value = dayjs().year(); if (currentMonth.value === -1) currentMonth.value = dayjs().month(); } diff --git a/package/component/src/component/dropdown/TeleportWrapper.vue b/package/component/src/component/dropdown/TeleportWrapper.vue new file mode 100644 index 00000000..fbfcd3f1 --- /dev/null +++ b/package/component/src/component/dropdown/TeleportWrapper.vue @@ -0,0 +1,33 @@ + + + diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue index 7fe8217f..d0674164 100644 --- a/package/component/src/component/dropdown/index.vue +++ b/package/component/src/component/dropdown/index.vue @@ -6,7 +6,7 @@ export default { diff --git a/package/component/src/component/dropdown/interface.ts b/package/component/src/component/dropdown/interface.ts index 03ee6bf2..43c5d803 100644 --- a/package/component/src/component/dropdown/interface.ts +++ b/package/component/src/component/dropdown/interface.ts @@ -31,6 +31,7 @@ export interface DropdownContext { onMouseleave: Function; addChildRef: Function; removeChildRef: Function; + hide: Function; } export const dropdownInjectionKey = Symbol("dropdownInjectKey"); diff --git a/package/component/src/component/dropdownMenuItem/index.vue b/package/component/src/component/dropdownMenuItem/index.vue index 3487253b..a1501dbe 100644 --- a/package/component/src/component/dropdownMenuItem/index.vue +++ b/package/component/src/component/dropdownMenuItem/index.vue @@ -6,6 +6,7 @@ export default { diff --git a/package/component/src/component/input/index.less b/package/component/src/component/input/index.less index f9fcb198..0399ca86 100644 --- a/package/component/src/component/input/index.less +++ b/package/component/src/component/input/index.less @@ -71,8 +71,10 @@ border-color: #d2d2d2 !important; } +.layui-input-clear, .layui-input-prefix, -.layui-input-suffix { +.layui-input-suffix, +.layui-input-password { background-color: white; } @@ -90,8 +92,8 @@ padding: 0 15px; } -.layui-input-password, -.layui-input-clear { +.layui-input-clear, +.layui-input-password { flex: none; display: flex; align-items: center; @@ -103,6 +105,10 @@ line-height: 1.3; } +.layui-input input::-ms-reveal { + display: none; +} + .layui-input{ &[size="lg"] { .set-size(@input-lg); diff --git a/package/component/src/component/menu/index.vue b/package/component/src/component/menu/index.vue index 30e75618..748c1bc3 100644 --- a/package/component/src/component/menu/index.vue +++ b/package/component/src/component/menu/index.vue @@ -50,7 +50,7 @@ const menuTheme = computed(() => props.theme); const openKeys = computed({ get() { - return props.openKeys; + return props.collapse ? [] : props.openKeys; }, set(val) { emit("update:openKeys", val); @@ -77,8 +77,7 @@ watch( } else { openKeys.value = oldOpenKeys.value; } - }, - { immediate: true } + } ); provideLevel(1); diff --git a/package/component/src/component/page/index.vue b/package/component/src/component/page/index.vue index 0effa485..1f9a684d 100644 --- a/package/component/src/component/page/index.vue +++ b/package/component/src/component/page/index.vue @@ -41,29 +41,29 @@ const props = withDefaults(defineProps(), { const { t } = useI18n(); const slots = useSlots(); +const maxPage = ref(0); const limits = ref(props.limits); const pages = Math.floor(props.pages / 2); +const currentPage: Ref = ref(props.modelValue); +const currentPageShow: Ref = ref(currentPage.value); +const inlimit = ref(props.limit); -const inlimit = computed({ - get() { - return props.limit; - }, - set(v: number) { - emit("limit", v); - }, -}); - -const maxPage = ref(0); +watch( + () => props.limit, + () => { + inlimit.value = props.limit; + } +); const totalPage = computed(() => { - maxPage.value = Math.ceil(props.total / props.limit); - let r: number[] = [], - start = - maxPage.value <= props.pages - ? 1 - : currentPage.value > pages - ? currentPage.value - pages - : 1; + maxPage.value = Math.ceil(props.total / inlimit.value); + let r: number[] = []; + let start = + maxPage.value <= props.pages + ? 1 + : currentPage.value > pages + ? currentPage.value - pages + : 1; for (let i = start; ; i++) { if (r.length >= props.pages || i > maxPage.value) { break; @@ -73,51 +73,59 @@ const totalPage = computed(() => { return r; }); -const currentPage: Ref = ref(props.modelValue); -const currentPageShow: Ref = ref(currentPage.value); +const emit = defineEmits(["update:modelValue", "update:limit", "change"]); -const emit = defineEmits(["jump", "limit", "update:modelValue"]); - -const prev = function () { +const prev = () => { if (currentPage.value === 1) { return; } currentPage.value--; + emit("change", { current: currentPage.value, limit: inlimit.value }); }; -const next = function () { - if (currentPage.value === maxPage.value) { +const next = () => { + if (currentPage.value === maxPage.value || maxPage.value === 0) { return; } currentPage.value++; + emit("change", { current: currentPage.value, limit: inlimit.value }); }; -const jump = function (page: number) { +const jump = (page: number) => { currentPage.value = page; + emit("change", { current: currentPage.value, limit: inlimit.value }); }; -const jumpPage = function () { +const jumpPage = () => { currentPage.value = currentPageShow.value; + emit("change", { current: currentPage.value, limit: inlimit.value }); }; -watch(inlimit, function () { +const changelimit = () => { currentPage.value = 1; + emit("change", { current: currentPage.value, limit: inlimit.value }); +}; + +const refresh = () => { + emit("change", { current: currentPage.value, limit: inlimit.value }); +}; + +watch(inlimit, () => { + emit("update:limit", inlimit.value); }); -watch(currentPage, function () { - if (currentPage.value > totalPage.value[totalPage.value.length - 1]) { - currentPage.value = totalPage.value[totalPage.value.length - 1]; - } - if (currentPage.value < totalPage.value[0]) { - currentPage.value = totalPage.value[0]; - } +watch(currentPage, () => { + const min = totalPage.value[0]; + const max = totalPage.value[totalPage.value.length - 1]; + if (currentPage.value > max) currentPage.value = max; + if (currentPage.value < min) currentPage.value = min; currentPageShow.value = currentPage.value; - emit("jump", { current: currentPage.value }); emit("update:modelValue", currentPage.value); }); + watch( () => props.modelValue, - function () { + () => { currentPage.value = props.modelValue; currentPageShow.value = currentPage.value; } @@ -159,13 +167,14 @@ watch( > - @@ -173,13 +182,18 @@ watch( - - + @@ -194,7 +208,7 @@ watch( type="button" class="layui-laypage-btn" @click="jumpPage()" - :disabled="currentPageShow > maxPage" + :disabled="currentPageShow > maxPage || currentPageShow == currentPage" > 确定 diff --git a/package/component/src/component/quote/index.vue b/package/component/src/component/quote/index.vue index e6741925..033c4dc9 100644 --- a/package/component/src/component/quote/index.vue +++ b/package/component/src/component/quote/index.vue @@ -15,10 +15,7 @@ const props = defineProps(); diff --git a/package/component/src/component/scroll/index.vue b/package/component/src/component/scroll/index.vue index 80510989..858d4cb4 100644 --- a/package/component/src/component/scroll/index.vue +++ b/package/component/src/component/scroll/index.vue @@ -56,8 +56,8 @@ const props = withDefaults(defineProps(), { const emit = defineEmits(["arrive"]); -const scrollRef = ref(null); -const barRef = ref(null); +const scrollRef = ref(); +const barRef = ref(); const data = reactive({ translateY: 0, // 滚动块平移的距离 @@ -66,38 +66,33 @@ const data = reactive({ winWidth: document.body.clientWidth, //初始化浏览器页面宽度 }); -let time = null; // 定时器 +let time: NodeJS.Timeout; // 定时器 let isMove = false; // 判断鼠标是否点击滑块（为松开） let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置 let trackHeight = 0; // 滚动条轨道高度 let wrapHeight = 0; // 容器高度（可视高度） let wrapContentHeight = 0; // 内容高度（可滚动内容的高度） -// 页面挂载后计算滚动条 onMounted(() => { - monitorWindow(); //监听窗口尺寸 - monitorScrollBar(); //监听内容元素尺寸 + monitorWindow(); + monitorScrollBar(); nextTick(() => { - //dom渲染后 - calculationLength(); //初始化延迟更新滚动条 + calculationLength(); }); }); // 页面卸载清除定时器 onUnmounted(() => { window.clearInterval(time); - time = null; }); // 监听页面尺寸改变计算滚动条 const monitorWindow = function () { - let time; //定时器，防抖，窗口持续变化，延迟更新滚动条 + let time: NodeJS.Timeout; window.addEventListener("resize", () => { - data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条 + data.winWidth = document.body.clientWidth; clearTimeout(time); time = setTimeout(() => { - //页面宽度变化继续监听，如果小于500就关闭自定义滚动条 - // console.log("浏览器窗口变化更新滚动条"); initScrollListner(); }, 500); }); @@ -105,24 +100,23 @@ const monitorWindow = function () { //监听内容元素尺寸变化 const monitorScrollBar = function () { - var monitorUl = scrollRef.value.children[0]; - // var monitorDiv= document; // 监听document + // @ts-ignore + var monitorUl = scrollRef.value; let MutationObserver = window.MutationObserver || // @ts-ignore window.WebKitMutationObserver || // @ts-ignore window.MozMutationObserver; - let observer = new MutationObserver(function (mutations) { - // console.log("内容元素变化更新滚动条"); + let observer = new MutationObserver((mutations) => { initScrollListner(); }); - - // 监听子节点增加或者内容撑起的尺寸 - observer.observe(monitorUl, { - attributes: true, - childList: true, - }); + if (monitorUl) { + observer.observe(monitorUl, { + attributes: true, + childList: true, + }); + } }; // 初始化延迟监听滚动条 @@ -137,7 +131,6 @@ const calculationLength = function () { // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响 setTimeout(() => { window.clearInterval(time); - time = null; }, 2000); }; @@ -146,11 +139,10 @@ const initScrollListner = function () { let scroll = scrollRef.value; let bar = barRef.value; // scroll有时候拿不到元素，要判断一下 - if (scroll) { + if (scroll && bar) { wrapContentHeight = scroll.scrollHeight; wrapHeight = scroll.clientHeight; trackHeight = bar.clientHeight; - // console.log(wrapContentHeight ,wrapHeight); // 容器高度 / 内容高度 100 150 data.heightPre = wrapHeight / wrapContentHeight; // 滑动块的高度 根据 容器和内容的比 乘以 滚动轨道 计算出 滑动块的高度 @@ -159,11 +151,7 @@ const initScrollListner = function () { }; // 内容滚动时，计算滑块移动的距离 -const onMosewheel = function (e) { - // scrollTop页面顶部滚出的高度 - // offsetHeight页面可视区域高度 - // scrollHeight页面正文全文高度 - // data.translateY滚动块平移的距离 +const onMosewheel = (e: any) => { data.translateY = e.target.scrollTop * data.heightPre; if (data.translateY == 0) { // 到达顶部 @@ -178,12 +166,12 @@ const onMosewheel = function (e) { }; // 到达顶部或者底部通知父级元素 -const arrive = function name(tb) { +const arrive = (tb: string) => { emit("arrive", tb); }; // 鼠标点击滑块时 -const moveStart = function (e) { +const moveStart = (e: any) => { isMove = true; // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置 // data.translateY 滚动块平移的距离 @@ -194,7 +182,7 @@ const moveStart = function (e) { }; // 鼠标移动，改变thumb的位置以及容器scrollTop的位置 -const moveTo = function () { +const moveTo = () => { document.onmousemove = (e) => { // 移动时候判断是不是松开，松开就不在执行滑块移动操作 if (isMove) { @@ -203,14 +191,16 @@ const moveTo = function () { // 滑块到达 底部 就不在改变滑块translateY值 data.translateY = trackHeight - data.barHeight; } else if (e.clientY - moveClientY < 0) { - // 滑块到达 顶部 就不在改变滑块translateY值 + // 滑块到达 顶部 就不在改变滑块 translateY 值 data.translateY = 0; } else { //改变滑块位置 data.translateY = e.clientY - moveClientY; } // 计算出内容盒子滚出顶部的距离 - scrollRef.value.scrollTop = data.translateY / data.heightPre; + if (scrollRef.value) { + scrollRef.value.scrollTop = data.translateY / data.heightPre; + } } }; }; diff --git a/package/component/src/component/space/Renderer.ts b/package/component/src/component/space/Renderer.ts new file mode 100644 index 00000000..6650b5ef --- /dev/null +++ b/package/component/src/component/space/Renderer.ts @@ -0,0 +1,26 @@ +import { defineComponent } from "vue"; + +import type { PropType } from "vue"; + +export default defineComponent({ + name: "Renderer", + props: { + renderFn: { + type: Function, + default: null, + }, + data: { + type: Object as PropType>, + default: undefined, + }, + }, + setup(props) { + return () => { + if (typeof props.renderFn !== "function") { + return null; + } + + return props.renderFn(props.data); + }; + }, +}); diff --git a/package/component/src/component/space/index.less b/package/component/src/component/space/index.less new file mode 100644 index 00000000..be74cff7 --- /dev/null +++ b/package/component/src/component/space/index.less @@ -0,0 +1,42 @@ +.layui-space { + display: inline-flex; + + &-horizontal { + .layui-space-item { + display: flex; + align-items: center; + } + } + + &-vertical { + flex-direction: column; + } + + &-wrap { + flex-wrap: wrap; + } + + &-fill { + display: flex; + } + + &-align-start { + align-items: flex-start; + } + + &-align-center { + align-items: center; + } + + &-align-end { + align-items: flex-end; + } + + &-align-baseline { + align-items: baseline; + } + + &-item { + width: inherit; + } +} \ No newline at end of file diff --git a/package/component/src/component/space/index.ts b/package/component/src/component/space/index.ts new file mode 100644 index 00000000..bc751ebc --- /dev/null +++ b/package/component/src/component/space/index.ts @@ -0,0 +1,5 @@ +import { withInstall, WithInstallType } from "../../utils"; +import Component from "./index.vue"; + +const component: WithInstallType = withInstall(Component); +export default component; diff --git a/package/component/src/component/space/index.vue b/package/component/src/component/space/index.vue new file mode 100644 index 00000000..7dca0373 --- /dev/null +++ b/package/component/src/component/space/index.vue @@ -0,0 +1,132 @@ + + + diff --git a/package/component/src/component/tab/index.less b/package/component/src/component/tab/index.less index b96561f0..dc5b93f4 100644 --- a/package/component/src/component/tab/index.less +++ b/package/component/src/component/tab/index.less @@ -1,4 +1,5 @@ .layui-tab { + display: flex; margin: 10px 0; text-align: left !important; } @@ -7,14 +8,20 @@ overflow: hidden; } +.layui-tab.is-left { + flex-direction: row; +} + .layui-tab.is-right { - display: flex; flex-direction: row-reverse; justify-content: space-between } +.layui-tab.is-top { + flex-direction: column; +} + .layui-tab.is-bottom { - display: flex; flex-direction: column-reverse } @@ -316,6 +323,7 @@ .layui-tab-content { padding: 15px 0; + flex: 1; } .layui-tab.is-right>.layui-tab-content, diff --git a/package/component/src/component/table/TablePage.vue b/package/component/src/component/table/TablePage.vue new file mode 100644 index 00000000..972efd01 --- /dev/null +++ b/package/component/src/component/table/TablePage.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/package/component/src/component/table/TableRow.vue b/package/component/src/component/table/TableRow.vue index eb6f83d4..f694ea35 100644 --- a/package/component/src/component/table/TableRow.vue +++ b/package/component/src/component/table/TableRow.vue @@ -39,6 +39,7 @@ export interface LayTableRowProps { } const slot = useSlots(); + const emit = defineEmits([ "row", "row-double", @@ -183,7 +184,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => { props.columns[i].fixed == "left" && props.tableColumnKeys.includes(props.columns[i].key) ) { - left = left + props.columns[i]?.width.replace("px", ""); + left = left + props.columns[i]?.width?.replace("px", ""); } } return { left: `${left}px` } as StyleValue; @@ -195,7 +196,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => { props.columns[i].fixed == "right" && props.tableColumnKeys.includes(props.columns[i].key) ) { - right = right + props.columns[i]?.width.replace("px", ""); + right = right + props.columns[i]?.width?.replace("px", ""); } } return { right: `${right}px` } as StyleValue; diff --git a/package/component/src/component/table/index.less b/package/component/src/component/table/index.less index 149f6b6a..3e7c1064 100644 --- a/package/component/src/component/table/index.less +++ b/package/component/src/component/table/index.less @@ -1,6 +1,8 @@ @import "../checkbox/index.less"; +@import "../radio/index.less"; @import "../dropdown/index.less"; @import "../page/index.less"; + .layui-table-col-special { width: 34px; } @@ -17,6 +19,13 @@ font-weight: 400; } +.layui-table-footer { + min-height: 50px; + line-height: 30px; + background-color: #FAFAFA; + padding: 10px 15px; +} + .layui-table-mend, .layui-table-tool, .layui-table-total, diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue index 2197e196..1549174d 100644 --- a/package/component/src/component/table/index.vue +++ b/package/component/src/component/table/index.vue @@ -15,15 +15,16 @@ import { StyleValue, WritableComputedRef, computed, + onBeforeUnmount, } from "vue"; import { v4 as uuidv4 } from "../../utils/guidUtil"; import { Recordable } from "../../types"; import { LayIcon } from "@layui/icons-vue"; import LayCheckbox from "../checkbox/index.vue"; import LayDropdown from "../dropdown/index.vue"; -import LayPage from "../page/index.vue"; import LayEmpty from "../empty/index.vue"; import TableRow from "./TableRow.vue"; +import TablePage from "./TablePage.vue"; import { nextTick } from "vue"; export interface LayTableProps { @@ -92,6 +93,7 @@ const emit = defineEmits([ const slot = useSlots(); const slots = slot.default && slot.default(); +const s = ""; const allChecked = ref(false); const hasChecked = ref(false); const tableDataSource = ref([...props.dataSource]); @@ -209,6 +211,10 @@ const findFinalNode = (level: number, columns: any[]) => { if (!tableHeadColumns.value[level]) { tableHeadColumns.value[level] = []; } + // 如果列固定，并且 width 不存在, 设置默认值 + if (column.fixed && !column.width) { + column.type ? (column.width = "50px") : (column.width = "100px"); + } tableHeadColumns.value[level].push(column); findFinalNode(level + 1, column.children); } else { @@ -217,6 +223,10 @@ const findFinalNode = (level: number, columns: any[]) => { if (!tableHeadColumns.value[level]) { tableHeadColumns.value[level] = []; } + // 如果列固定，并且 width 不存在, 设置默认值 + if (column.fixed && !column.width) { + column.type ? (column.width = "50px") : (column.width = "100px"); + } tableHeadColumns.value[level].push(column); } }); @@ -256,6 +266,8 @@ watch( () => props.dataSource, () => { tableDataSource.value = [...props.dataSource]; + tableSelectedKeys.value = []; + tableSelectedKey.value = s; nextTick(() => { getScrollWidth(); }); @@ -264,17 +276,15 @@ watch( ); const changeAll = (isChecked: boolean) => { - // Selected if (isChecked) { const datasources = props.dataSource.filter((item: any, index: number) => { - return !props.getCheckboxProps(item, index).disabled; + return !props.getCheckboxProps(item, index)?.disabled; }); const ids = datasources.map((item) => { return item[props.id]; }); tableSelectedKeys.value = [...ids]; } else { - // unSelected tableSelectedKeys.value = []; } }; @@ -317,11 +327,12 @@ const rowDoubleClick = function (data: any, evt: MouseEvent) { emit("row-double", data, evt); }; -const rowContextmenu = function (data: any, evt: MouseEvent) { +const rowContextmenu = (data: any, evt: MouseEvent) => { emit("row-contextmenu", data, evt); }; -const print = function () { +// 页面打印 +const print = () => { let subOutputRankPrint = document.getElementById(tableId) as HTMLElement; let newContent = subOutputRankPrint.innerHTML; let oldContent = document.body.innerHTML; @@ -331,9 +342,7 @@ const print = function () { document.body.innerHTML = oldContent; }; -/** - * excel 导出 - */ +// 报表导出 const exportData = () => { var tableStr = ``; for (let tableHeadColumn of tableHeadColumns.value) { @@ -381,11 +390,12 @@ const exportData = () => { return; }; -//输出base64编码 +// BASE64编码 function base64(s: string) { return window.btoa(unescape(encodeURIComponent(s))); } +// 列排序 const sortTable = (e: any, key: string, sort: string) => { let currentSort = e.target.parentNode.getAttribute("lay-sort"); if (sort === "desc") { @@ -437,6 +447,15 @@ const classes = computed(() => { ]; }); +watch( + () => [props.height, props.maxHeight, props.dataSource], + () => { + nextTick(() => { + getScrollWidth(); + }); + } +); + onMounted(() => { getScrollWidth(); getFixedColumn(); @@ -504,7 +523,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => { props.columns[i].fixed == "left" && tableColumnKeys.value.includes(props.columns[i].key) ) { - left = left + props.columns[i]?.width.replace("px", ""); + left = left + props.columns[i]?.width?.replace("px", ""); } } return { left: `${left}px` } as StyleValue; @@ -516,7 +535,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => { props.columns[i].fixed == "right" && tableColumnKeys.value.includes(props.columns[i].key) ) { - right = right + props.columns[i]?.width.replace("px", ""); + right = right + props.columns[i]?.width?.replace("px", ""); } } return { right: `${right}px` } as StyleValue; @@ -592,6 +611,10 @@ const renderTotalRowCell = (column: any) => { } } }; + +onBeforeUnmount(() => { + window.onresize = null; +}); +
+ +
- - - - +
diff --git a/package/component/src/component/textarea/index.vue b/package/component/src/component/textarea/index.vue index 4a6bae90..be879e7a 100644 --- a/package/component/src/component/textarea/index.vue +++ b/package/component/src/component/textarea/index.vue @@ -5,6 +5,7 @@ export default { diff --git a/package/component/src/index.ts b/package/component/src/index.ts index 879eb0e6..e482667b 100644 --- a/package/component/src/index.ts +++ b/package/component/src/index.ts @@ -61,7 +61,6 @@ import LayDropdownSubMenu from "./component/dropdownSubMenu/index"; import LayTab from "./component/tab/index"; import LayTabItem from "./component/tabItem/index"; import LayTree from "./component/tree/index"; -import LayTreeSelect from "./component/treeSelect/index"; import LayTable from "./component/table/index"; import LayPage from "./component/page/index"; import LayTransfer from "./component/transfer/index"; @@ -89,8 +88,7 @@ import LayNoticeBar from "./component/noticeBar/index"; import LayPageHeader from "./component/pageHeader/index"; import LayCascader from "./component/cascader/index"; import LayAffix from "./component/affix/index"; -import LayTag from "./component/tag/index"; -import LayTagInput from "./component/tagInput/index"; +import LaySpace from "./component/space/index"; import LayConfigProvider from "./provider"; import { InstallOptions } from "./types"; @@ -149,7 +147,6 @@ const components: Record = { LayTabItem, LayIconPicker, LayTree, - LayTreeSelect, LayTable, LayPage, LayTransfer, @@ -178,8 +175,7 @@ const components: Record = { LayPageHeader, LayCascader, LayAffix, - LayTag, - LayTagInput, + LaySpace, }; const install = (app: App, options?: InstallOptions): void => { @@ -245,7 +241,6 @@ export { LayTabItem, LayIconPicker, LayTree, - LayTreeSelect, LayTable, LayPage, LayTransfer, @@ -274,8 +269,7 @@ export { LayPageHeader, LayCascader, LayAffix, - LayTag, - LayTagInput, + LaySpace, install, }; diff --git a/package/document-component/src/document/zh-CN/components/card.md b/package/document-component/src/document/zh-CN/components/card.md index f69632b2..609bf698 100644 --- a/package/document-component/src/document/zh-CN/components/card.md +++ b/package/document-component/src/document/zh-CN/components/card.md @@ -55,6 +55,9 @@ export default { + @@ -213,12 +216,13 @@ export default { ::: table -| 插槽 | 描述 | 可选值 | -| ------- | -------- | ------ | -| default | 默认插槽 | -- | -| header | 头部插槽 | -- | -| body | 内容插槽 | -- | -| extra | 扩展插槽 | -- | +| 插槽 | 描述 | 可选值 | 版本 | +| ------- | -------- | ------ |------ | +| default | 默认插槽 | -- |-- | +| header | 头部插槽 | -- |-- | +| body | 内容插槽 | -- |-- | +| extra | 扩展插槽 | -- |-- | +| footer | 扩展插槽 | -- |`1.4.3`| ::: ::: contributor card diff --git a/package/document-component/src/document/zh-CN/components/datePicker.md b/package/document-component/src/document/zh-CN/components/datePicker.md index b3e806dc..ae2eb0c2 100644 --- a/package/document-component/src/document/zh-CN/components/datePicker.md +++ b/package/document-component/src/document/zh-CN/components/datePicker.md @@ -49,7 +49,7 @@ import { ref } from 'vue' export default { setup() { - const endTime2 = ref("2022-06-04 17:35:00"); + const endTime2 = ref(""); return { endTime2 @@ -254,15 +254,17 @@ const rangeTime3 = ref(['2022-01-01','2023-02-1']); ::: table -| 属性 | 描述 | 类型 | 默认值 | 可选值 | -| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- | -| v-model | 当前时间 | `string` | -- | — | -| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` `yearmonth` | -| disabled | 是否禁止修改 | `boolean` | false | — | -| simple | 一次性选择，无需点击确认按钮 | `boolean` | false | — | -| readonly | 只读 | `boolean` | false | — | -| allowClear | 允许清空 | `boolean` | true | — | -| size | 尺寸 | `string` | `lg` `md` `sm` `xs` | `md` | +| 属性 | 描述 | 类型 | 默认值 | 可选值 | 版本 | +| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |-------------- | +| v-model | 当前时间 | `string` | -- | -- | -- | +| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` `yearmonth` | -- | +| disabled | 是否禁止修改 | `boolean` | false | — | — | +| simple | 一次性选择，无需点击确认按钮 | `boolean` | false | -- | -- | +| readonly | 只读 | `boolean` | false | -- | -- | +| allowClear | 允许清空 | `boolean` | true | -- | -- | +| size | 尺寸 | `string` | `lg` `md` `sm` `xs` | `md` | -- | +| prefix-icon | 前置图标 | `string` | `layui-icon-date` | 内置图标集 | `1.4.0` | +| suffix-icon | 后置图标 | `string` | -- | 内置图标集 | `1.4.0` | ::: diff --git a/package/document-component/src/document/zh-CN/components/dropdown.md b/package/document-component/src/document/zh-CN/components/dropdown.md index c3a35089..86f84f08 100644 --- a/package/document-component/src/document/zh-CN/components/dropdown.md +++ b/package/document-component/src/document/zh-CN/components/dropdown.md @@ -120,7 +120,7 @@ export default { ::: demo