├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── _config.yml
├── dist
    └── vue-qs-form.min.js
├── docs
    └── index.html
├── package-lock.json
├── package.json
├── src
    ├── index.js
    └── vue-qs-form.vue
├── test
    ├── karma.config.js
    └── specs
    │   └── vue-qs-form.spec.js
├── webpack.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | yarn-error.log
3 | node_modules
4 | .DS_Store
5 | /test/coverage/
6 | /.vscode
7 | /.idea
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - "7"
 5 | 
 6 | before_script:
 7 |   - yarn install
 8 | 
 9 | script:
10 |   - yarn run lint
11 |   - yarn run test
12 |   - yarn run report-coverage


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Kong Fanbo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-qs-form
 2 | Vue quick step form, Vue快速问卷表单
 3 | 
 4 | [![npm](https://img.shields.io/npm/v/vue-qs-form.svg)](https://www.npmjs.com/package/vue-qs-form)
 5 | [![npm](https://img.shields.io/npm/dt/vue-qs-form.svg)](https://www.npmjs.com/package/vue-qs-form)
 6 | [![npm](https://img.shields.io/npm/dm/vue-qs-form.svg)](https://www.npmjs.com/package/vue-qs-form)
 7 | [![Build Status](https://travis-ci.org/xanke/vue-qs-form.svg?branch=master)](https://travis-ci.org/xanke/vue-qs-form)
 8 | [![Codecov](https://img.shields.io/codecov/c/github/xanke/vue-qs-form.svg)](https://codecov.io/gh/xanke/vue-qs-form)
 9 | [![npm](https://img.shields.io/npm/l/vue-qs-form.svg)](http://opensource.org/licenses/MIT)
10 | 
11 | ****需配合element-ui使用 https://github.com/elemefe****
12 | 
13 | 
14 | ## 快速开始
15 | ```js
16 | import Vue from 'vue'
17 | import vueQsForm from 'vue-qs-form'
18 | 
19 | export default {
20 |   name: 'App',
21 | 
22 |   components: {
23 |     vueQsForm
24 |   }
25 | }
26 | ```
27 | 
28 | ## 示例
29 | ```vue
30 | <template>
31 |   <vue-qs-form v-model="form" :data="data" @finish="submitForm"></vue-qs-form>
32 | </template>
33 | 
34 | <script>
35 | import vueQsForm from 'vue-qs-form'
36 | 
37 | export default {
38 |   name: 'App',
39 |   components: {
40 |     vueQsForm
41 |   },
42 | 
43 |   data: () => ({
44 |     form: '',
45 |     data: [
46 |       {
47 |         'key': 'qa1',
48 |         'title': '问题一',
49 |         'radios': [
50 |           [0, '否'],
51 |           [1, '是']
52 |         ]
53 |       },
54 |       {
55 |         'key': 'qa2',
56 |         'title': '问题二',
57 |         'radios': [
58 |           [0, '否'],
59 |           [1, '是']
60 |         ]
61 |       }
62 |     ]
63 |   }),
64 | }
65 | </script>
66 | ```
67 | 
68 | ## Props
69 | |参数|说明|必须|类型|可选值|默认值|
70 | |-----|-----------|--------|----|----|-------|
71 | |data|表单数据|是|String|—|—|
72 | |height|表单高度|否|String|—|250px|
73 | |autoNext|是否自动下一步|否|Boolean|true/false|false|
74 | |prevBtnText|上一步按钮文字|否|String|—|上一步|
75 | |nextBtnText|下一步按钮文字|否|String|—|下一步|
76 | |submitBtnText|完成按钮文字|否|String|—|提交|
77 | 
78 | ## Event
79 | |事件名称|说明|回调参数|
80 | |-----|-----------|--------|
81 | |submit|点击提交事件|表单数据|
82 | |atend|到达最后|-|
83 | 
84 | ## Function
85 | |方法名称|说明|回调参数|
86 | |-----|-----------|--------|
87 | |restForm|重置表单|-|
88 | 
89 | ## License
90 | 
91 | Vue-qs-form is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/dist/vue-qs-form.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueQsForm",[],e):"object"==typeof exports?exports.VueQsForm=e():t.VueQsForm=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1),i={install:function(t){t.component(r.a.name,r.a)}};r.a.install=i.install,e.default=r.a},function(t,e,n){"use strict";function r(t){n(2)}var i=n(8),o=n(9),s=n(7),a=r,u=s(i.a,o.a,!1,a,null,null);e.a=u.exports},function(t,e,n){var r=n(3);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);n(5)("e2012242",r,!0)},function(t,e,n){e=t.exports=n(4)(void 0),e.push([t.i,".xk-qs-form-body{position:relative;overflow:auto}.xk-qs-form-item{position:absolute;height:100%;width:100%}.xk-qs-title{color:#000;font-weight:block}.xk-qs-radio-group,.xk-qs-radio-item{width:100%!important}.xk-qs-radio-item{display:block!important;margin-left:0!important;margin-bottom:0!important;padding:12px 10px}.xk-qs-radio-item:hover{background-color:#f5f5f5!important}.xk-qs-radio-item .el-radio__label{white-space:normal!important;display:inline-block;line-height:1.5;padding-left:25px}.xk-qs-radio-item .el-radio__input{height:14px;position:absolute;top:50%;margin-top:-7px}.xk-qs-form-footer{margin-top:45px}.xk-qs-btn-left{float:left}.xk-qs-btn-right{float:right}.xs-qs-progress{display:inline}.xs-qs-progress .el-progress-bar__innerText{display:none!important}",""])},function(t,e){function n(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=r(i);return[n].concat(i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},i=0;i<this.length;i++){var o=this[i][0];"number"==typeof o&&(r[o]=!0)}for(i=0;i<t.length;i++){var s=t[i];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},function(t,e,n){function r(t){for(var e=0;e<t.length;e++){var n=t[e],r=f[n.id];if(r){r.refs++;for(var i=0;i<r.parts.length;i++)r.parts[i](n.parts[i]);for(;i<n.parts.length;i++)r.parts.push(o(n.parts[i]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var s=[],i=0;i<n.parts.length;i++)s.push(o(n.parts[i]));f[n.id]={id:n.id,refs:1,parts:s}}}}function i(){var t=document.createElement("style");return t.type="text/css",p.appendChild(t),t}function o(t){var e,n,r=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(r){if(h)return m;r.parentNode.removeChild(r)}if(v){var o=d++;r=l||(l=i()),e=s.bind(null,r,o,!1),n=s.bind(null,r,o,!0)}else r=i(),e=a.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}function s(t,e,n,r){var i=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=g(e,i);else{var o=document.createTextNode(i),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(o,s[e]):t.appendChild(o)}}function a(t,e){var n=e.css,r=e.media,i=e.sourceMap;if(r&&t.setAttribute("media",r),i&&(n+="\n/*# sourceURL="+i.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var u="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!u)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=n(6),f={},p=u&&(document.head||document.getElementsByTagName("head")[0]),l=null,d=0,h=!1,m=function(){},v="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n){h=n;var i=c(t,e);return r(i),function(e){for(var n=[],o=0;o<i.length;o++){var s=i[o],a=f[s.id];a.refs--,n.push(a)}e?(i=c(t,e),r(i)):i=[];for(var o=0;o<n.length;o++){var a=n[o];if(0===a.refs){for(var u=0;u<a.parts.length;u++)a.parts[u]();delete f[a.id]}}}};var g=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var n=[],r={},i=0;i<e.length;i++){var o=e[i],s=o[0],a=o[1],u=o[2],c=o[3],f={id:t+":"+i,css:a,media:u,sourceMap:c};r[s]?r[s].parts.push(f):n.push(r[s]={id:s,parts:[f]})}return n}},function(t,e){t.exports=function(t,e,n,r,i,o){var s,a=t=t||{},u=typeof t.default;"object"!==u&&"function"!==u||(s=t,a=t.default);var c="function"==typeof a?a.options:a;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),i&&(c._scopeId=i);var f;if(o?(f=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},c._ssrRegister=f):r&&(f=r),f){var p=c.functional,l=p?c.render:c.beforeCreate;p?(c._injectStyles=f,c.render=function(t,e){return f.call(e),l(t,e)}):c.beforeCreate=l?[].concat(l,f):[f]}return{esModule:s,exports:a,options:c}}},function(t,e,n){"use strict";e.a={name:"vue-qs-form",props:{data:{required:!0,default:"",type:[Array,Object]},height:{default:"250px",type:String},prevBtnText:{default:"上一步",type:String},nextBtnText:{default:"下一步",type:String},submitBtnText:{default:"提交",type:String},value:{default:"",required:!1,type:[Object,String,Array]},autoNext:{default:!0,type:Boolean}},data:function(){return{step:0,form:{}}},computed:{stepLength:function(){return this.data.length},stepNow:function(){return this.step+1},percentage:function(){return parseInt(this.stepNow/this.stepLength*100)||0}},methods:{onNextHander:function(){this.$emit("input",this.form);var t=this.stepNow;t<this.stepLength&&this.step++,t==this.stepLength&&this.$emit("atend")},onPrevHander:function(){this.step>0&&this.step--},onSubmitHander:function(){this.$emit("submit")},onAtendHander:function(){this.$emit("atend")},onClickRadioHander:function(){var t=this;this.autoNext&&setTimeout(function(){t.onNextHander()},500)},resetForm:function(){this.form=this.valueInit()},valueInit:function(){var t={};return this.data.forEach(function(e){t[e.key]=""}),t}},watch:{form:function(){this.$emit("input",this.form)},data:function(){this.form=this.valueInit()}},mounted:function(){var t=this.value,e=this.valueInit();"{}"!=JSON.stringify(t)&&t?this.form=Object.assign(e,t):this.form=e}}},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"xk-qs-form-body",style:"height: "+t.height},[n("transition-group",{attrs:{name:"el-fade-in-linear"}},t._l(t.data,function(e,r){return n("div",{directives:[{name:"show",rawName:"v-show",value:t.step==r,expression:"step == index"}],key:r,staticClass:"xk-qs-form-item"},[n("p",{staticClass:"xk-qs-title"},[t._v(t._s(e.title))]),t._v(" "),n("div",{on:{"~click":function(e){t.onClickRadioHander(e)}}},[n("el-radio-group",{staticClass:"xk-qs-radio-group",model:{value:t.form[e.key],callback:function(n){t.$set(t.form,e.key,n)},expression:"form[item.key]"}},t._l(e.radios,function(e,r){return n("el-radio",{key:r,staticClass:"xk-qs-radio-item",attrs:{label:r+","+e[0]}},[t._v(t._s(e[1]))])}))],1)])}))],1),t._v(" "),n("div",{staticClass:"xk-qs-form-footer"},[n("el-button",{staticClass:"xk-qs-btn-left",attrs:{type:"default"},on:{click:t.onPrevHander}},[t._v(t._s(t.prevBtnText))]),t._v(" "),t.stepNow!=t.stepLength?n("el-button",{staticClass:"xk-qs-btn-right",attrs:{type:"primary"},on:{click:t.onNextHander}},[t._v(t._s(t.nextBtnText))]):t._e(),t._v(" "),t.stepNow==t.stepLength?n("el-button",{staticClass:"xk-qs-btn-right",attrs:{type:"primary"},on:{click:t.onSubmitHander}},[t._v(t._s(t.submitBtnText))]):t._e(),t._v(" "),n("el-progress",{staticClass:"xs-qs-progress",attrs:{"text-inside":!0,"stroke-width":5,percentage:t.percentage}})],1)])},i=[],o={render:r,staticRenderFns:i};e.a=o}])});


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Vue Qs Form demo</title>
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
 8 |     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 9 |     <style>
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app" v-cloak>
14 |       <section class="hero is-primary is-bold">
15 |         <div class="hero-body">
16 |           <div class="container">
17 |             <h1 class="title">
18 |               Vue Qs Form
19 |             </h1>
20 |             <h2 class="subtitle">
21 |               Vue快速问卷表单
22 |             </h2>
23 |           </div>
24 |         </div>
25 |       </section>
26 |       <div class="section container">
27 |         <div class="columns is-multiline is-mobile">
28 |           <div class="column is-12 has-text-centered">
29 |             <p class="control">
30 |               <label class="label">Form: {{ form }} </label>
31 |               <vue-qs-Form v-model="form" :data="data"></vue-qs-form>
32 |             </p>
33 |           </div>
34 |         </div>
35 |         <hr>
36 |       </div>
37 |       <br>
38 |       <footer class="footer">
39 |         <div class="container">
40 |           <div class="content has-text-centered">
41 |             <p>
42 |               <strong>Vue Birthday Input</strong> by Xank. The source code is licensed
43 |               <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
44 |             </p>
45 |             <p>
46 |               <a href="https://www.npmjs.com/package/vue-qs-form" target="_blank">
47 |                 <img src="https://img.shields.io/npm/v/vue-qs-form.svg">
48 |                 <img src="https://img.shields.io/npm/dt/vue-qs-form.svg">
49 |                 <img src="https://img.shields.io/npm/dm/vue-qs-form.svg">
50 |                 <img src="https://img.shields.io/npm/l/vue-qs-form.svg">
51 |               </a>
52 |             </p>
53 |             <p>
54 |               <a href="https://github.com/xanke/vue-qs-form" target="_blank">
55 |                 <img src="https://img.shields.io/github/stars/xanke/vue-qs-form.svg?style=social&label=Star">
56 |                 <img src="https://img.shields.io/github/forks/xanke/vue-qs-form.svg?style=social&label=Fork">
57 |               </a>
58 |             </p>
59 |           </div>
60 |         </div>
61 |       </footer>
62 |     </div>
63 |     <script src="https://unpkg.com/vue"></script>
64 |     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
65 |     <script src="https://unpkg.com/vue-qs-form"></script>
66 |     <script>
67 |       Vue.use(VueQsForm.default)
68 |       new Vue({
69 |         el: '#app',
70 |         data: {
71 |           form: '',
72 |           data: [
73 |             {
74 |               'key': 'qa1',
75 |               'title': '问题一',
76 |               'radios': [
77 |                 [0, '否'],
78 |                 [1, '是']
79 |               ]
80 |             },
81 |             {
82 |               'key': 'qa2',
83 |               'title': '问题二',
84 |               'radios': [
85 |                 [0, '否'],
86 |                 [1, '是']
87 |               ]
88 |             }
89 |           ]
90 |         }
91 |       })
92 |     </script>
93 |   </body>
94 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-qs-form",
 3 |   "version": "0.5.2",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "async-validator": {
 8 |       "version": "1.8.1",
 9 |       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.1.tgz",
10 |       "integrity": "sha1-ZmV4jKOSaa93Dl7gLw5VfyQ40so=",
11 |       "dev": true,
12 |       "requires": {
13 |         "babel-runtime": "6.26.0"
14 |       }
15 |     },
16 |     "babel-helper-vue-jsx-merge-props": {
17 |       "version": "2.0.2",
18 |       "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz",
19 |       "integrity": "sha1-rOscNzWIJ54nVeoc/TXCI5T9M/g=",
20 |       "dev": true
21 |     },
22 |     "babel-runtime": {
23 |       "version": "6.26.0",
24 |       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
25 |       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
26 |       "dev": true,
27 |       "requires": {
28 |         "core-js": "2.5.1",
29 |         "regenerator-runtime": "0.11.0"
30 |       }
31 |     },
32 |     "core-js": {
33 |       "version": "2.5.1",
34 |       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
35 |       "integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=",
36 |       "dev": true
37 |     },
38 |     "deepmerge": {
39 |       "version": "1.5.2",
40 |       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
41 |       "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
42 |       "dev": true
43 |     },
44 |     "element-ui": {
45 |       "version": "2.0.7",
46 |       "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.0.7.tgz",
47 |       "integrity": "sha512-0pVUoYqq4ueEPDkcJBf3vYSqULA8LzubzkjnJyWyqxFSDEBvBCTn3voP3tNZrb1a7IU8yLjKhXCseS95TCHeLA==",
48 |       "dev": true,
49 |       "requires": {
50 |         "async-validator": "1.8.1",
51 |         "babel-helper-vue-jsx-merge-props": "2.0.2",
52 |         "deepmerge": "1.5.2",
53 |         "throttle-debounce": "1.0.1"
54 |       }
55 |     },
56 |     "regenerator-runtime": {
57 |       "version": "0.11.0",
58 |       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
59 |       "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==",
60 |       "dev": true
61 |     },
62 |     "throttle-debounce": {
63 |       "version": "1.0.1",
64 |       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.0.1.tgz",
65 |       "integrity": "sha1-2tD+Ew+drzcZ/eoz3Dao5rp/MLU=",
66 |       "dev": true
67 |     }
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-qs-form",
 3 |   "version": "0.5.5",
 4 |   "description": "Vue quick steps form tool",
 5 |   "author": "xank@qq.com",
 6 |   "main": "dist/vue-qs-form.min.js",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git+https://github.com/xanke/vue-qs-form.git"
10 |   },
11 |   "bugs": {
12 |     "url": "https://github.com/xanke/vue-qs-form/issues"
13 |   },
14 |   "keywords": [
15 |     "quick",
16 |     "input",
17 |     "text",
18 |     "steps",
19 |     "form",
20 |     "vue",
21 |     "vue.js"
22 |   ],
23 |   "homepage": "https://github.com/xanke/vue-qs-form",
24 |   "license": "MIT",
25 |   "dependencies": {},
26 |   "scripts": {
27 |     "test": "cross-env BABEL_ENV=test ./node_modules/.bin/karma start test/karma.config.js",
28 |     "test:watch": "cross-env BABEL_ENV=test ./node_modules/.bin/karma start test/karma.config.js --single-run=false",
29 |     "lint": "./node_modules/.bin/eslint --ext .js,.vue src spec",
30 |     "build": "./node_modules/.bin/webpack --hide-modules -p --progress",
31 |     "report-coverage": "codecov"
32 |   },
33 |   "devDependencies": {
34 |     "avoriaz": "^4.0.0",
35 |     "babel-core": "^6.26.0",
36 |     "babel-loader": "^7.1.2",
37 |     "babel-plugin-istanbul": "^4.1.4",
38 |     "babel-preset-env": "^1.6.0",
39 |     "chai": "^4.1.2",
40 |     "clean-webpack-plugin": "^0.1.16",
41 |     "codecov": "^2.3.0",
42 |     "cross-env": "^5.0.5",
43 |     "css-loader": "^0.28.7",
44 |     "element-ui": "^2.0.7",
45 |     "eslint": "^4.6.0",
46 |     "eslint-plugin-vue": "3.13.1",
47 |     "karma": "^1.7.1",
48 |     "karma-coverage": "^1.1.1",
49 |     "karma-mocha": "^1.3.0",
50 |     "karma-phantomjs-launcher": "^1.0.4",
51 |     "karma-sinon-chai": "^1.3.2",
52 |     "karma-sourcemap-loader": "^0.3.7",
53 |     "karma-spec-reporter": "^0.0.31",
54 |     "karma-webpack": "^2.0.4",
55 |     "mocha": "^3.5.0",
56 |     "phantomjs-prebuilt": "^2.1.15",
57 |     "sinon": "^3.2.1",
58 |     "sinon-chai": "^2.13.0",
59 |     "vue": "^2.4.2",
60 |     "vue-loader": "^13.0.4",
61 |     "vue-template-compiler": "^2.4.2",
62 |     "webpack": "^3.5.5"
63 |   },
64 |   "babel": {
65 |     "presets": [
66 |       [
67 |         "env",
68 |         {
69 |           "uglify": true,
70 |           "modules": false,
71 |           "targets": {
72 |             "browsers": [
73 |               "> 1%",
74 |               "last 2 versions",
75 |               "not ie <= 8"
76 |             ]
77 |           }
78 |         }
79 |       ]
80 |     ],
81 |     "env": {
82 |       "test": {
83 |         "plugins": [
84 |           "istanbul"
85 |         ]
86 |       }
87 |     }
88 |   },
89 |   "eslintConfig": {
90 |     "extends": [
91 |       "eslint:recommended",
92 |       "plugin:vue/recommended"
93 |     ]
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import component from './vue-qs-form.vue'
 2 | 
 3 | const plugin = {
 4 |   install: Vue => {
 5 |     Vue.component(component.name, component)
 6 |   }
 7 | }
 8 | 
 9 | component.install = plugin.install
10 | 
11 | export default component
12 | 


--------------------------------------------------------------------------------
/src/vue-qs-form.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="xk-qs-form-body" :style="'height: ' + height">
  4 |       <transition-group name="el-fade-in-linear">
  5 |         <div class="xk-qs-form-item" v-show="step == index" v-for="(item, index) in data" :key="index" >
  6 |           <p class="xk-qs-title">{{item.title}}</p>
  7 |           <div @click.once="onClickRadioHander">
  8 |             <el-radio-group class="xk-qs-radio-group" v-model="form[item.key]"> 
  9 |               <el-radio class="xk-qs-radio-item" :key="index" :label="index + ',' + iItem[0]" v-for="(iItem, index) in item.radios">{{iItem[1]}}</el-radio> 
 10 |             </el-radio-group>
 11 |           </div>
 12 |         </div>
 13 |       </transition-group>
 14 |     </div>
 15 |     <div class="xk-qs-form-footer">
 16 |       <el-button v-show="step > 0" class="xk-qs-btn-left" type="default" @click="onPrevHander">{{prevBtnText}}</el-button>
 17 |       <el-button v-if="stepNow != stepLength" class="xk-qs-btn-right" type="primary" @click="onNextHander">{{nextBtnText}}</el-button>
 18 |       <el-button v-if="stepNow == stepLength" class="xk-qs-btn-right" type="primary" @click="onSubmitHander">{{submitBtnText}}</el-button>
 19 |       <el-progress class="xs-qs-progress" :text-inside="true" :stroke-width="5" :percentage="percentage"></el-progress>
 20 |     </div>
 21 |   </div>
 22 | </template>
 23 | 
 24 | <script>
 25 | export default {
 26 |   name: 'vue-qs-form',
 27 |   props: {
 28 |     data: {
 29 |       required: true,
 30 |       default: '',
 31 |       type: [Array, Object]
 32 |     },
 33 |     height: {
 34 |       default: '250px',
 35 |       type: String
 36 |     },
 37 |     prevBtnText: {
 38 |       default: '上一步',
 39 |       type: String
 40 |     },
 41 |     nextBtnText: {
 42 |       default: '下一步',
 43 |       type: String
 44 |     },
 45 |     submitBtnText: {
 46 |       default: '提交',
 47 |       type: String
 48 |     },
 49 |     value: {
 50 |       default: '',
 51 |       required: false,
 52 |       type: [Object, String, Array]
 53 |     },
 54 |     autoNext: {
 55 |       default: true,
 56 |       type: Boolean
 57 |     }
 58 |   },
 59 |   data: () => ({
 60 |     step: 0,
 61 |     form: {}
 62 |   }),
 63 |   computed: {
 64 |     stepLength() {
 65 |       return this.data.length
 66 |     },
 67 |     stepNow() {
 68 |       return this.step + 1
 69 |     },
 70 |     percentage() {
 71 |       let percentage = parseInt(this.step / this.stepLength * 100) || 0
 72 |       return percentage
 73 |     }
 74 |   },
 75 |   methods: {
 76 |     // 点击下一步
 77 |     onNextHander() {
 78 |       this.$emit('input', this.form)
 79 |       let stepNow = this.stepNow
 80 |       if (stepNow < this.stepLength) {
 81 |         this.step++
 82 |       }
 83 |       if (stepNow == this.stepLength) {
 84 |         this.$emit('atend')
 85 |       }
 86 |     },
 87 |     // 点击上一部
 88 |     onPrevHander() {
 89 |       let step = this.step
 90 |       if (step > 0) {
 91 |         this.step--
 92 |       }
 93 |     },
 94 |     // 点击完成
 95 |     onSubmitHander() {
 96 |       this.$emit('submit')
 97 |     },
 98 |     // 到达最后
 99 |     onAtendHander() {
100 |       this.$emit('atend')
101 |     },
102 |     onClickRadioHander() {
103 |       if (this.autoNext) {
104 |         setTimeout(() => {
105 |           this.onNextHander()
106 |         }, 500)
107 |       }
108 |     },
109 |     //重置表单
110 |     resetForm() {
111 |       this.step = 0
112 |       this.form = this.valueInit()
113 |     },
114 |     //表单初始化
115 |     valueInit() {
116 |       let form = {}
117 |       this.data.forEach(item => {
118 |         form[item.key] = ''
119 |       })
120 |       return form
121 |     }
122 |   },
123 |   watch: {
124 |     form() {
125 |       this.$emit('input', this.form)
126 |     },
127 |     data() {
128 |       this.form = this.valueInit()
129 |     }
130 |   },
131 |   mounted() {
132 |     let value = this.value
133 |     let form = this.valueInit()
134 |     if (JSON.stringify(value) == '{}' || !value) {
135 |       this.form = form
136 |     } else {
137 |       this.form = Object.assign(form, value)
138 |     }
139 |   }
140 | }
141 | </script>
142 | 
143 | <style>
144 | .xk-qs-form-body {
145 |   position: relative;
146 |   overflow: auto;
147 | }
148 | .xk-qs-form-item {
149 |   position: absolute;
150 |   height: 100%;
151 |   width: 100%;
152 | }
153 | .xk-qs-title {
154 |   color: #000;
155 |   font-weight: block;
156 | }
157 | .xk-qs-radio-group {
158 |   width: 100% !important;
159 | }
160 | .xk-qs-radio-item {
161 |   display: block !important;
162 |   margin-left: 0px !important;
163 |   width: 100% !important;
164 |   margin-bottom: 0px !important;
165 |   padding: 12px 10px;
166 | }
167 | .xk-qs-radio-item:hover {
168 |   background-color: rgb(245, 245, 245) !important;
169 | }
170 | .xk-qs-radio-item .el-radio__label {
171 |   white-space: normal !important;
172 |   display: inline-block;
173 |   line-height: 1.5;
174 |   padding-left: 25px;
175 | }
176 | .xk-qs-radio-item .el-radio__input {
177 |   height: 14px;
178 |   position: absolute;
179 |   top: 50%;
180 |   margin-top: -7px;
181 | }
182 | .xk-qs-form-footer {
183 |   margin-top: 45px;
184 | }
185 | .xk-qs-btn-left {
186 |   float: left;
187 | }
188 | .xk-qs-btn-right {
189 |   float: right;
190 | }
191 | .xs-qs-progress {
192 |   display: inline;
193 | }
194 | .xs-qs-progress .el-progress-bar__innerText {
195 |   display: none !important;
196 | }
197 | </style>


--------------------------------------------------------------------------------
/test/karma.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env node, mocha */
 2 | var path = require('path')
 3 | 
 4 | module.exports = config => {
 5 |   config.set({
 6 |     browsers: ['PhantomJS'],
 7 |     frameworks: ['mocha', 'sinon-chai'],
 8 |     reporters: ['spec', 'coverage'],
 9 |     files: ['specs/*.spec.js'],
10 |     preprocessors: {
11 |       './specs/*.spec.js': ['webpack', 'sourcemap']
12 |     },
13 |     webpack: {
14 |       devtool: '#inline-source-map',
15 |       resolve: {
16 |         extensions: ['.js', '.vue'],
17 |         alias: {
18 |           'vue$': 'vue/dist/vue.esm.js',
19 |           '@': path.resolve(__dirname, '../src')
20 |         }
21 |       },
22 |       module: {
23 |         rules: [
24 |           {
25 |             test: /\.vue$/,
26 |             loader: 'vue-loader',
27 |             options: {
28 |               esModule: false
29 |             }
30 |           },
31 |           {
32 |             test: /\.js$/,
33 |             loader: 'babel-loader',
34 |             exclude: /node_modules/
35 |           }
36 |         ]
37 |       }
38 |     },
39 |     webpackMiddleware: {
40 |       noInfo: true
41 |     },
42 |     coverageReporter: {
43 |       dir: './coverage',
44 |       reporters: [
45 |         { type: 'lcov', subdir: '.' },
46 |         { type: 'text-summary' }
47 |       ]
48 |     },
49 |     singleRun: true
50 |   })
51 | }
52 | 


--------------------------------------------------------------------------------
/test/specs/vue-qs-form.spec.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env mocha */
 2 | import Vue  from 'vue'
 3 | import ElementUI from 'element-ui'
 4 | import { expect } from 'chai'
 5 | import { mount } from 'avoriaz'
 6 | import vueQsForm from '@/vue-qs-form'
 7 | 
 8 | Vue.use(ElementUI)
 9 | 
10 | describe('vue-birthday-input.vue', () => {
11 |   it('data测试', () => {
12 |     let data = [
13 |       {
14 |         key: 'qa1',
15 |         title: '问题一',
16 |         radios: [
17 |           [0, '否'],
18 |           [1, '是']
19 |         ]
20 |       },
21 |       {
22 |         key: 'qa2',
23 |         title: '问题二',
24 |         radios: [
25 |           [0, '否'],
26 |           [1, '是']
27 |         ]
28 |       }
29 |     ]
30 |     const wrapper = mount(vueQsForm, { propsData: { data: data }})
31 |     let ret = JSON.stringify(wrapper.data().form)
32 | 
33 |     expect(ret).to.equal('{"qa1":"","qa2":""}')
34 |   })
35 | 
36 | })
37 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | const path = require('path')
 3 | const CleanWebpackPlugin = require('clean-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   context: __dirname,
 7 |   resolve: {
 8 |     modules: [
 9 |       path.resolve(__dirname, 'src'),
10 |       'node_modules'
11 |     ],
12 |     alias: {
13 |       'vue$': 'vue/dist/vue.esm.js'
14 |     },
15 |     extensions: ['.js', '.json', '.vue']
16 |   },
17 |   entry: './src/index.js',
18 |   externals: {
19 |   },
20 |   output: {
21 |     path: path.resolve(__dirname, 'dist'),
22 |     filename: "vue-qs-form.min.js",
23 |     library: 'VueQsForm',
24 |     libraryTarget: 'umd',
25 |     umdNamedDefine: true
26 |   },
27 |   module: {
28 |     rules: [
29 |       {
30 |         test: /\.vue$/,
31 |         loader: 'vue-loader'
32 |       },
33 |       {
34 |         test: /\.js$/,
35 |         loader: 'babel-loader',
36 |         exclude: path.resolve(__dirname, 'node_modules')
37 |       }
38 |     ]
39 |   },
40 |   plugins: [
41 |     new CleanWebpackPlugin(['./dist'])
42 |   ],
43 |   devtool: false,
44 |   performance: {
45 |     hints: false
46 |   }
47 | }


--------------------------------------------------------------------------------