今天給大家分享的是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支持組件式+函數式兩種調用方式。

• 組件式

這里是自定義插槽內容信息！

• 函數式

let $el = v3layer({ title: '標題內容', content: '這里是內容信息！', 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彈窗模板

v3layer支持自定義拖拽區域 (drag:'#aaa')，拖動到窗口外 (dragOut:true)。支持iframe彈窗類型 (type:'iframe')。

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

ok，基于vue3.0開發pc端對話框組件就分享到這里。希望對大家有所幫助哈！

總結

以上是生活随笔為你收集整理的android弹窗不能手动关闭_vue3.0系列：Vue3自定义PC端弹窗组件V3Layer的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。