vue3仿windows彈窗

栴檀發表於2023-03-14
VueWindows

 

一款基於vue3的仿windows彈窗。 可以元件模板編寫或函式式建立。

 

 

 

安裝

npm add 'box-win'

　　

兩種方式：

1、元件式引入

//全域性 test為自定義元件
import BoxWin from 'box-win'
app.use(BoxWin)
//或區域性引入
import { BoxWin } from 'box-win'

<BoxWin v-model="box1" position="center" :title="'box1'">
    <template #body>
        我是內容區域 
        <test :test="666" />
    </template>
</BoxWin>

　　

2、函式式建立

//test為自定義元件
import { boxWin } from 'box-win'

boxWin.createBoxWin({
    position: 'center',
    bodyStyle: { background: 'blue' },
    headIcon: h(test, {
      test: 111
    }),
    title: '標題',
    body: h(test, {
      test: 333
    }),
    headControl: h(test, {
      test: 444
    }),
})

　　

配置

props引數：

    modelValue?: boolean //普通引入控制顯示
    title?: string,
    width?: string; // 預設寬 —— 設定頭高 寬高最好傳入變數
    height?: string; // 預設高
    top?: string; // 預設距離上
    left?: string; // 預設距離左
    position?: string; // 預設比top、left優先，暫時支援center
    animate?: boolean; //是否需要動畫
    duration?: number,//動畫時間，單位 s
    headHeight?: string; // 預設控制欄高
    headStyle?: Record<string, any>; // 控制欄樣式
    bodyStyle?: Record<string, any>; //主要內容區域樣式
    resizeAble?: boolean | string; // 是否可以調整尺寸 預設可以調整
    dragAble?: boolean | string; // 是否可以拖拽 預設可拖拽
    minShow?: boolean; // 全屏控制顯示 預設顯示
    maxShow?: boolean; // 全屏控制顯示 預設顯示 
    fullShow?: boolean; // 全屏控制顯示 預設顯示
    closeShow?: boolean; // 關閉控制顯示 預設顯示
    headIcon?: Slots | HTMLElement,
    headTitle?: Slots | HTMLElement,
    headControl?: Slots | HTMLElement,
    body?: Slots | HTMLElement,

響應事件：

    'update:modelValue',
    'fullscreen', 
    'exitFullscreen', 
    'max', 'restore',
    'min',
    'close'

　　

相關文章