{"_id":"@_nu/vue-axios-form","_rev":"3-47b0adf0fb3a339866a4c8b2adbddf95","name":"@_nu/vue-axios-form","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@_nu/vue-axios-form","version":"0.0.1","description":"一个基于 axios 利用 Form 表单的 dom 结构，发送 request 请求的组件。","main":"lib/index.js","author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/vue-axios-form.git"},"bugs":{"url":"https://github.com/nu-system/vue-axios-form/issues"},"homepage":"https://nu-system.github.io/vue/axios-form/","dependencies":{"axios":"^0.18.0"},"keywords":["ui","no-ui","nu-system","vue","vue","vue-ui","dialog","modal"],"gitHead":"714710dbf855d24a96f78a8af3866de405314eb1","_id":"@_nu/vue-axios-form@0.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-xj7sVDFgCNH27zQ1DQo3wHUApTeCPH+UPZF9eHlE0a6U8yCqRg+9E5Xwln6Mybx+fyQQkcnRXvwQ9zgb0i7p5A==","shasum":"1e5fc7b1860fb8664bfea4e4942c921faa1ad2bc","tarball":"https://registry.npmjs.org/@_nu/vue-axios-form/-/vue-axios-form-0.0.1.tgz","fileCount":4,"unpackedSize":6717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGI3TCRA9TVsSAnZWagAA/z0P+wRW9H8t0tSpS8pEnnkg\nkhTgW6cOvkMltUxb6J1HmklnfgKNFJ87yNkbDVzF5gRA7CE28vQ0/yXNDZuC\n0LGiQqFg6/rfk5DG7nflXOlmSp4N363aSDQhodsy0+N8RP6u8O2VhkMzNvKa\nWP4Z0jy/JItZf6ufw73lvOGNaapqr7u9AXJRRlFS7f6uzJAcSPsKLyAeO1hW\nzCMNKOyfAoo8z9PG2q0OLC0n9Sen/cRpzrhis+X4J/oF3BXbf/7bjYtRkeoD\nLhBlvcgHXFAAm6+i7dRdvC5NQrqhPuM0b5xW8ihiYVmXtCWGuK5hCtK6BjMZ\nNGkReUXkqNur9hYvblLsEYGixmVnb3warpG9K2b0HgHt0p9CPoMiFoBfJctS\na6CnbaA8m4yaaMck+2BbivEfdBLZpx1mazJ4Cwo1mnV3CM+5rSvCkPOX+Tyj\nV8z5D3fOKeQoUi+xebb3vBT5x86DwALWvC6mvRapAUys5CE6jW9qHVJCn1jo\nWtzQzdG1xu07UpVeJA2XEge57UTPPcA9RS+9w40ZVK/VX0go4NBVQj99r5fA\n1UN2YBHcOuKHEvz2cGuh7OUhmoXYNn2pU8z8N3uPI3XQGiU1kdxuuzvxkzEx\ng0b+sZg7kfNxyyvpOR9K6HGjEQfGQiC98BkULpzFL/xyUMDPF/w2KUDxPuZ2\nZ1rf\r\n=RMcy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEU8FexSpMqf8eirZourwJrHBRGQKpnYJTSjLgMBOBekAiBJgPiJWGTC5MetGbbR3Esi1sDPTOvckSMZasf355NHtQ=="}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-axios-form_0.0.1_1561890258823_0.5687966520430876"},"_hasShrinkwrap":false},"0.0.2":{"name":"@_nu/vue-axios-form","version":"0.0.2","description":"一个基于 axios 利用 Form 表单的 dom 结构，发送 request 请求的组件。","main":"lib/index.common.js","author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git@github.com:nu-system/vue-axios-form.git"},"bugs":{"url":"https://github.com/nu-system/vue-axios-form/issues"},"homepage":"https://nu-system.github.io/vue/axios-form/","dependencies":{"axios":"^0.18.0"},"devDependencies":{"@vue/cli-service-global":"^3.9.3","conventional-changelog-cli":"^2.0.21","cz-conventional-changelog":"3.0.2"},"peerDependencies":{"commitizen":"^4.0.3"},"scripts":{"build":"vue-cli-service build --target lib --name index --dest lib src/index.js","prepublishOnly":"npm run build","log":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","commitInit":"commitizen init cz-conventional-changelog --yarn --dev --exact"},"keywords":["ui","no-ui","nu-system","vue","vue","vue-ui","dialog","modal"],"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"_id":"@_nu/vue-axios-form@0.0.2","dist":{"shasum":"be7a58154bd55edf1c779a66d91670aa52636b6a","integrity":"sha512-VOWK/zXvpnQcG9ZZjyVqDmHHnZRgRqqRA+V6TZqqpqIbmVootd3nyvbUC06qY7sYXokOgK8gGbED6bNc+3Rr9A==","tarball":"https://registry.npmjs.org/@_nu/vue-axios-form/-/vue-axios-form-0.0.2.tgz","fileCount":11,"unpackedSize":348375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdW71tCRA9TVsSAnZWagAAUmUP/3DA1aEcBNeRfzZ9+dwB\njqk949/0X9pybbuT6Xpwsw8LuxOX/SRFl3bAMXqwqG3sl7LDUPepLjyE+T90\ndrEDuzntVq400eLiwsZdIiiBrqSm/clRfKS9HYIhD/jLxP3tb5CbT5yPXPp0\n8sapNIies7SR5oC63ZvCLXEpsAfSG+mTzfe3m144azZ6B67PTY/LC3Elvu7g\n2lH7WM0mdzvpl4T916Q/5+s2mcp5chOR3U9hfX9qcqYO6vIOHt6VQVWK44Qp\nTcNOqERytotDOZK8bBh01FN200fOqw32g7Ou7O084380SVWrNL3ImTVcrUjG\n9w62YB9O4i1ikuxeWL/uTFUgm2Odi5eiS6HoxQzqdNTJU0Qm+4KKlrFnTXrb\n7NjuA37ViCiaKjgaT14DBfKvhKz7HUQtBAbAremO9OjwzttV3vYT44duu7V4\nDZtiQedxRnFAG2/5C7h7gkeGRDroVJpCkj6PXvFaox76tqm9BCyT0y+8aBOv\ng8FmBJBe82rJftHtsNQbKQtuA/+MCI5ClsjkIhtXOBeMT5gQG5NbekYceMMG\n3VeTdtx7W53YuC3Ai5k+yhoTfdpl1KBRt7jfB44xctq93u3HEr/gxidDQOEW\n/ULVTWHplGhxyGj6TOTnO3zMU+4GPbHDU2SDudaZeXXe84xZSiVQr8cqq8ff\nRZlG\r\n=CrXN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEugYVoWwC8TKPNWCGkHxBp8dAmNXk86VQsOlc+hGvEhAiEAxxZ4Cck0FNYXSVpOW9d2vqfxOo8WRocxZvCXedB9Ikk="}]},"maintainers":[{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-axios-form_0.0.2_1566293356348_0.2860765236025924"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-30T10:24:18.609Z","0.0.1":"2019-06-30T10:24:18.991Z","modified":"2022-04-04T10:51:39.413Z","0.0.2":"2019-08-20T09:29:16.511Z"},"maintainers":[{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"description":"一个基于 axios 利用 Form 表单的 dom 结构，发送 request 请求的组件。","homepage":"https://nu-system.github.io/vue/axios-form/","keywords":["ui","no-ui","nu-system","vue","vue","vue-ui","dialog","modal"],"repository":{"type":"git","url":"git@github.com:nu-system/vue-axios-form.git"},"author":{"name":"yfe-team"},"bugs":{"url":"https://github.com/nu-system/vue-axios-form/issues"},"license":"MIT","readme":"# nu-vue-axios-form\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/vue-axios-form\n\n一个基于 axios 利用 Form 表单的 dom 结构， 发送 request 请求的组件。\n\n## Setup\n\n```bash\n$ yarn add @_nu/vue-axios-form\n```\n\n## Usage\n\n```vue\n<template>\n    <div>\n        <NuAjaxForm\n            action=\"//www.mocky.io/v2/5cee2090300000013a6e98c9?mocky-delay=1000ms\"\n            @onSuccess=\"handelSuccess\"\n        >\n            <p>click the button below will send a request and get a respones after 1000ms</p>\n            <button type=\"submit\">click and send a request</button>\n            <span slot=\"success\">request success</span>\n            <span slot=\"loading\">loading...</span>\n            <span slot=\"error\">error</span>\n        </NuAjaxForm>\n    </div>\n</template>\n<script>\n    import NuAjaxForm from \"@_nu/vue-axios-form\"    \n    export default {\n        components: { NuAjaxForm },\n        methods: {\n            handelSuccess(response) {\n                console.log('handelSuccess', response);\n            }\n        }\n    }\n</script>\n```\n\n<ClientOnly>\n<AxiosFormDemo/>\n</ClientOnly>\n\n你只需要写一个完整的 form 表单，就可以实现一个 request 请求，并且监听到整个的生命周期。\n\n## Api\n\n| props   |      类型      | 默认值  | 介绍 |\n|:----------|:-------------|:------:|------:|\n| [:defaultSubmit](#defaultSubmit) |  Boolean | false | 是否初始化的时候就发送 request 请求 |\n| [:status](#status) |  string | null | request status |\n| [:action](#action) |  String | - | server URL that will be used for the request |\n| :method | String | 'get' | request method  |\n| :params | Object | null | URL parameters to be sent with the request |\n| :config | Object | null | [axios](https://github.com/axios/axios) config |\n| @onSuccess | Function | return response | callback when request get response |\n| @onError | Function | return error | callback when request error |\n\n### defaultSubmit\n\n```jsx\n<NuAjaxForm :defaultSubmit=\"true\" />\n```\n\n只需将 `defaultSubmit` 设置为 `true`, `NuAjaxForm`一但创建 request 请求就默认触发。\n\n### status\n\n```jsx \n<NuAjaxForm status=\"placeholder\">\n    <span slot=\"placeholder\">placeholder</span>\n    <span slot=\"success\">request success</span>\n    <span slot=\"loading\">loading...</span>\n    <span slot=\"error\">error</span>\n</NuAjaxForm>\n```\n\n- `loading`: 当 request 触发时，status 会被设置为 loading；\n- `success`: 当 request 请求成功，status 会被设置为 success；\n- `error`: 当 request 请求失败，status 会被设置为 error；\n\nstatus 名称是什么，NuAjaxForm 内部相同名称的 slot 会显示。\n\n组件内部只会自动切换以上这三个状态。但是你可以为 status 设置任意的文案。\n\n所以在这个事例中只有 `slot=\"placeholder\"` 的 dom 会输出。\n\n```jsx\n<NuAjaxForm ref=\"axioForm\" />\n\nthis.$refs.axioForm.changeStatus('placeholder');\n```\n\n也可以在外面通过触发子组件的 changeStatus 方法来手动更新 status 的值。\n\n### action\n\n虽然 action 并不是 required，但是当 action 不存在时，整个 request 生命周期并不会创建。\n\n### form submit\n\n这里的所有事件都基于表单的 submit 事件，只要表单的 submit 事件被触发，整个 request 流程就会重新触发。\n\n```jsx\n<NuAjaxForm ref=\"axioForm\" />\n\nthis.$refs.axioForm.submit();\n```\n\n所以你可以通过 ref 触发子组件的 submit 事件来触发 requset 请求。\n\n\n```jsx\n<NuAjaxForm ref=\"axioForm\">\n    <button type=\"submit\">click and send a request</button>\n</NuAjaxForm>\n```\n\n也可以通过在 NuAjaxForm 里面放一个  `[type=\"submit\"]` 的按钮，然后点击这个按钮触发 requset 请求。\n","readmeFilename":"README.md"}