other / mew-iview

Commit b8273bfc26c7472b34cb9731f10f24faa67c4619

Authored by jingsam
1 parent 3735e376

add a nav for test page

Showing 9 changed files with 187 additions and 154 deletions   Show diff stats
Inline Side-by-side
@@ -2,8 +2,41 @@ @@ -2,8 +2,41 @@
2 @import "../src/styles/index.less"; 2 @import "../src/styles/index.less";
3 @import "../src/styles/package.less"; 3 @import "../src/styles/package.less";
4 </style> 4 </style>
  5 +<style scoped>
  6 +nav {
  7 + margin-bottom: 40px;
  8 +}
  9 +
  10 +li {
  11 + display: inline-block;
  12 +}
  13 +
  14 +li + li {
  15 + border-left: solid 1px #bbb;
  16 + padding-left: 5px;
  17 + margin-left: 5px;
  18 +}
  19 +
  20 +.v-link-active {
  21 + color: #bbb;
  22 +}
  23 +</style>
5 <template> 24 <template>
6 <div> 25 <div>
  26 + <nav>
  27 + <ul>
  28 + <li><a v-link="'/button'">Button</a></li>
  29 + <li><a v-link="'/card'">Card</a></li>
  30 + <li><a v-link="'/message'">Message</a></li>
  31 + <li><a v-link="'/more'">More</a></li>
  32 + <li><a v-link="'/page'">Page</a></li>
  33 + <li><a v-link="'/poptip'">Poptip</a></li>
  34 + <li><a v-link="'/radio'">Radio</a></li>
  35 + <li><a v-link="'/select'">Select</a></li>
  36 + <li><a v-link="'/slider'">Slider</a></li>
  37 + <li><a v-link="'/step'">Step</a></li>
  38 + </ul>
  39 + </nav>
7 <router-view></router-view> 40 <router-view></router-view>
8 </div> 41 </div>
9 </template> 42 </template>
@@ -16,19 +16,19 @@ var router = new VueRouter({ @@ -16,19 +16,19 @@ var router = new VueRouter({
16 }); 16 });
17 17
18 router.map({ 18 router.map({
19 - '/index': { 19 + '/button': {
20 component: function (resolve) { 20 component: function (resolve) {
21 - require(['./routers/index.vue'], resolve); 21 + require(['./routers/button.vue'], resolve);
22 } 22 }
23 }, 23 },
24 - '/button': { 24 + '/card': {
25 component: function (resolve) { 25 component: function (resolve) {
26 - require(['./routers/button.vue'], resolve); 26 + require(['./routers/card.vue'], resolve);
27 } 27 }
28 }, 28 },
29 - '/page': { 29 + '/message': {
30 component: function (resolve) { 30 component: function (resolve) {
31 - require(['./routers/page.vue'], resolve); 31 + require(['./routers/message.vue'], resolve);
32 } 32 }
33 }, 33 },
34 '/more': { 34 '/more': {
@@ -36,34 +36,34 @@ router.map({ @@ -36,34 +36,34 @@ router.map({
36 require(['./routers/more.vue'], resolve); 36 require(['./routers/more.vue'], resolve);
37 } 37 }
38 }, 38 },
39 - '/layout': { 39 + '/page': {
40 component: function (resolve) { 40 component: function (resolve) {
41 - require(['./routers/layout.vue'], resolve); 41 + require(['./routers/page.vue'], resolve);
42 } 42 }
43 }, 43 },
44 - '/radio': { 44 + '/poptip': {
45 component: function (resolve) { 45 component: function (resolve) {
46 - require(['./routers/radio.vue'], resolve); 46 + require(['./routers/poptip.vue'], resolve);
47 } 47 }
48 }, 48 },
49 - '/msg': { 49 + '/radio': {
50 component: function (resolve) { 50 component: function (resolve) {
51 - require(['./routers/msg.vue'], resolve); 51 + require(['./routers/radio.vue'], resolve);
52 } 52 }
53 }, 53 },
54 - '/notice': { 54 + '/select': {
55 component: function (resolve) { 55 component: function (resolve) {
56 - require(['./routers/notice.vue'], resolve); 56 + require(['./routers/select.vue'], resolve);
57 } 57 }
58 }, 58 },
59 - '/tag': { 59 + '/slider': {
60 component: function (resolve) { 60 component: function (resolve) {
61 - require(['./routers/tag.vue'], resolve); 61 + require(['./routers/slider.vue'], resolve);
62 } 62 }
63 }, 63 },
64 - '/select': { 64 + '/step': {
65 component: function (resolve) { 65 component: function (resolve) {
66 - require(['./routers/select.vue'], resolve); 66 + require(['./routers/step.vue'], resolve);
67 } 67 }
68 } 68 }
69 }); 69 });
@@ -77,6 +77,6 @@ router.afterEach(function (transition) { @@ -77,6 +77,6 @@ router.afterEach(function (transition) {
77 }); 77 });
78 78
79 router.redirect({ 79 router.redirect({
80 - '*': "/index" 80 + '*': "/button"
81 }); 81 });
82 router.start(App, '#app'); 82 router.start(App, '#app');
test/routers/layout.vue renamed to test/routers/card.vue
  Show/Hide comments   View file @b8273bf
test/routers/index.vue deleted
View file @3735e37
1 -<style>  
2 -  
3 -</style>  
4 -<template>  
5 - <Page :total="40" size="small"></Page>  
6 - <Page :total="40" size="small" show-elevator show-sizer></Page>  
7 - <Page :total="40" size="small" show-total></Page>  
8 -</template>  
9 -<script>  
10 - import { Modal, Button, Message, Page } from 'iview';  
11 -  
12 - export default {  
13 - components: { Modal, Button, Page },  
14 - props: {  
15 -  
16 - },  
17 - data () {  
18 - return {  
19 -  
20 - }  
21 - },  
22 - methods: {  
23 - info () {  
24 - Modal.info({  
25 - title: '这是对话框标题',  
26 - content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`  
27 - });  
28 - },  
29 - success () {  
30 - Modal.success();  
31 - },  
32 - warning () {  
33 - Modal.warning();  
34 - },  
35 - error () {  
36 - Modal.error();  
37 - },  
38 - confirm () {  
39 - Modal.confirm({  
40 -// okText: 'OK',  
41 -// cancelText: 'Cancel',  
42 - title: '删除提示',  
43 - content: '删除后将不可找回，您确定要删除吗？',  
44 - onCancel () {  
45 - Message.info('cancel it');  
46 - },  
47 - onOk () {  
48 - setTimeout(() => {  
49 - Modal.remove();  
50 - Message.success('OK!');  
51 - }, 2000);  
52 - },  
53 - loading: true  
54 - });  
55 - }  
56 - }  
57 - }  
58 -</script>  
test/routers/msg.vue renamed to test/routers/message.vue
  Show/Hide comments   View file @b8273bf
test/routers/page.vue
  Show/Hide comments   View file @b8273bf
@@ -2,95 +2,56 @@ @@ -2,95 +2,56 @@
2 2
3 </style> 3 </style>
4 <template> 4 <template>
5 - <Steps :current="1" size="small">  
6 - <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>  
7 - <Step title="进行中" content="这里是该步骤的描述信息"></Step>  
8 - <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>  
9 - <Step title="待进行" content="这里是该步骤的描述信息"></Step>  
10 - </Steps>  
11 - <br>  
12 - <Steps :current="2">  
13 - <Step title="已完成"></Step>  
14 - <Step title="进行中"></Step>  
15 - <Step title="待进行"></Step>  
16 - <Step title="待进行"></Step>  
17 - </Steps>  
18 - <br>  
19 - <Steps :current="1" size="small">  
20 - <Step title="已完成"></Step>  
21 - <Step title="进行中"></Step>  
22 - <Step title="待进行"></Step>  
23 - <Step title="待进行"></Step>  
24 - </Steps>  
25 - <br>  
26 - <Steps :current="1" direction="vertical" size="small">  
27 - <Step title="注册" icon="person-add"></Step>  
28 - <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>  
29 - <Step title="验证邮箱" icon="email"></Step>  
30 - </Steps>  
31 - <Steps :current="1" direction="vertical">  
32 - <Step title="注册" icon="person-add"></Step>  
33 - <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>  
34 - <Step title="验证邮箱" icon="email"></Step>  
35 - </Steps>  
36 - <br>  
37 - <p>当前正在进行第 {{ current + 1 }} 步</p>  
38 - <Steps :current="current">  
39 - <Step title="步骤1"></Step>  
40 - <Step title="步骤2"></Step>  
41 - <Step title="步骤3"></Step>  
42 - <Step title="步骤4"></Step>  
43 - </Steps>  
44 - <i-button type="primary" @click="next">下一步</i-button>  
45 - <br><br>  
46 - <Steps :current="1" direction="vertical" size="small">  
47 - <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>  
48 - <Step title="进行中" content="这里是该步骤的描述信息"></Step>  
49 - <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>  
50 - <Step title="待进行" content="这里是该步骤的描述信息"></Step>  
51 - </Steps>  
52 - <br><br>  
53 - <Steps :current="1" status="error">  
54 - <Step title="已完成" content="这里是该步骤的描述信息"></Step>  
55 - <Step title="进行中" content="这里是该步骤的描述信息"></Step>  
56 - <Step title="待进行" content="这里是该步骤的描述信息"></Step>  
57 - <Step title="待进行" content="这里是该步骤的描述信息"></Step>  
58 - </Steps> 5 + <Page :total="40" size="small"></Page>
  6 + <Page :total="40" size="small" show-elevator show-sizer></Page>
  7 + <Page :total="40" size="small" show-total></Page>
59 </template> 8 </template>
60 <script> 9 <script>
61 - import { Page, Steps, Button } from 'iview';  
62 -  
63 - const Step = Steps.Step; 10 + import { Modal, Button, Message, Page } from 'iview';
64 11
65 export default { 12 export default {
66 - components: {  
67 - Page,  
68 - Steps,  
69 - Step,  
70 - iButton: Button  
71 - }, 13 + components: { Modal, Button, Page },
72 props: { 14 props: {
73 - 15 +
74 }, 16 },
75 data () { 17 data () {
76 return { 18 return {
77 - total: 512,  
78 - current: 0  
79 - }  
80 - },  
81 - computed: {  
82 19
  20 + }
83 }, 21 },
84 methods: { 22 methods: {
85 - setPage (page) {  
86 - console.log(page) 23 + info () {
  24 + Modal.info({
  25 + title: '这是对话框标题',
  26 + content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
  27 + });
  28 + },
  29 + success () {
  30 + Modal.success();
  31 + },
  32 + warning () {
  33 + Modal.warning();
  34 + },
  35 + error () {
  36 + Modal.error();
87 }, 37 },
88 - next () {  
89 - if (this.current == 3) {  
90 - this.current = 0;  
91 - } else {  
92 - this.current += 1;  
93 - } 38 + confirm () {
  39 + Modal.confirm({
  40 +// okText: 'OK',
  41 +// cancelText: 'Cancel',
  42 + title: '删除提示',
  43 + content: '删除后将不可找回，您确定要删除吗？',
  44 + onCancel () {
  45 + Message.info('cancel it');
  46 + },
  47 + onOk () {
  48 + setTimeout(() => {
  49 + Modal.remove();
  50 + Message.success('OK!');
  51 + }, 2000);
  52 + },
  53 + loading: true
  54 + });
94 } 55 }
95 } 56 }
96 } 57 }
test/routers/notice.vue renamed to test/routers/poptip.vue
  Show/Hide comments   View file @b8273bf
test/routers/tag.vue renamed to test/routers/slider.vue
  Show/Hide comments   View file @b8273bf
test/routers/step.vue 0 → 100644
  Show/Hide comments   View file @b8273bf
  1 +<style>
  2 +
  3 +</style>
  4 +<template>
  5 + <Steps :current="1" size="small">
  6 + <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
  7 + <Step title="进行中" content="这里是该步骤的描述信息"></Step>
  8 + <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
  9 + <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  10 + </Steps>
  11 + <br>
  12 + <Steps :current="2">
  13 + <Step title="已完成"></Step>
  14 + <Step title="进行中"></Step>
  15 + <Step title="待进行"></Step>
  16 + <Step title="待进行"></Step>
  17 + </Steps>
  18 + <br>
  19 + <Steps :current="1" size="small">
  20 + <Step title="已完成"></Step>
  21 + <Step title="进行中"></Step>
  22 + <Step title="待进行"></Step>
  23 + <Step title="待进行"></Step>
  24 + </Steps>
  25 + <br>
  26 + <Steps :current="1" direction="vertical" size="small">
  27 + <Step title="注册" icon="person-add"></Step>
  28 + <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
  29 + <Step title="验证邮箱" icon="email"></Step>
  30 + </Steps>
  31 + <Steps :current="1" direction="vertical">
  32 + <Step title="注册" icon="person-add"></Step>
  33 + <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
  34 + <Step title="验证邮箱" icon="email"></Step>
  35 + </Steps>
  36 + <br>
  37 + <p>当前正在进行第 {{ current + 1 }} 步</p>
  38 + <Steps :current="current">
  39 + <Step title="步骤1"></Step>
  40 + <Step title="步骤2"></Step>
  41 + <Step title="步骤3"></Step>
  42 + <Step title="步骤4"></Step>
  43 + </Steps>
  44 + <i-button type="primary" @click="next">下一步</i-button>
  45 + <br><br>
  46 + <Steps :current="1" direction="vertical" size="small">
  47 + <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
  48 + <Step title="进行中" content="这里是该步骤的描述信息"></Step>
  49 + <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
  50 + <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  51 + </Steps>
  52 + <br><br>
  53 + <Steps :current="1" status="error">
  54 + <Step title="已完成" content="这里是该步骤的描述信息"></Step>
  55 + <Step title="进行中" content="这里是该步骤的描述信息"></Step>
  56 + <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  57 + <Step title="待进行" content="这里是该步骤的描述信息"></Step>
  58 + </Steps>
  59 +</template>
  60 +<script>
  61 + import { Page, Steps, Button } from 'iview';
  62 +
  63 + const Step = Steps.Step;
  64 +
  65 + export default {
  66 + components: {
  67 + Page,
  68 + Steps,
  69 + Step,
  70 + iButton: Button
  71 + },
  72 + props: {
  73 +
  74 + },
  75 + data () {
  76 + return {
  77 + total: 512,
  78 + current: 0
  79 + }
  80 + },
  81 + computed: {
  82 +
  83 + },
  84 + methods: {
  85 + setPage (page) {
  86 + console.log(page)
  87 + },
  88 + next () {
  89 + if (this.current == 3) {
  90 + this.current = 0;
  91 + } else {
  92 + this.current += 1;
  93 + }
  94 + }
  95 + }
  96 + }
  97 +</script>