今天給大家分享的是Vue3系列之自定義桌面端對話方塊元件v3layer。

V3Layer 基於vue3.0構建的多功能PC網頁端彈窗元件。擁有超過10+種彈窗型別、30+種引數配置，支援拖拽(自定義拖拽區域)、縮放、最大化、全屏及自定義置頂層疊等功能。

快速引入

在main.js中引入v3layer元件。

import { createApp } from 'vue'import App from './App.vue'// 引入Element-Plus元件庫import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'// 引入彈窗元件v3layerimport V3Layer from './components/v3layer'createApp(App).use(ElementPlus).use(V3Layer).mount('#app')

v3layer支援元件式+函式式兩種呼叫方式。

元件式

<v3-layer     v-model="showDialog"    title="標題內容"    content="<div style='color:#f57b16;padding:30px;'>這裡是內容資訊！</div>"    z-index="2021"    lockScroll="false"    xclose    resize    dragOut    :btns="[        {text: '取消', click: () => showDialog=false},        {text: '確認', style: 'color:#f90;', click: handleSure},    ]"/>    <template v-slot:content>這裡是自定義插槽內容資訊！</template></v3-layer>

函式式

let $el = v3layer({    title: '標題內容',    content: '<div style='color:#f57b16;padding:30px;'>這裡是內容資訊！</div>',     shadeClose: false,    zIndex: 2021,    lockScroll: false,    xclose: true,    resize: true,    dragOut: true,    btns: [        {text: '取消', click: () => { $el.close() }},        {text: '確認', click: () => handleSure},    ]});

當彈窗型別為 message | notify | popover，呼叫方法如下：

v3layer.message({...})v3layer.notify({...})v3layer.popover({...})

vue3.0中提供了app.config.globalProperties 或 app.provide 兩種方式掛載全域性函式。

如果是 app.config.globalProperties 方式建立：

// vue2中呼叫methods: {    showDialog() {        this.$v3layer({...})    }}// vue3中呼叫setup() {    // 獲取上下文    const { ctx } = getCurrentInstance()    ctx.$v3layer({...})}

如果是 app.provide 方式建立：

// vue2中呼叫methods: {    showDialog() {        this.v3layer({...})    }}// vue3中呼叫setup() {    const v3layer = inject('v3layer')        const showDialog = () => {        v3layer({...})    }    return {        v3layer,        showDialog    }}

引數配置

v3layer支援如下30+引數靈活配置，實現各種彈窗場景。

|props引數|v-model         是否顯示彈框id              彈窗唯一標識title           標題content         內容（支援String、帶標籤內容、自定義插槽內容）***如果content內容比較複雜，推薦使用標籤式寫法type            彈框型別（toast|footer|actionsheet|actionsheetPicker|android|ios|contextmenu|drawer|iframe）layerStyle      自定義彈窗樣式icon            toast圖示（loading | success | fail）shade           是否顯示遮罩層shadeClose      是否點選遮罩時關閉彈窗lockScroll      是否彈窗出現時將body滾動鎖定opacity         遮罩層透明度xclose          是否顯示關閉圖示xposition       關閉圖示位置（left | right | top | bottom）xcolor          關閉圖示顏色anim            彈窗動畫（scaleIn | fadeIn | footer | fadeInUp | fadeInDown | fadeInLeft | fadeInRight）position        彈出位置（auto | ['100px','50px'] | t | r | b | l | lt | rt | lb | rb）drawer          抽屜彈窗（top | right | bottom | left）follow          跟隨元素定位彈窗（支援元素.kk #kk 或 [e.clientX, e.clientY]）time            彈窗自動關閉秒數（1、2、3）zIndex          彈窗層疊（預設8080）teleport        指定掛載節點（預設是掛載元件標籤位置，可透過teleport自定義掛載位置） teleport="body | #xxx | .xxx"topmost         置頂當前視窗（預設false）area            彈窗寬高（預設auto）設定寬度area: '300px' 設定高度area:['', '200px'] 設定寬高area:['350px', '150px']maxWidth        彈窗最大寬度（只有當area:'auto'時，maxWidth的設定才有效）maximize        是否顯示最大化按鈕（預設false）fullscreen      全屏彈窗（預設false）fixed           彈窗是否固定drag            拖拽元素（可定義選擇器drag:'.xxx' | 禁止拖拽drag:false）dragOut         是否允許拖拽到視窗外（預設false）lockAxis        限制拖拽方向可選: v 垂直、h 水平，預設不限制resize          是否允許拉伸尺寸（預設false）btns            彈窗按鈕（引數：text|style|disabled|click）++++++++++++++++++++++++++++++++++++++++++++++|emit事件觸發|success         層彈出後回撥（@success="xxx"）end             層銷燬後回撥（@end="xxx"）++++++++++++++++++++++++++++++++++++++++++++++|event事件|onSuccess       層打開回調事件onEnd           層關閉回撥事件

v3layer彈窗模板

配置 topmost:true 當前視窗會保持置頂。