mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +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