diff --git a/src/components/RayTable/src/components/TableScreenfull/index.scss b/src/components/RayTable/src/components/TableScreenfull/index.scss new file mode 100644 index 00000000..140e4402 --- /dev/null +++ b/src/components/RayTable/src/components/TableScreenfull/index.scss @@ -0,0 +1,20 @@ +@keyframes scaleScreenfull { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.3); + } + 100% { + transform: scale(1); + } +} + +.tay-table-icon__screenfull { + transition: transform 0.3s var(--r-bezier); + + &:hover { + animation: scaleScreenfull 0.3s linear; + animation-direction: alternate; + } +} diff --git a/src/components/RayTable/src/components/TableScreenfull/index.tsx b/src/components/RayTable/src/components/TableScreenfull/index.tsx index 086e3c6b..e8d55abe 100644 --- a/src/components/RayTable/src/components/TableScreenfull/index.tsx +++ b/src/components/RayTable/src/components/TableScreenfull/index.tsx @@ -9,6 +9,8 @@ * @remark 今天也是元气满满撸代码的一天 */ +import './index.scss' + import { NPopover } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' @@ -51,7 +53,7 @@ const TableScreenfull = defineComponent({ ), diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RayTable/src/components/TableSetting/index.tsx index 14e64ab5..5e72c9a7 100644 --- a/src/components/RayTable/src/components/TableSetting/index.tsx +++ b/src/components/RayTable/src/components/TableSetting/index.tsx @@ -9,11 +9,19 @@ * @remark 今天也是元气满满撸代码的一天 */ +/** + * + * 依赖 table columns 属性操作 + * + * 支持拖拽修改列顺序、动态修改列宽度、固定(锁列) + */ + import './index.scss' import { NCard, NPopover, NEllipsis } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' import VueDraggable from 'vuedraggable' + import { setupSettingOptions } from './hook' import { useSetting } from '@/store' @@ -28,17 +36,19 @@ const TableSetting = defineComponent({ name: 'TableSetting', emits: ['columnsUpdate'], setup(_, { emit }) { - const settingStore = useSetting() const tableSettingProvider = inject( 'tableSettingProvider', {} as TableSettingProvider, ) + const settingStore = useSetting() + const settingOptions = ref( setupSettingOptions(tableSettingProvider.modelColumns.value), ) // 表格表头 const disableDraggable = ref(true) // 拖拽开关(暂时弃用) const { themeValue } = storeToRefs(settingStore) + /** 拖拽结束后 */ const handleDraggableEnd = () => { emit('columnsUpdate', settingOptions.value) } @@ -99,7 +109,7 @@ const TableSetting = defineComponent({ * * @param idx 索引 * - * @remark 动态设置列宽度 + * @remark 动态设置列宽度, 如果表格并未出现横向滚动条则不会启用拖拽修改列按钮 */ const handleResizeColumnClick = (idx: number) => { const value = settingOptions.value[idx] diff --git a/src/components/RayTable/src/index.scss b/src/components/RayTable/src/index.scss index 945f5490..7f0ffc75 100644 --- a/src/components/RayTable/src/index.scss +++ b/src/components/RayTable/src/index.scss @@ -12,7 +12,7 @@ & .ray-table-header-extra__space { display: flex; - gap: 0 1px; + gap: 0 12px; align-items: center; } } diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx index c34203ee..ef3880e0 100644 --- a/src/components/RayTable/src/index.tsx +++ b/src/components/RayTable/src/index.tsx @@ -26,6 +26,14 @@ * 基于 `xlsx.js` 实现输出 `excel` */ +/** + * + * 为什么有些拓展功能是写在该组件内, 有些则是完全抽离出去呢... + * 好问题, 因为我一开始没想到而且我又想偷懒 + * + * 凑合凑合看吧, 等我啥时候有空再抽离出去 + */ + import './index.scss' import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui' @@ -49,8 +57,8 @@ const RayTable = defineComponent({ props: props, emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'], setup(props, { emit }) { - const tableUUID = uuid() - const rayTableUUID = uuid() + const tableUUID = uuid() // 表格 id, 用于打印表格 + const rayTableUUID = uuid() // RayTable id, 用于全屏表格 const modelRightClickMenu = computed(() => props.rightClickMenu) const modelColumns = computed({ get: () => props.columns, @@ -73,10 +81,7 @@ const RayTable = defineComponent({ }) const tableSize = ref(props.size) - /** - * - * 右键菜单注入 - */ + /** 注入相关属性 */ provide('tableSettingProvider', { modelRightClickMenu, modelColumns, @@ -84,6 +89,7 @@ const RayTable = defineComponent({ rayTableUUID, }) + /** 拖拽更新后的表格列 */ const handleColumnsUpdate = (arr: ActionOptions[]) => { modelColumns.value = arr } @@ -182,6 +188,7 @@ const RayTable = defineComponent({ print(options) } + /** 更新后的表格尺寸 */ const handleChangeTableSize = (size: ComponentSize) => { tableSize.value = size } @@ -252,7 +259,6 @@ const RayTable = defineComponent({ negativeText={this.printNegativeText} onPositive={this.handlePrintPositive.bind(this)} /> - {/* 输出为Excel表格 */} - {/* 表格尺寸调整 */} - {/* 全屏表格 */} - {/* 表格列操作 */}