{"_id":"@_nu/js-dialog","_rev":"1-8043525ef0e431848f2d72d220f93f82","name":"@_nu/js-dialog","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@_nu/js-dialog","version":"0.0.1","description":"nu-system dialog component pure js version","main":"lib/index.js","scripts":{"build":"cp -r demo/dialog/ ./lib","prepublishOnly":"npm run build","log":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","commitInit":"commitizen init cz-conventional-changelog --yarn --dev --exact"},"repository":{"type":"git","url":"git+https://github.com/nu-system/js-dialog.git"},"keywords":["dialog","vanilla","js"],"author":{"name":"yfe-team"},"license":"MIT","bugs":{"url":"https://github.com/nu-system/js-dialog/issues"},"homepage":"https://github.com/nu-system/js-dialog#readme","devDependencies":{"commitizen":"^4.0.3","conventional-changelog-cli":"^2.0.23","cz-conventional-changelog":"3.0.2"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"_id":"@_nu/js-dialog@0.0.1","dist":{"shasum":"ed4f2788cf47913236707de46054a55e46364cdc","integrity":"sha512-MXhBXXrNuZWwMJyTER3sZH3PAVlG6A7nhsuhiggqmogudzv0/3wxPSq85uZ2Zx9pEK4rSTwwBpClDb30iq3G9A==","tarball":"https://registry.npmjs.org/@_nu/js-dialog/-/js-dialog-0.0.1.tgz","fileCount":5,"unpackedSize":9202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTmd4CRA9TVsSAnZWagAAhJAQAJ2O7/yM3HXvUx3Gp0fk\nXDnLuQHKmjZ05nMmZENqW7Yus0nI1/uIaVNwHUILWhTqs2g3rtVUX/wpGt3h\nCUTKquY/cw8g1SSvNVRQ+pseqrFHDu2zh9SP8s5GZQHnlfWTWYxp4wnemaqf\nJoUbc/ZRhVWQz4DUOuWjyXwGjOwatX2iH9vzj1C3riIba2C2Iv7DHb7vbQNv\nCVr6SBL89jz6ZAqv6OfJ9j4kRk8jWQGYnkbn5w3eOZPwAjSw73vrBTAnWNrH\narCl8uM/TbixeNbxtvR73pfr9UT0Uj1sxAfApI87Y3XZdxEWKlOz+zRWjTBk\nR49sSpDB7nnnfuL8cIrv+/nOXYludkxB2a0PpAhfLHZqZW5Rwfu0ncQUZsMP\nhmoAuUn2Goag7LV+4LayKyiJ5ugEFr8n8EkZYz6tIwuIwtp2ia1I9c//YfUL\nukcmkHAJBoKEhbD+hCrB2G1svwdVwjIYosRRZJnDcD3oZYEghhtSeTJSpnf+\nobAqHweSfTCbg8LUuC0QXUWIY0GcRlgRdbsGK3e++i6E+3SzbkC/WuNySyJ1\nx2Cj1YFh0dhMJzxb/WIOtQJwiagZwchMsoXcx3S9PZ2rLHK+6GB0Nm0RJiEU\noXvk2G1Bo01QcXnem3dxUR7PzJAyKF0P+9VlZ7Fnv1950qebRit34tncys5K\n17Vc\r\n=BS2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbwfb5qYs4pBvexT950wGaziJUma3I5VrWFfS0s5VzpgIhAKQVMs3Gv3rZ/UgU/ZgZ7IWeGG3x1YYxhLuq3JYvulqq"}]},"maintainers":[{"name":"nanasun","email":"1128yeye@sina.com"},{"name":"ziven27","email":"ziven27@qq.com"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/js-dialog_0.0.1_1565419384054_0.9632240492470177"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-10T06:43:03.831Z","0.0.1":"2019-08-10T06:43:04.177Z","modified":"2022-04-04T10:51:36.803Z"},"maintainers":[{"name":"nanasun","email":"1128yeye@sina.com"},{"name":"ziven27","email":"ziven27@qq.com"}],"description":"nu-system dialog component pure js version","homepage":"https://github.com/nu-system/js-dialog#readme","keywords":["dialog","vanilla","js"],"repository":{"type":"git","url":"git+https://github.com/nu-system/js-dialog.git"},"author":{"name":"yfe-team"},"bugs":{"url":"https://github.com/nu-system/js-dialog/issues"},"license":"MIT","readme":"## js-dialog\n\n[![npm package][npm-badge]][npm]\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/@_nu/js-dialog\n\nNU 「 no-ui 」 组件库系统 nu-system，弹窗组件 原生 JS 实现。\n\n## 做了什么？\n\n`@_nu/js-dialog` 只做了以下两件事情。\n\n1. 弹窗显示和隐藏的时候切换了一个，控制状态的 class `_open`;\n2. 弹窗显示和隐藏的时候切换了 `body` 的滚动状态;\n\n`@_nu/js-dialog` 本身不会输出任何样式，对应的 Dom 结构和相应的 class 均来自于 [vanilla-dialog](https://nu-system.github.io/css/dialog/)。\n\n## 怎么用？\n\n```\n$ npm i @_nu/js-dialog @_nu/css-dialog\n```\n\n1. @_nu/js-dialog 为逻辑组件\n2. @_nu/css-dialog 为样式组件\n\n```HTML\n<!doctype html>\n<html lang=\"en\">\n    <head>\n        <link rel=\"stylesheet\" href=\"node_modules/@_nu/css-dialog/css/core.css\">\n        <!-- 弹窗居中显示 -->\n        <link rel=\"stylesheet\" href=\"node_modules/@_nu/css-dialog/css/position/middle.css\">\n        <!-- \n            <link rel=\"stylesheet\" href=\"node_modules/@_nu/css-dialog/css/position/top.css\">\n            <link rel=\"stylesheet\" href=\"node_modules/@_nu/css-dialog/css/position/right.css\">\n            <link rel=\"stylesheet\" href=\"node_modules/@_nu/css-dialog/css/position/bottom.css\">\n            <link rel=\"stylesheet\" href=\"node_modules/@_nu/css-dialog/css/position/left.css\"> \n        -->\n    </head>\n    <body>\n\n        <button class=\"j_dialog_trigger button\" type=\"button\">显示弹窗</button>\n\n        <!-- 弹窗主体 start -->\n\n        <!-- _middle 对应上面顶部的位置的CSS -->\n        <div id=\"dialogHello\" class=\"nu_dialog_wrap _middle\">\n            <label class=\"nu_dialog_mask j_close\" title=\"mask\"></label>\n            <div class=\"nu_dialog\">\n                <label class=\"nu_dialog_close j_close\" title=\"close\">&times;</label>\n                <div class=\"dialog-body\">\n                    <!-- 弹窗内容 -->\n                </div>\n            </div>\n        </div>\n        <!-- 弹窗主体 end -->\n\n       <script src=\"./dialog/index.js\"></script>\n        <script>\n            (function () {\n                const $btn = document.querySelector('.j_dialog_trigger');\n\n                // 点击按钮显示弹窗\n                $btn.addEventListener(\"click\", function (e) {\n                    e.preventDefault();\n                    new NuDialog({\n                        sel: '#dialogHello'\n                    });\n                });\n            })();\n        </script>\n    </body>\n</html>\n```\n\n## Api\n\n```JS\nvar _api= new NuDialog({\n    // [string] dom 对象选择器，内部选择器为 document.querySelector\n    sel: null,  \n    // [string] 用于控制弹窗的显示隐藏\n    openClass: '_open', \n    // [string] 弹窗内部有这个clas，点击会触发弹窗关闭逻辑\n    closeClass: 'j_close',\n    // [boolean] 初始化的时候是否显示弹窗\n    defaultShow: true,\n    // 是否控制 body 滚动条\n    isLockScroll: true,\n    // [function] 当弹窗显示时触发，\n    onShow: function (_api, done) {\n        // _api 是整个弹窗对象，可以获取所有方法和事件\n        // done() 表示显示弹窗，一些异步的状况的时候可以用到\n\n        // 这里返回 true 才会显示，等价于done()，其它状况弹窗不会显示\n        return true;\n    },\n    // 弹窗显示之后执行的事\n    onAfterShow: function (_api) {\n        // _api 是整个弹窗对象，可以获取所有方法和事件\n    },\n    // 关闭弹窗，如果用户设置了这个属性，需要手动触发弹窗关闭逻辑\n    onClose: function (_api, done) {\n        // _api 是整个弹窗对象，可以获取所有方法和事件\n\n        // done() 表示关闭弹窗，一些异步的状况的时候可以用到\n\n        // 这里返回 true 才会关闭，等价于done()，其它状况弹窗不会关闭\n        return true;\n    }\n});\n\n```\n","readmeFilename":"README.md"}