theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄(component): 整理 table.vue 代码

Browse Source
This commit is contained in:
就眠儀式 2022-08-25 00:48:30 +08:00
parent 198d513896
commit d6b406ed02
4 changed files with 55 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package/component/src/component/dropdown/TeleportWrapper.vue
View File

@ -4,7 +4,7 @@ export default {
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue' import { onMounted, ref } from "vue";
export interface TeleportWrapperProps { export interface TeleportWrapperProps {
to?: string; to?: string;
@ -12,19 +12,19 @@ export interface TeleportWrapperProps {
} }
const props = withDefaults(defineProps<TeleportWrapperProps>(), { const props = withDefaults(defineProps<TeleportWrapperProps>(), {
to: '', to: "",
disabled: false, disabled: false,
}) });
const target = ref<Element | null>(null) const target = ref<Element | null>(null);
onMounted(() => { onMounted(() => {
if (!props.to) return; if (!props.to) return;
const el = document.querySelector(props.to) const el = document.querySelector(props.to);
if (el) { if (el) {
target.value = el target.value = el;
} }
}) });
</script> </script>
<template> <template>
<Teleport :to="target" :disabled="!target || disabled"> <Teleport :to="target" :disabled="!target || disabled">

7
package/component/src/component/dropdown/index.vue
View File

@ -30,7 +30,7 @@ import {
ElementScrollRect, ElementScrollRect,
DropdownContext, DropdownContext,
} from "./interface"; } from "./interface";
import TeleportWrapper from './TeleportWrapper.vue'; import TeleportWrapper from "./TeleportWrapper.vue";
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu"; export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
@ -78,7 +78,10 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
}); });
const childrenRefs = new Set<Ref<HTMLElement>>(); const childrenRefs = new Set<Ref<HTMLElement>>();
const dropdownCtx = inject<DropdownContext | undefined>(dropdownInjectionKey, undefined); const dropdownCtx = inject<DropdownContext | undefined>(
dropdownInjectionKey,
undefined
);
const dropdownRef = shallowRef<HTMLElement | undefined>(); const dropdownRef = shallowRef<HTMLElement | undefined>();
const contentRef = shallowRef<HTMLElement | undefined>(); const contentRef = shallowRef<HTMLElement | undefined>();
const contentStyle = ref<CSSProperties>({}); const contentStyle = ref<CSSProperties>({});

16
package/component/src/component/table/TablePage.vue
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: "TablePage" name: "TablePage",
} };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
@ -31,10 +31,10 @@ const props = withDefaults(defineProps<LayTablePageProps>(), {
const emit = defineEmits(["update:modelValue", "update:limit", "change"]); const emit = defineEmits(["update:modelValue", "update:limit", "change"]);
const change = (pageData: any) => { const change = (pageData: any) => {
emit('change', pageData) emit("change", pageData);
emit('update:modelValue', pageData.current); emit("update:modelValue", pageData.current);
emit('update:limit', pageData.limit); emit("update:limit", pageData.limit);
} };
</script> </script>
<template> <template>
@ -50,7 +50,8 @@ const change = (pageData: any) => {
:pages="pages" :pages="pages"
v-model:modelValue="modelValue" v-model:modelValue="modelValue"
v-model:limit="limit" v-model:limit="limit"
@change="change"> @change="change"
>
<template #prev> <template #prev>
<lay-icon type="layui-icon-left" /> <lay-icon type="layui-icon-left" />
</template> </template>
@ -58,5 +59,4 @@ const change = (pageData: any) => {
<lay-icon type="layui-icon-right" /> <lay-icon type="layui-icon-right" />
</template> </template>
</lay-page> </lay-page>
</template> </template>

2
package/component/src/component/table/index.vue
View File

@ -22,7 +22,6 @@ import { Recordable } from "../../types";
import { LayIcon } from "@layui/icons-vue"; import { LayIcon } from "@layui/icons-vue";
import LayCheckbox from "../checkbox/index.vue"; import LayCheckbox from "../checkbox/index.vue";
import LayDropdown from "../dropdown/index.vue"; import LayDropdown from "../dropdown/index.vue";
import LayPage from "../page/index.vue";
import LayEmpty from "../empty/index.vue"; import LayEmpty from "../empty/index.vue";
import TableRow from "./TableRow.vue"; import TableRow from "./TableRow.vue";
import TablePage from "./TablePage.vue"; import TablePage from "./TablePage.vue";
@ -619,7 +618,6 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
{{ page }}
<div :id="tableId"> <div :id="tableId">
<table class="layui-hide" lay-filter="test"></table> <table class="layui-hide" lay-filter="test"></table>
<div class="layui-form layui-border-box layui-table-view" :class="classes"> <div class="layui-form layui-border-box layui-table-view" :class="classes">