{"id":20540512,"url":"https://github.com/gjtool/vl-layer","last_synced_at":"2025-04-14T08:38:19.266Z","repository":{"id":48882249,"uuid":"319221233","full_name":"gjTool/vl-layer","owner":"gjTool","description":"vue-layer修复版vl-layer，一款好用的vue弹窗组件，layui-layer弹窗风格","archived":false,"fork":false,"pushed_at":"2021-12-06T06:53:39.000Z","size":853,"stargazers_count":34,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T13:33:11.000Z","etag":null,"topics":["javascript","layer","layui","plugin","vl-layer","vue","vue-layer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gjTool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-07T06:10:24.000Z","updated_at":"2024-08-07T09:29:16.000Z","dependencies_parsed_at":"2022-09-16T03:50:25.286Z","dependency_job_id":null,"html_url":"https://github.com/gjTool/vl-layer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gjTool%2Fvl-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gjTool%2Fvl-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gjTool%2Fvl-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gjTool%2Fvl-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gjTool","download_url":"https://codeload.github.com/gjTool/vl-layer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248847359,"owners_count":21171169,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","layer","layui","plugin","vl-layer","vue","vue-layer"],"created_at":"2024-11-16T01:15:46.679Z","updated_at":"2025-04-14T08:38:19.243Z","avatar_url":"https://github.com/gjTool.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/vl-layer.svg)](https://www.npmjs.com/package/vl-layer) [![npm downloads](https://img.shields.io/npm/dt/vl-layer.svg)](https://www.npmjs.com/package/vl-layer)   [![MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/gjTool/vl-layer/blob/master/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/gjTool/vl-layer.svg)](https://github.com/gjTool/vl-layer/issues) [![GitHub stars](https://img.shields.io/github/stars/gjTool/vl-layer.svg?style=social)](https://github.com/gjTool/vl-layer/stargazers) [![GitHub forks](https://img.shields.io/github/forks/gjTool/vl-layer.svg?style=social)](https://github.com/gjTool/vl-layer/network/members)  \n\n **vue-layer修复版vl-layer，一款好用的vue弹窗组件，layui-layer弹窗风格**\n - 起初使用vue-layer，但是奈何bug太多，作者又没有时间修复，所以只能自己动手修改源码，添加自己想要的功能，修改了图标，索性发布到npm上，这样也能帮到其他想用vue-layer的同学。\n - [vl-layer github地址](https://github.com/gjTool/vl-layer)  \n - [原版vue-layer github地址](https://github.com/zuoyanart/vue-layer)\n\n### **QQ交流群：196422291**\n\n## 更新信息\n\n- 2021.06.18 更新： 新增parentDom属性，弹窗的父元素，弹窗创建后会append到父元素\n## 快速使用\n\n```shell\nnpm install vl-layer\n```\n \n - main.js里\n```javascript\nimport Vue from 'vue';\nimport layer from 'vl-layer'\nimport 'vl-layer/vl-layer.css';\n\nVue.prototype.$layer = layer(Vue);\n```\n - vue文件里\n```javascript\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  import world from \"@/components/HelloWorld.vue\"\n  export default {\n    name: 'App',\n\tcomponents:{\n\t  world\n\t},\n\tdata() {\n\t  return {\n\t\n\t  };\n\t},\n\tmounted() {\n\t\t//iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面\n\t\tlet layerId = this.$layer.iframe({\n\t\t   title:\"提示\",\n\t\t   content:{\n\t\t     content:world, //组件\n\t\t     parent:this, //vue实例 传入实例 弹窗组件内才能获取laydata\n\t\t     data:{\n\t\t\t\t a:\"这是父组件传值\", //父组件向弹窗子组件传值\n\t\t\t\t b:{},\n\t\t\t\t c:function(){}\n\t\t\t } \n\t\t   },\n\t\t   canmove:false,  //true可以拖动 false不能拖动 \n\t\t   //弹窗成功 id弹窗的id\n\t\t   success:id=\u003e{\n\t\t     console.log(\"success\",id)\n\t\t   },\n\t\t   //弹窗关闭/取消\n\t\t   end:()=\u003e{\n\t\t     console.log(\"end\")\n\t\t   },\n\t\t   //弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止    \n\t\t  // beforeClose:(id,close)=\u003e{\n\t\t  //   console.log(\"beforeClose\",id)\n\t\t  //   setTimeout(()=\u003e{\n\t\t //      close(id)\n\t\t //    },2000)\n\t\t //    return false\n\t\t //  },\n\t\t  //还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原\n\t\t  maxminiCallback:(id,state)=\u003e{\n\t\t\tconsole.log('maxminiCallback', id,state);\n\t\t  },\n\t\t  //最小化回调 id弹窗的id\n\t\t  miniCallback: id =\u003e {\n\t\t\tconsole.log('miniCallback', id);\n\t\t  },\n\t\t  //最大化回调 id弹窗的id\n\t\t  maxCallback: id =\u003e {\n\t\t\tconsole.log('maxCallback', id);\n\t\t  }\n\t\t })\n\t}\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n \n- HelloWorld.vue\n```javascript\n\u003ctemplate\u003e\n  \u003cdiv calss=\"HelloWorld\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  export default {\n    name: 'HelloWorld',\n\tprops:{\n\t\t//本弹窗的id\n\t\tlayerid:{\n\t\t\ttype:String,\n\t\t\tdefault:\"\"\n\t\t},\n\t\t//父组件的data\n\t\tlaydata:{\n\t\t\ttype:Object,\n\t\t\tdefault:()=\u003e{\n\t\t\t\treturn {}\n\t\t\t}\n\t\t},\n\t\t//父组件传值\n\t\ta:{\n\t\t\ttype:String,\n\t\t\tdefault:\"\"\n\t\t},\n\t\tb:{\n\t\t\ttype:Object,\n\t\t\tdefault:{}\n\t\t},\n\t\tc:{\n\t\t\ttype:Function,\n\t\t\tdefault:()=\u003e{}\n\t\t}\n\t},\n\tdata() {\n\t  return {\n\t\n\t  };\n\t},\n\tmounted() {\n\t\t\n\t}\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n\n## Attribut\n-（注意1：信息框，页面层,iframe层,加载层,tips层下各种具体配置参数会有差别，可以看后面各自的配置）\n\n-（注意2：iframe层并不是真的用了html标签iframe,实质上还是用的div,只是iframe层可以引用自定义组件、页面）\n```javascript\n {\n   type: 0, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）\n   title: '信息',\n   content: '', //文本，标签，iframe层可以传递vue组件对象\n   area: 'auto',//['400px','300px'] \n   offset: 'auto',//[20,10] \"rightTop\" \"rightBottom\" \"leftTop\" \"leftBottom\" {left:0,top:0}  {left:0,bottom:0}  {right:0,bottom:0} {right:0,top:0}\n   icon: -1,\n   btn: '确定',//[‘确定’，‘取消’]\n   time: 0,\n   shade: true,//是否显示遮罩\n   yes: ()=\u003e{},//确定回调\n   cancel: ()=\u003e{},//取消，右上角x关闭按钮回调\n   tips: [0,{}],//支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']\n   tipsMore: false,//是否允许多个tips\n   shadeClose: true,//点击遮罩是否关闭\n   maxmin: true,//开启最大化最小化\n   minBtnOnly:true, //默认false 在  maxmin: true前提下，开启minBtnOnly表示只显示最小化按钮\n   scrollbar: true, //是否允许浏览器出现滚动条:默认是允许\n   resize: false ,//是否允许拉伸，默认是不允许\n   parentDom: HTMLdiv,//html DOM元素，弹窗所在的父元素\n   resizeOptions:{\n\t   icon:true , //是否显示右下角图标 默认显示 false隐藏\n\t   dom:true, //是否开启右下角拉伸 \n\t   right:false, //是否开启右边界拉伸 \n\t   bottom:false //是否开启底部边界拉伸 \n   },\n   //新增参数\n   canmove:false,  //true可以拖动 false不能拖动\n\t //弹窗成功 id弹窗的id\n\t success:id=\u003e{\n\t   console.log(\"success\",id)\n\t },\n\t //弹窗关闭/取消\n\t end:()=\u003e{\n\t   console.log(\"end\")\n\t },\n\t//还原状态回调 id弹窗的id state：1 是由最小化还原 2是由最大化还原\n\tmaxminiCallback:(id,state)=\u003e{\n\t\t\tconsole.log('maxminiCallback', id,state);\n\t},\n\t//最小化回调 id弹窗的id\n\tminiCallback: id =\u003e {\n\t\t\tconsole.log('miniCallback', id);\n\t},\n\t//最大化回调 id弹窗的id\n\tmaxCallback: id =\u003e {\n\t\t\tconsole.log('maxCallback', id);\n\t},\n\t//弹窗关闭/取消之前，id弹窗的id close关闭弹窗, return false阻止关闭  return true不阻止\n\t  beforeClose:(id,close)=\u003e{\n\t\tconsole.log(\"beforeClose\",id)\n\t\tsetTimeout(()=\u003e{\n\t\t  close(id)\n\t\t},2000)\n\t\treturn false\n\t  }\n }\n```\n\n## Method\n\n![alert示例](https://www.gjtool.cn/images/layer-alert.png)\n```javascript\n this.$layer.alert(content, [options, yes]);\n // options和yes可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes\n // content 可以为html\n //yes如果是个function，这会自动添加参数layerid，\n (layerid)=\u003e{\n   this.$layer.close(layerid);\n }\n```\n\n![confirm示例](https://www.gjtool.cn/images/layer-confirm.png)\n```javascript\n this.$layer.confirm(content, [options, yes, cancel]);\n  // options，yes和cancel可以省略， 如果您不愿意写options，则可以直接写确定按钮的函数，即yes，或者覆盖默认的cancel方法。PS：yes和cancel方法不能互换\n  //content 可以为html\n   //yes,cancel如果是个function，这会自动添加参数layerid，\n (layerid)=\u003e{\n   this.$layer.close(layerid);\n }\n```\n![loading示例](https://www.gjtool.cn/images/layer-loading1.png)\n![loading示例](https://www.gjtool.cn/images/layer-loading2.png)\n```javascript\n this.$layer.loading(option);\n  // options ={time:3}，3秒自动关闭\n  //options = {content:'请等待'} //可传入文字\n```\n\n![msg示例](https://www.gjtool.cn/images/layer-msg.png)\n```javascript\n this.$layer.msg(content, [options, end]);\n // options和end可以省略， 如果您不愿意写options，则可以直接写时间到期的回调即可，即end方法\n // 默认msg的关闭时间为1.5秒\n // content 可以为html\n```\n\n![prompt示例](https://www.gjtool.cn/images/layer-prompt.png)\n```javascript\n this.$layer.prompt(options, yes);\n //特殊参数: value 要回显的值\n //formType: 1text,2password,3textarea\n```\n\n![tips示例](https://www.gjtool.cn/images/layer-tips.png)\n```javascript\nthis.$layer.tips(content, follow, options);\n//content 可以为html\n//follow对css选择器，用来定位目标\n```\n\n![iframe示例](https://www.gjtool.cn/images/layer-iframe.png)\n```javascript\nthis.$layer.iframe({\n  content: {\n    content: componentName, //传递的组件对象\n    parent: this,//当前的vue对象\n    data:{}//props\n  },\n  area:['800px','600px'],\n  title: 'title'，\n  cancel:()=\u003e{//关闭事件\n     alert('关闭iframe');\n  }\n});\n// data参数可认为是componentName的props，同时 该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接用来关闭该层\n// options参数直接写到json里即可，比如title\n```\n\n```javascript\nthis.$layer.close(layerid);\nthis.$layer.closeAll(type); // type:'loading' 'alert' 'confirm' 'msg' 'prompt' 'iframe'\n//弹窗最大化\nthis.$layer.full(layerid);\n//弹窗最小化\nthis.$layer.min(layerid);\n//还原弹窗\nthis.$layer.restore(layerid);\n//弹窗是否可以拖动 true可以 false不能\nthis.$layer.canmove(layerid,true)\n```\n### **QQ交流群：196422291**\n\n## 打赏赞助作者，请他喝一杯咖啡：\n![支付宝二维码](https://www.gjtool.cn/download/zfb.jpg)\n ![微信二维码](https://www.gjtool.cn/download/wx.jpg?123123534253453453245)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgjtool%2Fvl-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgjtool%2Fvl-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgjtool%2Fvl-layer/lists"}