SlashLayerVue3 轻量弹框插件

联合创作 · 2023-09-19 17:40

Vue3轻量弹框插件

基于VUE3开发的Web弹出层插件内置各种常用尺寸模态框、提示消息等,可以轻松完成后台管理系统等业务表单开发,全身心投入摸鱼事业!

项目特点

  1. 为了快速开发后台管理系统
  2. 后期适配移动端和指令式弹框

快速开始

安装

yarn add slash-layer

npm install slash-layer

全局配置

import {LayerGlobalConfigure} from "../packages/components/Layer/ts/LayerConfigureDefinition";

export const config = {
    title: "自定义全局标题",
    max: false, //最大化按钮
    min: false,//最小化按钮
    header: true, //显示弹出框头部
    loadingTime: 500,//加载效果时长/毫秒
    dbFull: true, //双击面板顶部最大化最小化
    //表单自动提交后对响应结果进行破判断
    successDecide(msg: any) {
        console.log(msg);
        if (msg.code == 200) {
            return {
                msg: msg.msg, result: true, data: msg.data
            }
        } else {
            return {
                msg: msg.msg, result: false, data: msg.data
            }
        }
    }
} as LayerGlobalConfigure
export default config

使用

import {createApp} from 'vue'
import App from './Doc.vue'
import SlashLayer from 'slash-layer';
import {config} from './LayerConfig';

let app = createApp(App);
app.use(SlashLayer, config)
app.mount('#app')
浏览 9
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报