multiple document

multiple document component libaray using Vue3

link

git : https://github.com/kesay59/multiple-document

npm : https://www.npmjs.com/package/multiple-document-vue3

usage

code

<template>
  <div style="width:800px; height:600px;>
    <mulitple-document @readyApi="handleReady" :maximumNumber="maximumNumber"></mulitple-document>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MultipleDocument from 'multiple-document-vue3';

// the maximum number of windows that can be opened
const maximumNumber = 4;
// API for operating components
const documentApi = ref(null);
const handleReady = function (api) {
    documentApi.value = api;
};
<script>

documentApi

{
  list : [], // document list
  method : {
    open : function,
    close : function,
    closeAll : function,
  }
}

document (documentApi.list[0])

{
  index,
  order,
  title,
  contentsFn : Promise,
  contents,
  data,
  size,
  iconize,
  maximize,
  increaseOrder(),
  toggleMaximize(),
  toggleIconize(),
  close(),
}

open (documentApi.method.open)

params

@param {string} title
@param {function(promise)} contentsFn
@param {object} data
@param {object} size
@param {boolean} fixedContents
@return {class(Document)}

example

documentApi.method.open(
  {
    title: '1st',
    contentsFn: import('@/page/Test.vue'),
    data: {},
    size: { current: { width: 200, height: 100 }, max: { width: 500, height: 200 }, min: {width: 100, height: 100} },
    fixedContents: true
  }
)

close (documentApi.method.close / document.close())

example

documentApi.method.close(document.index)

documentApi.list[0].close()

test

open

close

resize, drag

maximize

iconize