关于程序员:开源插件基于Vue3轻量级弹框插件SlashLayer推荐

SlashLayer

SlashLayer是一个基于Vue3开发的专一于解决业务后盾管理系统简单弹出框和表单问题的轻量级弹出层插件，致力于应用起码的代码实现更多的性能，将更多的工夫用于摸鱼事业。提供常见的新增、更新等表单弹出层容器，图片预览、展现框容器、确认框等罕用的根底性能，基于MIT协定，无任何应用限度。
源码：https://gitee.com/lanmushan/slash-layer

全局配置性能

SlashLayer提供全局配置性能，在应用时大部分性能配置是雷同的倡议应用全局参数，在调用插件时的缺省参数会默认应用全局的配置参数，简化调用时参数传递数量

export const config = {
  title: "自定义全局题目",
  max: false,//容许最大化
  min: false,//容许最小化
  header: true,//显示头部
  loadingTime: 500,//加载成果
  allowMove: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

预设sm|md|lg等多种尺寸弹出框，简化应用时代码，尺寸配置反对简直所有类型的弹出框包含表单

Layer.modal({
    title: `sm尺寸`,
    content: {
        position: "sm",
        //组件实例
        component: HelloWorld,
        parent: this,
        props: {
            msg: "参数传递"
        }
    }
});

罕用表单性能

内置新增表单、更新表单、只读表单几种表单罕用表单，只需一个办法即可弹出表单框，疾速实现表单性能

Layer.createForm({
    title: "新增零碎",
    content: {
        component: SystemManagementUpdate,
        //传递参数
        props: {
            id: "xxx"
        }
    }

} as FormConfigure).then(res => {
    //执行后续操作
})

//子组件裸露如下办法
 const doSubmit = async () => {
  //解决提交数据工作  
}

图片预览性能

Layer.images({
    imgList: [
        {
            src: this.getSrc("/src/assets/1.jpg")
        },
        {
            src: this.getSrc("/src/assets/3.jpg")
        },
        {
            src: this.getSrc("/src/assets/2.jpg")
        }
    ]
});

本文由mdnice多平台公布