chenhaodong / mew-iview

Commit 73d9ebe3f1fb31cd0a5f3e91cc1eda4c77a535a7

Authored by Aresn
Committed by GitHub
2 parents d0061982 8055e5ce

Merge pull request #43 from jingsam/build 

sort components
Showing 10 changed files with 283 additions and 210 deletions   Show diff stats
Inline Side-by-side
  1 +import Affix from './components/affix';
  2 +import Alert from './components/alert';
  3 +import BackTop from './components/back-top';
  4 +import Badge from './components/badge';
  5 +import Breadcrumb from './components/breadcrumb';
1 import Button from './components/button'; 6 import Button from './components/button';
  7 +import Card from './components/card';
  8 +import Checkbox from './components/checkbox';
  9 +import Circle from './components/circle';
  10 +import Collapse from './components/collapse';
2 import Icon from './components/icon'; 11 import Icon from './components/icon';
3 import Input from './components/input'; 12 import Input from './components/input';
4 -import Switch from './components/switch';  
5 -import Radio from './components/radio';  
6 -import Checkbox from './components/checkbox';  
7 import InputNumber from './components/input-number'; 13 import InputNumber from './components/input-number';
8 -import { Row, Col } from './components/layout'; 14 +import LoadingBar from './components/loading-bar';
  15 +import Message from './components/message';
  16 +import Modal from './components/modal';
  17 +import Notice from './components/notice';
9 import Page from './components/page'; 18 import Page from './components/page';
10 -import Badge from './components/badge';  
11 -import Tag from './components/tag'; 19 +import Poptip from './components/poptip';
12 import Progress from './components/progress'; 20 import Progress from './components/progress';
13 -import Circle from './components/circle';  
14 -import Timeline from './components/timeline';  
15 -import Affix from './components/affix';  
16 -import BackTop from './components/back-top'; 21 +import Radio from './components/radio';
  22 +import Slider from './components/slider';
17 import Spin from './components/spin'; 23 import Spin from './components/spin';
18 import Steps from './components/steps'; 24 import Steps from './components/steps';
19 -import Breadcrumb from './components/breadcrumb';  
20 -import Alert from './components/alert';  
21 -import Collapse from './components/collapse';  
22 -import Card from './components/card';  
23 -import Message from './components/message';  
24 -import Notice from './components/notice';  
25 -import LoadingBar from './components/loading-bar';  
26 -import Modal from './components/modal';  
27 -import { Select, Option, OptionGroup } from './components/select'; 25 +import Switch from './components/switch';
  26 +import Tag from './components/tag';
  27 +import Timeline from './components/timeline';
28 import Tooltip from './components/tooltip'; 28 import Tooltip from './components/tooltip';
29 -import Poptip from './components/poptip';  
30 -import Slider from './components/slider'; 29 +import { Row, Col } from './components/layout';
  30 +import { Select, Option, OptionGroup } from './components/select';
31 31
32 const iview = { 32 const iview = {
  33 + Affix,
  34 + Alert,
  35 + BackTop,
  36 + Badge,
  37 + Breadcrumb,
  38 + BreadcrumbItem: Breadcrumb.Item,
33 Button, 39 Button,
34 - iButton: Button,  
35 ButtonGroup: Button.Group, 40 ButtonGroup: Button.Group,
  41 + Card,
  42 + Checkbox,
  43 + CheckboxGroup: Checkbox.Group,
  44 + Circle,
  45 + Col,
  46 + Collapse,
36 Icon, 47 Icon,
37 Input, 48 Input,
38 - Switch, 49 + InputNumber,
  50 + LoadingBar,
  51 + Message,
  52 + Modal,
  53 + Notice,
  54 + Option,
  55 + OptionGroup: OptionGroup,
  56 + Page,
  57 + Panel: Collapse.Panel,
  58 + Poptip,
  59 + Progress,
39 Radio, 60 Radio,
40 RadioGroup: Radio.Group, 61 RadioGroup: Radio.Group,
41 - Checkbox,  
42 - CheckboxGroup: Checkbox.Group,  
43 - InputNumber,  
44 Row, 62 Row,
45 - iCol: Col,  
46 - Page,  
47 - Badge, 63 + Select,
  64 + Slider,
  65 + Spin,
  66 + Step: Steps.Step,
  67 + Steps,
  68 + Switch,
48 Tag, 69 Tag,
49 - Progress,  
50 - Circle,  
51 Timeline, 70 Timeline,
52 TimelineItem: Timeline.Item, 71 TimelineItem: Timeline.Item,
53 - Affix,  
54 - BackTop,  
55 - Spin,  
56 - Steps,  
57 - Step: Steps.Step,  
58 - Breadcrumb,  
59 - BreadcrumbItem: Breadcrumb.Item,  
60 - Alert,  
61 - Collapse,  
62 - Panel: Collapse.Panel,  
63 - Card,  
64 - Message,  
65 - Notice,  
66 - LoadingBar,  
67 - Modal,  
68 - iSelect: Select, 72 + Tooltip,
  73 +
  74 + iButton: Button,
  75 + iButtonGroup: Button.Group,
  76 + iCol: Col,
  77 + iInput: Input,
69 iOption: Option, 78 iOption: Option,
70 iOptionGroup: OptionGroup, 79 iOptionGroup: OptionGroup,
71 - Tooltip,  
72 - Poptip,  
73 - Slider 80 + iSelect: Select
74 }; 81 };
75 82
76 -module.exports = iview;  
77 \ No newline at end of file 83 \ No newline at end of file
  84 +module.exports = iview;
@@ -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/card.vue 0 → 100644
  Show/Hide comments   View file @73d9ebe
  1 +<template>
  2 + <Card :bordered="true" style="width:300px">
  3 + <template slot="title">
  4 + <p>放寒假的发货会计师</p>
  5 + </template>
  6 + <a href="#" slot="extra">More</a>
  7 + </Card>
  8 + <Card style="width:300px">
  9 + <p>hello</p>
  10 + <p>hndshf</p>
  11 + <h3>jfds</h3>
  12 + </Card>
  13 +</template>
  14 +<script>
  15 + import { Row, Col, Card } from 'iview';
  16 +
  17 + export default {
  18 + components: {
  19 + Row,
  20 + iCol: Col,
  21 + Card
  22 + },
  23 + props: {
  24 +
  25 + },
  26 + data () {
  27 + return {
  28 +
  29 + }
  30 + },
  31 + computed: {
  32 +
  33 + },
  34 + methods: {
  35 +
  36 + }
  37 + }
  38 +</script>
0 \ No newline at end of file 39 \ No newline at end of file
test/routers/index.vue deleted
View file @d006198
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 @73d9ebe
test/routers/page.vue
  Show/Hide comments   View file @73d9ebe
@@ -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 @73d9ebe
test/routers/tag.vue renamed to test/routers/slider.vue
  Show/Hide comments   View file @73d9ebe
1 -<style>  
2 - body{  
3 - padding: 50px;  
4 - }  
5 -</style>  
6 <template> 1 <template>
7 <Slider :value="10" :tip-format="format"> 2 <Slider :value="10" :tip-format="format">
8 3
test/routers/step.vue 0 → 100644
  Show/Hide comments   View file @73d9ebe
  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>