chenhaodong / mew-iview

Commit 5d122b374cc083341dfd38f64a9809b9087c8579

Authored by 梁灏
1 parent 2d5ba278

support Alert 

support Alert
Showing 12 changed files with 69 additions and 60 deletions   Show diff stats
Inline Side-by-side
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 - [ ] Rate 35 - [ ] Rate
36 - [ ] Upload 36 - [ ] Upload
37 - [ ] Form 37 - [ ] Form
38 -- [ ] Alert 38 +- [x] Alert
39 - [ ] Card 39 - [ ] Card
40 - [ ] Message 40 - [ ] Message
41 - [ ] Notice 41 - [ ] Notice
src/components/alert/alert.vue
  Show/Hide comments   View file @5d122b3
1 <template> 1 <template>
2 - <div v-if="!closed" :class="wrapClasses" transition="fade">  
3 - <span :class="iconClasses" v-if="showIcon">  
4 - <slot name="icon">  
5 - <Icon :type="iconType"></Icon>  
6 - </slot>  
7 - </span>  
8 - <span :class="messageClasses"><slot></slot></span>  
9 - <span :class="descClasses" v-el:desc><slot name="desc"></slot></span>  
10 - <a :class="closeClasses" v-if="closable" @click="close">  
11 - <slot name="close">  
12 - <Icon type="ios-close-empty"></Icon>  
13 - </slot>  
14 - </a>  
15 - </div> 2 + <transition name="fade">
  3 + <div v-if="!closed" :class="wrapClasses">
  4 + <span :class="iconClasses" v-if="showIcon">
  5 + <slot name="icon">
  6 + <Icon :type="iconType"></Icon>
  7 + </slot>
  8 + </span>
  9 + <span :class="messageClasses"><slot></slot></span>
  10 + <span :class="descClasses"><slot name="desc"></slot></span>
  11 + <a :class="closeClasses" v-if="closable" @click="close">
  12 + <slot name="close">
  13 + <Icon type="ios-close-empty"></Icon>
  14 + </slot>
  15 + </a>
  16 + </div>
  17 + </transition>
16 </template> 18 </template>
17 <script> 19 <script>
18 import Icon from '../icon'; 20 import Icon from '../icon';
@@ -40,7 +42,7 @@ @@ -40,7 +42,7 @@
40 banner: { 42 banner: {
41 type: Boolean, 43 type: Boolean,
42 default: false 44 default: false
43 - }, 45 + }
44 }, 46 },
45 data () { 47 data () {
46 return { 48 return {
@@ -99,8 +101,8 @@ @@ -99,8 +101,8 @@
99 this.$emit('on-close', e); 101 this.$emit('on-close', e);
100 } 102 }
101 }, 103 },
102 - compiled () {  
103 - this.desc = this.$els.desc.innerHTML != ''; 104 + mounted () {
  105 + this.desc = this.$slots.desc !== undefined;
104 } 106 }
105 }; 107 };
106 </script> 108 </script>
src/components/switch/switch.vue
  Show/Hide comments   View file @5d122b3
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 data () { 30 data () {
31 return { 31 return {
32 currentValue: this.value 32 currentValue: this.value
33 - } 33 + };
34 }, 34 },
35 computed: { 35 computed: {
36 wrapClasses () { 36 wrapClasses () {
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 import 'core-js/fn/array/find-index'; 2 import 'core-js/fn/array/find-index';
3 3
4 import Affix from './components/affix'; 4 import Affix from './components/affix';
5 -// import Alert from './components/alert'; 5 +import Alert from './components/alert';
6 // import BackTop from './components/back-top'; 6 // import BackTop from './components/back-top';
7 // import Badge from './components/badge'; 7 // import Badge from './components/badge';
8 // import Breadcrumb from './components/breadcrumb'; 8 // import Breadcrumb from './components/breadcrumb';
@@ -48,7 +48,7 @@ import locale from &#39;./locale&#39;; @@ -48,7 +48,7 @@ import locale from &#39;./locale&#39;;
48 48
49 const iview = { 49 const iview = {
50 Affix, 50 Affix,
51 - // Alert, 51 + Alert,
52 // BackTop, 52 // BackTop,
53 // Badge, 53 // Badge,
54 // Breadcrumb, 54 // Breadcrumb,
src/styles/animation/ease.less
  Show/Hide comments   View file @5d122b3
1 .ease-motion(@className, @keyframeName) { 1 .ease-motion(@className, @keyframeName) {
2 .make-motion(@className, @keyframeName); 2 .make-motion(@className, @keyframeName);
3 - .@{className}-enter, .@{className}-appear { 3 + .@{className}-enter-active, .@{className}-appear {
4 opacity: 0; 4 opacity: 0;
5 animation-timing-function: linear; 5 animation-timing-function: linear;
6 animation-duration: @transition-time; 6 animation-duration: @transition-time;
7 } 7 }
8 - .@{className}-leave { 8 + .@{className}-leave-active {
9 animation-timing-function: linear; 9 animation-timing-function: linear;
10 animation-duration: @transition-time; 10 animation-duration: @transition-time;
11 } 11 }
src/styles/animation/fade.less
  Show/Hide comments   View file @5d122b3
1 .fade-motion(@className, @keyframeName) { 1 .fade-motion(@className, @keyframeName) {
2 .make-motion(@className, @keyframeName); 2 .make-motion(@className, @keyframeName);
3 - .@{className}-enter, .@{className}-appear { 3 + .@{className}-enter-active, .@{className}-appear {
4 opacity: 0; 4 opacity: 0;
5 animation-timing-function: linear; 5 animation-timing-function: linear;
6 } 6 }
7 - .@{className}-leave { 7 + .@{className}-leave-active {
8 animation-timing-function: linear; 8 animation-timing-function: linear;
9 } 9 }
10 } 10 }
src/styles/animation/index.less
  Show/Hide comments   View file @5d122b3
@@ -4,19 +4,19 @@ @@ -4,19 +4,19 @@
4 } 4 }
5 5
6 .make-motion(@className, @keyframeName) { 6 .make-motion(@className, @keyframeName) {
7 - .@{className}-enter, .@{className}-appear { 7 + .@{className}-enter-active, .@{className}-appear {
8 .motion-common(); 8 .motion-common();
9 animation-play-state: paused; 9 animation-play-state: paused;
10 } 10 }
11 - .@{className}-leave { 11 + .@{className}-leave-active {
12 .motion-common(); 12 .motion-common();
13 animation-play-state: paused; 13 animation-play-state: paused;
14 } 14 }
15 - .@{className}-enter, .@{className}-appear { 15 + .@{className}-enter-active, .@{className}-appear {
16 animation-name: ~"@{keyframeName}In"; 16 animation-name: ~"@{keyframeName}In";
17 animation-play-state: running; 17 animation-play-state: running;
18 } 18 }
19 - .@{className}-leave { 19 + .@{className}-leave-active {
20 animation-name: ~"@{keyframeName}Out"; 20 animation-name: ~"@{keyframeName}Out";
21 animation-play-state: running; 21 animation-play-state: running;
22 } 22 }
src/styles/animation/move.less
  Show/Hide comments   View file @5d122b3
1 .move-motion(@className, @keyframeName) { 1 .move-motion(@className, @keyframeName) {
2 .make-motion(@className, @keyframeName); 2 .make-motion(@className, @keyframeName);
3 - .@{className}-enter, .@{className}-appear { 3 + .@{className}-enter-active, .@{className}-appear {
4 opacity: 0; 4 opacity: 0;
5 animation-timing-function: @ease-in-out; 5 animation-timing-function: @ease-in-out;
6 } 6 }
7 - .@{className}-leave { 7 + .@{className}-leave-active {
8 animation-timing-function: @ease-in-out; 8 animation-timing-function: @ease-in-out;
9 } 9 }
10 } 10 }
src/styles/animation/slide.less
  Show/Hide comments   View file @5d122b3
1 .slide-motion(@className, @keyframeName) { 1 .slide-motion(@className, @keyframeName) {
2 .make-motion(@className, @keyframeName); 2 .make-motion(@className, @keyframeName);
3 - .@{className}-enter, .@{className}-appear { 3 + .@{className}-enter-active, .@{className}-appear {
4 opacity: 0; 4 opacity: 0;
5 animation-timing-function: @ease-in-out; 5 animation-timing-function: @ease-in-out;
6 } 6 }
7 - .@{className}-leave { 7 + .@{className}-leave-active {
8 animation-timing-function: @ease-in-out; 8 animation-timing-function: @ease-in-out;
9 } 9 }
10 } 10 }
@@ -22,6 +22,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -22,6 +22,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
22 <li><router-link to="/steps">Steps</router-link></li> 22 <li><router-link to="/steps">Steps</router-link></li>
23 <li><router-link to="/timeline">Timeline</router-link></li> 23 <li><router-link to="/timeline">Timeline</router-link></li>
24 <li><router-link to="/switch">Switch</router-link></li> 24 <li><router-link to="/switch">Switch</router-link></li>
  25 + <li><router-link to="/alert">Alert</router-link></li>
25 </ul> 26 </ul>
26 </nav> 27 </nav>
27 <router-view></router-view> 28 <router-view></router-view>
@@ -52,6 +52,10 @@ const router = new VueRouter({ @@ -52,6 +52,10 @@ const router = new VueRouter({
52 { 52 {
53 path: '/switch', 53 path: '/switch',
54 component: require('./routers/switch.vue') 54 component: require('./routers/switch.vue')
  55 + },
  56 + {
  57 + path: '/alert',
  58 + component: require('./routers/alert.vue')
55 } 59 }
56 ] 60 ]
57 }); 61 });
test/routers/alert.vue
  Show/Hide comments   View file @5d122b3
1 <template> 1 <template>
2 - <Alert show-icon banner closable>消息提示文案</Alert>  
3 - <Alert type="success" show-icon>成功提示文案</Alert>  
4 - <Alert type="warning" show-icon banner>警告提示文案</Alert>  
5 - <Alert type="error" show-icon>错误提示文案</Alert>  
6 - <Alert show-icon>  
7 - 消息提示文案  
8 - <template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>  
9 - </Alert>  
10 - <Alert type="success" show-icon>  
11 - 成功提示文案  
12 - <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>  
13 - </Alert>  
14 - <Alert type="warning" show-icon>  
15 - 警告提示文案  
16 - <template slot="desc">  
17 - 警告的提示描述文案警告的提示描述文案警告的提示描述文案  
18 - </template>  
19 - </Alert>  
20 - <Alert type="error" show-icon>  
21 - 错误提示文案  
22 - <span slot="desc"> 2 + <div>
  3 + <Alert show-icon banner closable>消息提示文案</Alert>
  4 + <Alert type="success" show-icon>成功提示文案</Alert>
  5 + <Alert type="warning" show-icon banner>警告提示文案</Alert>
  6 + <Alert type="error" show-icon>错误提示文案</Alert>
  7 + <Alert show-icon>
  8 + 消息提示文案
  9 + <template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
  10 + </Alert>
  11 + <Alert type="success" show-icon>
  12 + 成功提示文案
  13 + <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
  14 + </Alert>
  15 + <Alert type="warning" show-icon>
  16 + 警告提示文案
  17 + <template slot="desc">
  18 + 警告的提示描述文案警告的提示描述文案警告的提示描述文案
  19 + </template>
  20 + </Alert>
  21 + <Alert type="error" show-icon>
  22 + 错误提示文案
  23 + <span slot="desc">
23 自定义错误描述文案。 24 自定义错误描述文案。
24 </span> 25 </span>
25 - </Alert>  
26 - <Alert show-icon>  
27 - 自定义图标  
28 - <Icon type="ios-lightbulb-outline" slot="icon"></Icon>  
29 - <template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>  
30 - </Alert> 26 + </Alert>
  27 + <Alert show-icon closable>
  28 + 自定义图标
  29 + <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
  30 + <template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
  31 + </Alert>
  32 + </div>
31 </template> 33 </template>
32 <script> 34 <script>
33 import { Alert, Icon } from 'iview'; 35 import { Alert, Icon } from 'iview';