mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: PureTableBar
组件添加全屏和退出全屏功能
This commit is contained in:
parent
6d7e92fed1
commit
91ae63a8c5
@ -18,6 +18,8 @@ import {
|
|||||||
getKeyList
|
getKeyList
|
||||||
} from "@pureadmin/utils";
|
} from "@pureadmin/utils";
|
||||||
|
|
||||||
|
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||||
|
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||||
import DragIcon from "@/assets/table-bar/drag.svg?component";
|
import DragIcon from "@/assets/table-bar/drag.svg?component";
|
||||||
import ExpandIcon from "@/assets/table-bar/expand.svg?component";
|
import ExpandIcon from "@/assets/table-bar/expand.svg?component";
|
||||||
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
|
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
|
||||||
@ -57,6 +59,7 @@ export default defineComponent({
|
|||||||
const size = ref("default");
|
const size = ref("default");
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const checkAll = ref(true);
|
const checkAll = ref(true);
|
||||||
|
const isFullscreen = ref(false);
|
||||||
const isIndeterminate = ref(false);
|
const isIndeterminate = ref(false);
|
||||||
const instance = getCurrentInstance()!;
|
const instance = getCurrentInstance()!;
|
||||||
const isExpandAll = ref(props.isExpandAll);
|
const isExpandAll = ref(props.isExpandAll);
|
||||||
@ -244,7 +247,18 @@ export default defineComponent({
|
|||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<>
|
<>
|
||||||
<div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
|
<div
|
||||||
|
{...attrs}
|
||||||
|
class={[
|
||||||
|
"w-[99/100]",
|
||||||
|
"px-2",
|
||||||
|
"pb-2",
|
||||||
|
"bg-bg_color",
|
||||||
|
isFullscreen.value
|
||||||
|
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
|
||||||
|
: "mt-2"
|
||||||
|
]}
|
||||||
|
>
|
||||||
<div class="flex justify-between w-full h-[60px] p-4">
|
<div class="flex justify-between w-full h-[60px] p-4">
|
||||||
{slots?.title ? (
|
{slots?.title ? (
|
||||||
slots.title()
|
slots.title()
|
||||||
@ -358,6 +372,14 @@ export default defineComponent({
|
|||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
|
||||||
|
<iconifyIconOffline
|
||||||
|
class={["w-[16px]", iconClass.value]}
|
||||||
|
icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
|
||||||
|
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
|
||||||
|
onClick={() => (isFullscreen.value = !isFullscreen.value)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{slots.default({
|
{slots.default({
|
||||||
|
Loading…
x
Reference in New Issue
Block a user