@vrx-arco/pro-components/dist/ToggleFullScreen/index.mjs

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { defineComponent, createVNode } from "vue";
import { Button } from "@arco-design/web-vue";
import { useFullscreen } from "@vueuse/core";
import IconFullscreen from "@vrx-arco/icons-vue/IconFullscreen";
import IconFullscreenExit from "@vrx-arco/icons-vue/IconFullscreenExit";
const ToggleFullScreen = /* @__PURE__ */ defineComponent({
  name: "vrx-arco-toggle-full-screen",
  setup: () => {
    const {
      isSupported,
      isFullscreen,
      toggle
    } = useFullscreen();
    return () => createVNode(Button, {
      "shape": "circle",
      "disabled": !isSupported,
      "onClick": () => toggle()
    }, {
      default: () => [isFullscreen.value ? createVNode(IconFullscreenExit, {
        "class": "arco-icon"
      }, null) : createVNode(IconFullscreen, {
        "class": "arco-icon"
      }, null)]
    });
  }
});
export {
  ToggleFullScreen
};