vue3⾃定义dialog、modal组件的⽅法
vue3-layer：基于Vue3.0开发的PC桌⾯端⾃定义对话框组件。
基于vue3构建的PC⽹页端⾃定义弹出框组件。全⾯覆盖各种弹窗应⽤场景，拥有10+种弹窗类型、30+种⾃定义参数配置、7+种弹窗动画效果，⽀持拖拽、缩放、最⼤化、全屏及⾃定义激活当前置顶层等功能。vue中reactive
前⼏天分享过⼀个Vue3.0移动端弹层组件V3Popup，如果感兴趣也可以去看看。
v3layer在开发设计之初灵感来⾃有赞Vant3.0、饿了么Element-Plus等组件化模式。
快速引⼊
在main.js中全局引⼊组件。
import { createApp } from 'vue'
import App from './App.vue'
// 引⼊Element-Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 引⼊弹窗组件v3layer
import V3Layer from './components/v3layer'
createApp(App).use(ElementPlus).use(V3Layer).mount('#app')
v3layer在调⽤上同样⽀持组件式+函数式两种⽅式。
组件写法
<v3-layer
v-model="showAlert"
title="标题信息"
content="<div style='color:#f57b16;padding:30px;'>这⾥是内容信息！</div>"
z-index="2030"
lockScroll="false"
xclose
resize
dragOut
:btns="[
{text: '取消', click: () => showAlert=false},
{text: '确认', style: 'color:#f90;', click: handleConfirm},
]"
/>
<template #content>⾃定义插槽内容信息！</template>
</v3-layer>
函数写法
let $el = v3layer({
title: '标题信息',
content: '<div style='color:#ff5252;padding:50px;'>这⾥是内容信息！</div>',
shadeClose: false,
zIndex: 2030,
lockScroll: false,
xclose: true,
resize: true,
dragOut: true,
btns: [
{text: '取消', click: () => { $el.close() }},
{text: '确认', click: () => handleConfirm},
]
});
遵循极简的调⽤原则，只需输⼊参数配置即可快速调⽤弹窗，实现想要的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。