├── .editorconfig
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── build
    └── rollup.config.js
├── dist
    ├── vue-step.esm.js
    ├── vue-step.min.js
    └── vue-step.umd.js
├── example
    └── index.vue
├── package.json
├── screenshot
    └── demo.png
└── src
    ├── index.js
    └── vue-step.vue


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | package-lock.json
 4 | npm-debug.log
 5 | yarn-error.log
 6 | 
 7 | # Editor directories and files
 8 | .idea
 9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs
2 | build
3 | .editorconfig
4 | .gitignore
5 | package-lock.json
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 LiLong
 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-step
 2 | 
 3 | > 基于Vue.js的移动端步骤导航组件 Mobile Step Navigation Component Based On Vue.js
 4 | 
 5 | [![NPM](https://nodei.co/npm/vue-step.png)](https://nodei.co/npm/vue-step/)
 6 | 
 7 | ## Installation
 8 | 
 9 | ``` bash
10 | npm i vue-step -S
11 | ```
12 | 
13 | ## API
14 | 
15 | | Param     | Description       | Type     | Default |
16 | | --------- | ----------------- | -------- | ------- |
17 | | now-step  | The current step, The starting value is 1. | `Number` | - |
18 | | step-list | Name of all steps | `Array` | - |
19 | | active-color | Active status color | `String` | '#1fb11d' |
20 | | style-type | You can set 'style1' or 'style2' | `String`  | 'style1' |
21 | | direction | You can set 'horizontal' or 'vertical' | `String` | 'horizontal' |
22 | | @selected | Event issued when an item is selected / clicked | `Event` | - |
23 | 
24 | ## Usage
25 | 
26 | ``` bash
27 | # example
28 | <template>
29 |   <div id="app">
30 |     <vue-step :now-step="nowStep" :step-list="stepList"></vue-step>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import vueStep from 'vue-step'
36 | 
37 | export default {
38 |   name: 'app',
39 |   data () {
40 |     return {
41 |       nowStep: 2,
42 |       stepList: [
43 |         'First Step',
44 |         'Second Step',
45 |         'Third Step',
46 |         'Four Step'
47 |       ]
48 |     }
49 |   },
50 |   components: {
51 |     vueStep
52 |   }
53 | }
54 | </script>
55 | ```
56 | 
57 | ## Demo Screenshot
58 | 
59 | ![Demo Screenshot](./screenshot/demo.png)
60 | 
61 | ## License
62 | 
63 | MIT
64 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // rollup.config.js
 2 | import vue from 'rollup-plugin-vue';
 3 | import buble from 'rollup-plugin-buble';
 4 | import uglify from 'rollup-plugin-uglify-es';
 5 | import minimist from 'minimist';
 6 | 
 7 | const argv = minimist(process.argv.slice(2));
 8 | 
 9 | const config = {
10 |     input: 'src/index.js',
11 |     output: {
12 |         name: 'VueStep',
13 |         exports: 'named',
14 |     },
15 |     plugins: [
16 |         vue({
17 |             css: true,
18 |             compileTemplate: true,
19 |         }),
20 |         buble(),
21 |     ],
22 | };
23 | 
24 | // Only minify browser (iife) version
25 | if (argv.format === 'iife') {
26 |     config.plugins.push(uglify());
27 | }
28 | 
29 | export default config;
30 | 


--------------------------------------------------------------------------------
/dist/vue-step.esm.js:
--------------------------------------------------------------------------------
  1 | (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .v-step-warp-horizontal[data-v-3500aeb9] { position: relative; padding: 10px 0; z-index: 2; } .v-step-warp-horizontal .v-step-progress-bg[data-v-3500aeb9] { position: absolute; width: 100%; height: 4px; bottom: 22px; background-color: #ddd; } .v-step-warp-horizontal .v-step-progress-value[data-v-3500aeb9] { position: inherit; top: 0; left: 0; height: inherit; } .v-step-list[data-v-3500aeb9] { position: relative; display: -webkit-flex; display: flex; cursor: pointer; user-select: none; } .v-step-list[data-v-3500aeb9], .v-step-item[data-v-3500aeb9] { margin: 0; padding: 0; list-style-type: none; } .v-step-warp-horizontal .v-step-list[data-v-3500aeb9] { justify-content: space-around; text-align: center; } .v-step-item-label[data-v-3500aeb9] { font-size: 12px; color: #666; } .v-step-item-number[data-v-3500aeb9] { width: 18px; height: 18px; line-height: 18px; font-size: 12px; border-radius: 50%; color: #666; background-color: #ddd; } .v-step-warp-horizontal .v-step-item-label[data-v-3500aeb9] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v-step-warp-horizontal .v-step-item-number[data-v-3500aeb9] { margin: 5px auto; } .v-step-warp-horizontal.style2 .v-step-progress-bg[data-v-3500aeb9] { height: 2px; bottom: 19px; } .v-step-warp-horizontal.style2 .v-step-item-number[data-v-3500aeb9] { width: 10px; height: 10px; line-height: 10px; } .v-step-warp-vertical[data-v-3500aeb9] { position: relative; padding: 0; z-index: 2; } .v-step-warp-vertical .v-step-progress-bg[data-v-3500aeb9] { position: absolute; width: 4px; height: 100%; top: 0; left: 15px; background-color: #ddd; } .v-step-warp-vertical .v-step-progress-value[data-v-3500aeb9] { position: absolute; top: 0; left: 0; width: inherit; } .v-step-warp-vertical .v-step-list[data-v-3500aeb9] { height: inherit; flex-direction: column; padding-left: 8px; } .v-step-warp-vertical .v-step-item[data-v-3500aeb9] { display: -webkit-flex; display: flex; height: 25%; align-items: center; } .v-step-warp-vertical .v-step-item-number[data-v-3500aeb9] { text-align: center; } .v-step-warp-vertical .v-step-item-label[data-v-3500aeb9] { position: absolute; order: 1; padding-left: 34px; } .v-step-warp-vertical.style2 .v-step-progress-bg[data-v-3500aeb9] { width: 2px; } .v-step-warp-vertical.style2 .v-step-item-number[data-v-3500aeb9] { width: 10px; height: 10px; line-height: 10px; margin-left: 3px; } .v-step-warp-vertical.style2 .v-step-item-label[data-v-3500aeb9] { padding-top: 0; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
  2 | 
  3 | 
  4 | 
  5 | 
  6 | 
  7 | 
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | 
 14 | 
 15 | 
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 | 
 25 | 
 26 | 
 27 | 
 28 | 
 29 | 
 30 | 
 31 | 
 32 | 
 33 | var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[("v-step-warp-" + (_vm.direction)), _vm.styleType]},[_c('div',{staticClass:"v-step-progress-bg"},[_c('div',{staticClass:"v-step-progress-value",style:(_vm.progressStyle)})]),_vm._v(" "),_c('ul',{staticClass:"v-step-list"},_vm._l((_vm.stepList),function(label,index){return _c('li',{key:index,staticClass:"v-step-item",style:(_vm.horizontalItemWidth),on:{"click":function($event){_vm.selectItem(index);}}},[_c('label',{staticClass:"v-step-item-label"},[_vm._v(" "+_vm._s(label)+" ")]),_vm._v(" "),_c('div',{staticClass:"v-step-item-number",style:(_vm.itemNumberStyle(index))},[_vm._v(" "+_vm._s(_vm.showItemNumber(index))+" ")])])}))])},staticRenderFns: [],_scopeId: 'data-v-3500aeb9',
 34 |   name: 'vue-step',
 35 |   props: {
 36 |     nowStep: {
 37 |       type: Number,
 38 |       required: true
 39 |     },
 40 |     stepList: {
 41 |       type: Array,
 42 |       required: true
 43 |     },
 44 |     activeColor: {
 45 |       type: String,
 46 |       default: '#1fb11d'
 47 |     },
 48 |     styleType: {
 49 |       type: String,
 50 |       default: 'style1',
 51 |       validator: function (value) {
 52 |         return ['style1', 'style2'].indexOf(value) !== -1
 53 |       }
 54 |     },
 55 |     direction: {
 56 |       type: String,
 57 |       default: 'horizontal'
 58 |     }
 59 |   },
 60 |   computed: {
 61 |     stepItemWidth: function stepItemWidth () {
 62 |       return 100 / this.stepList.length
 63 |     },
 64 |     horizontalItemWidth: function horizontalItemWidth () {
 65 |       return this.direction === 'vertical'
 66 |         ? ''
 67 |         : { width: this.stepItemWidth + '%' }
 68 |     },
 69 |     progressStyle: function progressStyle () {
 70 |       var oStyle = {
 71 |         'background-color': this.activeColor
 72 |       };
 73 |       if (this.direction === 'vertical') {
 74 |         oStyle.height = this.stepItemWidth * this.nowStep + '%';
 75 |       } else {
 76 |         oStyle.width = this.stepItemWidth * this.nowStep + '%';
 77 |       }
 78 |       return oStyle
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     itemNumberStyle: function itemNumberStyle (index) {
 83 |       var style = '';
 84 |       if (index < this.nowStep) {
 85 |         style = {
 86 |           'background-color': this.activeColor,
 87 |           'color': '#fff'
 88 |         };
 89 |       }
 90 |       return style
 91 |     },
 92 |     showItemNumber: function showItemNumber (index) {
 93 |       return this.styleType !== 'style2' ? index + 1 : ''
 94 |     },
 95 |     selectItem: function selectItem (itemIndex) {
 96 |       this.$emit('selected', this.showItemNumber(itemIndex));
 97 |     }
 98 |   }
 99 | }
100 | 
101 | // Import vue component
102 | 
103 | // install function executed by Vue.use()
104 | function install(Vue) {
105 | 	if (install.installed) { return; }
106 | 	install.installed = true;
107 | 	Vue.component('VueStep', component);
108 | }
109 | 
110 | // Create module definition for Vue.use()
111 | var plugin = {
112 | 	install: install,
113 | };
114 | 
115 | // To auto-install when vue is found
116 | var GlobalVue = null;
117 | if (typeof window !== 'undefined') {
118 | 	GlobalVue = window.Vue;
119 | } else if (typeof global !== 'undefined') {
120 | 	GlobalVue = global.Vue;
121 | }
122 | if (GlobalVue) {
123 | 	GlobalVue.use(plugin);
124 | }
125 | 
126 | // It's possible to expose named exports when writing components that can
127 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
128 | // export const RollupDemoDirective = component;
129 | 
130 | export default component;
131 | export { install };
132 | 


--------------------------------------------------------------------------------
/dist/vue-step.min.js:
--------------------------------------------------------------------------------
1 | var VueStep=function(t){"use strict";function e(t){e.installed||(e.installed=!0,t.component("VueStep",i))}!function(){if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style"),i=" .v-step-warp-horizontal[data-v-3500aeb9] { position: relative; padding: 10px 0; z-index: 2; } .v-step-warp-horizontal .v-step-progress-bg[data-v-3500aeb9] { position: absolute; width: 100%; height: 4px; bottom: 22px; background-color: #ddd; } .v-step-warp-horizontal .v-step-progress-value[data-v-3500aeb9] { position: inherit; top: 0; left: 0; height: inherit; } .v-step-list[data-v-3500aeb9] { position: relative; display: -webkit-flex; display: flex; cursor: pointer; user-select: none; } .v-step-list[data-v-3500aeb9], .v-step-item[data-v-3500aeb9] { margin: 0; padding: 0; list-style-type: none; } .v-step-warp-horizontal .v-step-list[data-v-3500aeb9] { justify-content: space-around; text-align: center; } .v-step-item-label[data-v-3500aeb9] { font-size: 12px; color: #666; } .v-step-item-number[data-v-3500aeb9] { width: 18px; height: 18px; line-height: 18px; font-size: 12px; border-radius: 50%; color: #666; background-color: #ddd; } .v-step-warp-horizontal .v-step-item-label[data-v-3500aeb9] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v-step-warp-horizontal .v-step-item-number[data-v-3500aeb9] { margin: 5px auto; } .v-step-warp-horizontal.style2 .v-step-progress-bg[data-v-3500aeb9] { height: 2px; bottom: 19px; } .v-step-warp-horizontal.style2 .v-step-item-number[data-v-3500aeb9] { width: 10px; height: 10px; line-height: 10px; } .v-step-warp-vertical[data-v-3500aeb9] { position: relative; padding: 0; z-index: 2; } .v-step-warp-vertical .v-step-progress-bg[data-v-3500aeb9] { position: absolute; width: 4px; height: 100%; top: 0; left: 15px; background-color: #ddd; } .v-step-warp-vertical .v-step-progress-value[data-v-3500aeb9] { position: absolute; top: 0; left: 0; width: inherit; } .v-step-warp-vertical .v-step-list[data-v-3500aeb9] { height: inherit; flex-direction: column; padding-left: 8px; } .v-step-warp-vertical .v-step-item[data-v-3500aeb9] { display: -webkit-flex; display: flex; height: 25%; align-items: center; } .v-step-warp-vertical .v-step-item-number[data-v-3500aeb9] { text-align: center; } .v-step-warp-vertical .v-step-item-label[data-v-3500aeb9] { position: absolute; order: 1; padding-left: 34px; } .v-step-warp-vertical.style2 .v-step-progress-bg[data-v-3500aeb9] { width: 2px; } .v-step-warp-vertical.style2 .v-step-item-number[data-v-3500aeb9] { width: 10px; height: 10px; line-height: 10px; margin-left: 3px; } .v-step-warp-vertical.style2 .v-step-item-label[data-v-3500aeb9] { padding-top: 0; } ";e.type="text/css",e.styleSheet?e.styleSheet.cssText=i:e.appendChild(document.createTextNode(i)),t.appendChild(e)}}();var i={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:["v-step-warp-"+t.direction,t.styleType]},[i("div",{staticClass:"v-step-progress-bg"},[i("div",{staticClass:"v-step-progress-value",style:t.progressStyle})]),t._v(" "),i("ul",{staticClass:"v-step-list"},t._l(t.stepList,function(e,a){return i("li",{key:a,staticClass:"v-step-item",style:t.horizontalItemWidth,on:{click:function(e){t.selectItem(a)}}},[i("label",{staticClass:"v-step-item-label"},[t._v(" "+t._s(e)+" ")]),t._v(" "),i("div",{staticClass:"v-step-item-number",style:t.itemNumberStyle(a)},[t._v(" "+t._s(t.showItemNumber(a))+" ")])])}))])},staticRenderFns:[],_scopeId:"data-v-3500aeb9",name:"vue-step",props:{nowStep:{type:Number,required:!0},stepList:{type:Array,required:!0},activeColor:{type:String,default:"#1fb11d"},styleType:{type:String,default:"style1",validator:function(t){return-1!==["style1","style2"].indexOf(t)}},direction:{type:String,default:"horizontal"}},computed:{stepItemWidth:function(){return 100/this.stepList.length},horizontalItemWidth:function(){return"vertical"===this.direction?"":{width:this.stepItemWidth+"%"}},progressStyle:function(){var t={"background-color":this.activeColor};return"vertical"===this.direction?t.height=this.stepItemWidth*this.nowStep+"%":t.width=this.stepItemWidth*this.nowStep+"%",t}},methods:{itemNumberStyle:function(t){var e="";return t<this.nowStep&&(e={"background-color":this.activeColor,color:"#fff"}),e},showItemNumber:function(t){return"style2"!==this.styleType?t+1:""},selectItem:function(t){this.$emit("selected",this.showItemNumber(t))}}},a={install:e},s=null;return"undefined"!=typeof window?s=window.Vue:"undefined"!=typeof global&&(s=global.Vue),s&&s.use(a),t.install=e,t.default=i,t}({});
2 | 


--------------------------------------------------------------------------------
/dist/vue-step.umd.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 |   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  3 |   typeof define === 'function' && define.amd ? define(['exports'], factory) :
  4 |   (factory((global.VueStep = {})));
  5 | }(this, (function (exports) { 'use strict';
  6 | 
  7 |   (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" .v-step-warp-horizontal[data-v-3500aeb9] { position: relative; padding: 10px 0; z-index: 2; } .v-step-warp-horizontal .v-step-progress-bg[data-v-3500aeb9] { position: absolute; width: 100%; height: 4px; bottom: 22px; background-color: #ddd; } .v-step-warp-horizontal .v-step-progress-value[data-v-3500aeb9] { position: inherit; top: 0; left: 0; height: inherit; } .v-step-list[data-v-3500aeb9] { position: relative; display: -webkit-flex; display: flex; cursor: pointer; user-select: none; } .v-step-list[data-v-3500aeb9], .v-step-item[data-v-3500aeb9] { margin: 0; padding: 0; list-style-type: none; } .v-step-warp-horizontal .v-step-list[data-v-3500aeb9] { justify-content: space-around; text-align: center; } .v-step-item-label[data-v-3500aeb9] { font-size: 12px; color: #666; } .v-step-item-number[data-v-3500aeb9] { width: 18px; height: 18px; line-height: 18px; font-size: 12px; border-radius: 50%; color: #666; background-color: #ddd; } .v-step-warp-horizontal .v-step-item-label[data-v-3500aeb9] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v-step-warp-horizontal .v-step-item-number[data-v-3500aeb9] { margin: 5px auto; } .v-step-warp-horizontal.style2 .v-step-progress-bg[data-v-3500aeb9] { height: 2px; bottom: 19px; } .v-step-warp-horizontal.style2 .v-step-item-number[data-v-3500aeb9] { width: 10px; height: 10px; line-height: 10px; } .v-step-warp-vertical[data-v-3500aeb9] { position: relative; padding: 0; z-index: 2; } .v-step-warp-vertical .v-step-progress-bg[data-v-3500aeb9] { position: absolute; width: 4px; height: 100%; top: 0; left: 15px; background-color: #ddd; } .v-step-warp-vertical .v-step-progress-value[data-v-3500aeb9] { position: absolute; top: 0; left: 0; width: inherit; } .v-step-warp-vertical .v-step-list[data-v-3500aeb9] { height: inherit; flex-direction: column; padding-left: 8px; } .v-step-warp-vertical .v-step-item[data-v-3500aeb9] { display: -webkit-flex; display: flex; height: 25%; align-items: center; } .v-step-warp-vertical .v-step-item-number[data-v-3500aeb9] { text-align: center; } .v-step-warp-vertical .v-step-item-label[data-v-3500aeb9] { position: absolute; order: 1; padding-left: 34px; } .v-step-warp-vertical.style2 .v-step-progress-bg[data-v-3500aeb9] { width: 2px; } .v-step-warp-vertical.style2 .v-step-item-number[data-v-3500aeb9] { width: 10px; height: 10px; line-height: 10px; margin-left: 3px; } .v-step-warp-vertical.style2 .v-step-item-label[data-v-3500aeb9] { padding-top: 0; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | 
 14 | 
 15 | 
 16 | 
 17 | 
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 
 23 | 
 24 | 
 25 | 
 26 | 
 27 | 
 28 | 
 29 | 
 30 | 
 31 | 
 32 | 
 33 | 
 34 | 
 35 | 
 36 | 
 37 | 
 38 | 
 39 |   var component = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[("v-step-warp-" + (_vm.direction)), _vm.styleType]},[_c('div',{staticClass:"v-step-progress-bg"},[_c('div',{staticClass:"v-step-progress-value",style:(_vm.progressStyle)})]),_vm._v(" "),_c('ul',{staticClass:"v-step-list"},_vm._l((_vm.stepList),function(label,index){return _c('li',{key:index,staticClass:"v-step-item",style:(_vm.horizontalItemWidth),on:{"click":function($event){_vm.selectItem(index);}}},[_c('label',{staticClass:"v-step-item-label"},[_vm._v(" "+_vm._s(label)+" ")]),_vm._v(" "),_c('div',{staticClass:"v-step-item-number",style:(_vm.itemNumberStyle(index))},[_vm._v(" "+_vm._s(_vm.showItemNumber(index))+" ")])])}))])},staticRenderFns: [],_scopeId: 'data-v-3500aeb9',
 40 |     name: 'vue-step',
 41 |     props: {
 42 |       nowStep: {
 43 |         type: Number,
 44 |         required: true
 45 |       },
 46 |       stepList: {
 47 |         type: Array,
 48 |         required: true
 49 |       },
 50 |       activeColor: {
 51 |         type: String,
 52 |         default: '#1fb11d'
 53 |       },
 54 |       styleType: {
 55 |         type: String,
 56 |         default: 'style1',
 57 |         validator: function (value) {
 58 |           return ['style1', 'style2'].indexOf(value) !== -1
 59 |         }
 60 |       },
 61 |       direction: {
 62 |         type: String,
 63 |         default: 'horizontal'
 64 |       }
 65 |     },
 66 |     computed: {
 67 |       stepItemWidth: function stepItemWidth () {
 68 |         return 100 / this.stepList.length
 69 |       },
 70 |       horizontalItemWidth: function horizontalItemWidth () {
 71 |         return this.direction === 'vertical'
 72 |           ? ''
 73 |           : { width: this.stepItemWidth + '%' }
 74 |       },
 75 |       progressStyle: function progressStyle () {
 76 |         var oStyle = {
 77 |           'background-color': this.activeColor
 78 |         };
 79 |         if (this.direction === 'vertical') {
 80 |           oStyle.height = this.stepItemWidth * this.nowStep + '%';
 81 |         } else {
 82 |           oStyle.width = this.stepItemWidth * this.nowStep + '%';
 83 |         }
 84 |         return oStyle
 85 |       }
 86 |     },
 87 |     methods: {
 88 |       itemNumberStyle: function itemNumberStyle (index) {
 89 |         var style = '';
 90 |         if (index < this.nowStep) {
 91 |           style = {
 92 |             'background-color': this.activeColor,
 93 |             'color': '#fff'
 94 |           };
 95 |         }
 96 |         return style
 97 |       },
 98 |       showItemNumber: function showItemNumber (index) {
 99 |         return this.styleType !== 'style2' ? index + 1 : ''
100 |       },
101 |       selectItem: function selectItem (itemIndex) {
102 |         this.$emit('selected', this.showItemNumber(itemIndex));
103 |       }
104 |     }
105 |   }
106 | 
107 |   // Import vue component
108 | 
109 |   // install function executed by Vue.use()
110 |   function install(Vue) {
111 |   	if (install.installed) { return; }
112 |   	install.installed = true;
113 |   	Vue.component('VueStep', component);
114 |   }
115 | 
116 |   // Create module definition for Vue.use()
117 |   var plugin = {
118 |   	install: install,
119 |   };
120 | 
121 |   // To auto-install when vue is found
122 |   var GlobalVue = null;
123 |   if (typeof window !== 'undefined') {
124 |   	GlobalVue = window.Vue;
125 |   } else if (typeof global !== 'undefined') {
126 |   	GlobalVue = global.Vue;
127 |   }
128 |   if (GlobalVue) {
129 |   	GlobalVue.use(plugin);
130 |   }
131 | 
132 |   // It's possible to expose named exports when writing components that can
133 |   // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
134 |   // export const RollupDemoDirective = component;
135 | 
136 |   exports.install = install;
137 |   exports.default = component;
138 | 
139 |   Object.defineProperty(exports, '__esModule', { value: true });
140 | 
141 | })));
142 | 


--------------------------------------------------------------------------------
/example/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h4>Horizontal</h4>
 4 |     <p>style1:</p>
 5 |     <vue-step
 6 |       :now-step="nowStep"
 7 |       :step-list="stepList"
 8 |     />
 9 |     <p>style2:</p>
10 |     <vue-step
11 |       :now-step="nowStep"
12 |       :step-list="stepList"
13 |       style-type="style2"
14 |     />
15 | 
16 |     <h4>Vertical</h4>
17 |     <p>style1:</p>
18 |     <vue-step
19 |       class="initHeight"
20 |       :now-step="nowStep"
21 |       :step-list="stepList"
22 |       direction="vertical"
23 |     />
24 |     <p>style2:</p>
25 |     <vue-step
26 |       class="initHeight"
27 |       :now-step="nowStep"
28 |       :step-list="stepList"
29 |       direction="vertical"
30 |       style-type="style2"
31 |     />
32 | 
33 |     <h4>With @selected event</h4>
34 |     <p>Event issued when an item is selected / clicked</p>
35 |     <vue-step
36 |       :now-step="nowStep"
37 |       :step-list="stepList"
38 |       @selected="item => nowStep = item"
39 |     />
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | import VueStep from '../src/vue-step.vue'
45 | 
46 | export default {
47 |   name: 'app',
48 |   data () {
49 |     return {
50 |       nowStep: 2,
51 |       stepList: [
52 |         'First Step',
53 |         'Second Step',
54 |         'Third Step',
55 |         'Four Step'
56 |       ]
57 |     }
58 |   },
59 |   components: {
60 |     VueStep
61 |   }
62 | }
63 | </script>
64 | 
65 | <style>
66 | body {
67 |   margin: 8px;
68 | }
69 | #app {
70 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
71 |   -webkit-font-smoothing: antialiased;
72 |   -moz-osx-font-smoothing: grayscale;
73 | }
74 | .initHeight {
75 |   height: 180px;
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-step",
 3 |   "version": "1.3.0",
 4 |   "description": "Mobile Step Navigation Component Based On Vue.js",
 5 |   "author": "justli <justlilong@outlook.com>",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "main": "dist/vue-step.umd.js",
 9 |   "module": "dist/vue-step.esm.js",
10 |   "unpkg": "dist/vue-step.min.js",
11 |   "browser": {
12 |     "./sfc": "src/vue-step.vue"
13 |   },
14 |   "scripts": {
15 |     "example": "vue serve ./example/index.vue --open",
16 |     "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
17 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-step.umd.js",
18 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-step.esm.js",
19 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-step.min.js"
20 |   },
21 |   "dependencies": {},
22 |   "devDependencies": {
23 |     "minimist": "^1.2.0",
24 |     "rollup": "^0.57.1",
25 |     "rollup-plugin-buble": "^0.19.2",
26 |     "rollup-plugin-uglify-es": "0.0.1",
27 |     "rollup-plugin-vue": "^3.0.0",
28 |     "vue": "^2.5.16",
29 |     "vue-template-compiler": "^2.5.16"
30 |   },
31 |   "keywords": [
32 |     "步骤条",
33 |     "步骤导航",
34 |     "移动端",
35 |     "vue component",
36 |     "Mobile Step Navigation",
37 |     "Vue"
38 |   ],
39 |   "homepage": "https://github.com/luffyli/vue-step",
40 |   "bugs": {
41 |     "url": "https://github.com/luffyli/vue-step/issues"
42 |   },
43 |   "repository": {
44 |     "type": "git",
45 |     "url": "git+https://github.com/luffyli/vue-step.git"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/screenshot/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luffyli/vue-step/6070bfcc32103f1a7a67c62414ba777c330c335e/screenshot/demo.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from './vue-step.vue';
 3 | 
 4 | // install function executed by Vue.use()
 5 | export function install(Vue) {
 6 | 	if (install.installed) return;
 7 | 	install.installed = true;
 8 | 	Vue.component('VueStep', component);
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 | 	install,
14 | };
15 | 
16 | // To auto-install when vue is found
17 | let GlobalVue = null;
18 | if (typeof window !== 'undefined') {
19 | 	GlobalVue = window.Vue;
20 | } else if (typeof global !== 'undefined') {
21 | 	GlobalVue = global.Vue;
22 | }
23 | if (GlobalVue) {
24 | 	GlobalVue.use(plugin);
25 | }
26 | 
27 | // To allow use as module (npm/webpack/etc.) export component
28 | export default component;
29 | 
30 | // It's possible to expose named exports when writing components that can
31 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
32 | // export const RollupDemoDirective = component;


--------------------------------------------------------------------------------
/src/vue-step.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="[`v-step-warp-${direction}`, styleType]">
  3 |     <div class="v-step-progress-bg">
  4 |       <div
  5 |         class="v-step-progress-value"
  6 |         :style="progressStyle"
  7 |       >
  8 |       </div>
  9 |     </div>
 10 |     <ul class="v-step-list">
 11 |       <li
 12 |         v-for="(label, index) in stepList"
 13 |         :key="index"
 14 |         class="v-step-item"
 15 |         :style="horizontalItemWidth"
 16 |         @click="selectItem(index)"
 17 |       >
 18 |         <label class="v-step-item-label">
 19 |           {{ label }}
 20 |         </label>
 21 |         <div
 22 |           class="v-step-item-number"
 23 |           :style="itemNumberStyle(index)"
 24 |         >
 25 |           {{ showItemNumber(index) }}
 26 |         </div>
 27 |       </li>
 28 |     </ul>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | export default {
 34 |   name: 'vue-step',
 35 |   props: {
 36 |     nowStep: {
 37 |       type: Number,
 38 |       required: true
 39 |     },
 40 |     stepList: {
 41 |       type: Array,
 42 |       required: true
 43 |     },
 44 |     activeColor: {
 45 |       type: String,
 46 |       default: '#1fb11d'
 47 |     },
 48 |     styleType: {
 49 |       type: String,
 50 |       default: 'style1',
 51 |       validator: (value) => {
 52 |         return ['style1', 'style2'].indexOf(value) !== -1
 53 |       }
 54 |     },
 55 |     direction: {
 56 |       type: String,
 57 |       default: 'horizontal'
 58 |     }
 59 |   },
 60 |   computed: {
 61 |     stepItemWidth () {
 62 |       return 100 / this.stepList.length
 63 |     },
 64 |     horizontalItemWidth () {
 65 |       return this.direction === 'vertical'
 66 |         ? ''
 67 |         : { width: this.stepItemWidth + '%' }
 68 |     },
 69 |     progressStyle () {
 70 |       let oStyle = {
 71 |         'background-color': this.activeColor
 72 |       }
 73 |       if (this.direction === 'vertical') {
 74 |         oStyle.height = this.stepItemWidth * this.nowStep + '%'
 75 |       } else {
 76 |         oStyle.width = this.stepItemWidth * this.nowStep + '%'
 77 |       }
 78 |       return oStyle
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     itemNumberStyle (index) {
 83 |       let style = ''
 84 |       if (index < this.nowStep) {
 85 |         style = {
 86 |           'background-color': this.activeColor,
 87 |           'color': '#fff'
 88 |         }
 89 |       }
 90 |       return style
 91 |     },
 92 |     showItemNumber (index) {
 93 |       return this.styleType !== 'style2' ? index + 1 : ''
 94 |     },
 95 |     selectItem (itemIndex) {
 96 |       this.$emit('selected', this.showItemNumber(itemIndex))
 97 |     }
 98 |   }
 99 | }
100 | </script>
101 | 
102 | <style scoped>
103 | .v-step-warp-horizontal {
104 |   position: relative;
105 |   padding: 10px 0;
106 |   z-index: 2;
107 | }
108 | .v-step-warp-horizontal .v-step-progress-bg {
109 |   position: absolute;
110 |   width: 100%;
111 |   height: 4px;
112 |   bottom: 22px;
113 |   background-color: #ddd;
114 | }
115 | .v-step-warp-horizontal .v-step-progress-value {
116 |   position: inherit;
117 |   top: 0;
118 |   left: 0;
119 |   height: inherit;
120 | }
121 | .v-step-list {
122 |   position: relative;
123 |   display: -webkit-flex;
124 |   display: flex;
125 |   cursor: pointer;
126 |   user-select: none;
127 | }
128 | .v-step-list,
129 | .v-step-item {
130 |   margin: 0;
131 |   padding: 0;
132 |   list-style-type: none;
133 | }
134 | .v-step-warp-horizontal .v-step-list {
135 |   justify-content: space-around;
136 |   text-align: center;
137 | }
138 | .v-step-item-label {
139 |   font-size: 12px;
140 |   color: #666;
141 | }
142 | .v-step-item-number {
143 |   width: 18px;
144 |   height: 18px;
145 |   line-height: 18px;
146 |   font-size: 12px;
147 |   border-radius: 50%;
148 |   color: #666;
149 |   background-color: #ddd;
150 | }
151 | .v-step-warp-horizontal .v-step-item-label {
152 |   display: block;
153 |   overflow: hidden;
154 |   text-overflow: ellipsis;
155 |   white-space: nowrap;
156 | }
157 | .v-step-warp-horizontal .v-step-item-number {
158 |   margin: 5px auto;
159 | }
160 | .v-step-warp-horizontal.style2 .v-step-progress-bg {
161 |   height: 2px;
162 |   bottom: 19px;
163 | }
164 | .v-step-warp-horizontal.style2 .v-step-item-number {
165 |   width: 10px;
166 |   height: 10px;
167 |   line-height: 10px;
168 | }
169 | 
170 | .v-step-warp-vertical {
171 |   position: relative;
172 |   padding: 0;
173 |   z-index: 2;
174 | }
175 | .v-step-warp-vertical .v-step-progress-bg {
176 |   position: absolute;
177 |   width: 4px;
178 |   height: 100%;
179 |   top: 0;
180 |   left: 15px;
181 |   background-color: #ddd;
182 | }
183 | .v-step-warp-vertical .v-step-progress-value {
184 |   position: absolute;
185 |   top: 0;
186 |   left: 0;
187 |   width: inherit;
188 | }
189 | .v-step-warp-vertical .v-step-list {
190 |   height: inherit;
191 |   flex-direction: column;
192 |   padding-left: 8px;
193 | }
194 | .v-step-warp-vertical .v-step-item {
195 |   display: -webkit-flex;
196 |   display: flex;
197 |   height: 25%;
198 |   align-items: center;
199 | }
200 | .v-step-warp-vertical .v-step-item-number {
201 |   text-align: center;
202 | }
203 | .v-step-warp-vertical .v-step-item-label {
204 |   position: absolute;
205 |   order: 1;
206 |   padding-left: 34px;
207 | }
208 | .v-step-warp-vertical.style2 .v-step-progress-bg {
209 |   width: 2px;
210 | }
211 | .v-step-warp-vertical.style2 .v-step-item-number {
212 |   width: 10px;
213 |   height: 10px;
214 |   line-height: 10px;
215 |   margin-left: 3px;
216 | }
217 | .v-step-warp-vertical.style2 .v-step-item-label {
218 |   padding-top: 0;
219 | }
220 | </style>
221 | 


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