Vue-Window-Manager

This is a documentation for the "vue-window-manager" module. This module allows the management of windows within a Vue.js application. The windows can be moved within a parent window using drag and drop.

If you have a feature request, please submit it as a GitHub issue.

Example Images

UseDemo

https://obadesktop.umaxiaotian.com/

CodeSandBox

http://bit.ly/3YjsTbB

To install the package, use the following command:

npm install vue-window-manager

To use the package, import it in the component where it will be used and include it as a component. Then, add the component's tag to the template section with the desired attributes.

<script>
import { onMounted, defineComponent, ref } from "vue";
import  vueWindowManager from 'vue-window-manager';
import "vue-window-manager/windows10.css"
export default defineComponent({
  components: {
    vueWindowManager
  },
},);
</script>
<template>
  <div style="height:100vh; width: 100wh;">
    <vueWindowManager
          :isActive=true
          :top=0
          :left= 0
          :width= 500
          :height= 500
          :minWidth= 500
          :minHeight= 500
          :isResizing="['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt']"
          :isButtonMaximized= true
          :isButtonMinimized= true
          :isMaximized= false
          :maxWidth= 500
          :maxHeight= 500
           windowId=1
          title="ウィンドウコンポーネントサンプル"
          titleIcon="https://cdn-icons-png.flaticon.com/512/337/337948.png"
          @clickWindow=""
          @clickDestroy=""
          @clickMin=""
					>
          <div style="background-color: black;height: 100%;">
                <a>TESTTESTTESTTESTTESTTESTTESTTESTTES
                  TTESTTESTTESTTESTTESTTESTTESTTESTTEST
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TESTTESTTESTTESTTESTTESTTESTTESTTESTTES
                  TTESTTEST
                </a>
          </div>
    </vueWindowManager>
  </div>
</template><style>
body {
  background-color: #2a6a83;
}
</style>

Below are the API details for the <vueWindowManager> component:

Props

| Property | Description | Type | Default | | --- | --- | --- | --- | | isActive | Controls whether the window is displayed or not. | Boolean | null | | width | The width of the window in pixels or "auto". | [Number, String] | undefined | | minWidth | The minimum width of the window. | Number | 0 | | maxWidth | The maximum width of the window. | Number | undefined | | height | The height of the window in pixels or "auto". | [Number, String] | undefined | | minHeight | The minimum height of the window. | Number | 0 | | maxHeight | The maximum height of the window. | Number | undefined | | left | Offset left from parent | [Number, String] | 0 | | top | Offset top from parent | [Number, String] | 0 | | isMaximize | Determines whether to maximize the window. | Boolean | null | | title | Specifies the title of the window. | String | '' | | titleIcon | Determines the icon of the window. | String | '' | | isButtonMaximized | Determines whether to display the maximize button. | Boolean | null | | isButtonMinimized | Determines whether to display the minimize button. | Boolean | null | | windowId | Determines the ID of the window. | String | '' |

Actions

| Name | Description | Type | Default | | -------------- | -------------------------------------------------------------- | -------- | ------- | | clickWindow | Fires when the window is clicked. | String | '' | | clickDestroy | Fires when the window's close button is clicked. | String | '' | | clickMin | Fires when the window's minimize button is clicked. | String | '' |

License

MIT License (c) 2023 YUMA OBATA