other / 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
README.md
  Show/Hide comments   View file @5d122b3
... ... @@ -35,7 +35,7 @@
35 35 - [ ] Rate
36 36 - [ ] Upload
37 37 - [ ] Form
38   -- [ ] Alert
  38 +- [x] Alert
39 39 - [ ] Card
40 40 - [ ] Message
41 41 - [ ] Notice
... ...
src/components/alert/alert.vue
  Show/Hide comments   View file @5d122b3
1 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 18 </template>
17 19 <script>
18 20 import Icon from '../icon';
... ... @@ -40,7 +42,7 @@
40 42 banner: {
41 43 type: Boolean,
42 44 default: false
43   - },
  45 + }
44 46 },
45 47 data () {
46 48 return {
... ... @@ -99,8 +101,8 @@
99 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 108 </script>
... ...
src/components/switch/switch.vue
  Show/Hide comments   View file @5d122b3
... ... @@ -30,7 +30,7 @@
30 30 data () {
31 31 return {
32 32 currentValue: this.value
33   - }
  33 + };
34 34 },
35 35 computed: {
36 36 wrapClasses () {
... ...
src/index.js
  Show/Hide comments   View file @5d122b3
... ... @@ -2,7 +2,7 @@
2 2 import 'core-js/fn/array/find-index';
3 3  
4 4 import Affix from './components/affix';
5   -// import Alert from './components/alert';
  5 +import Alert from './components/alert';
6 6 // import BackTop from './components/back-top';
7 7 // import Badge from './components/badge';
8 8 // import Breadcrumb from './components/breadcrumb';
... ... @@ -48,7 +48,7 @@ import locale from &#39;./locale&#39;;
48 48  
49 49 const iview = {
50 50 Affix,
51   - // Alert,
  51 + Alert,
52 52 // BackTop,
53 53 // Badge,
54 54 // Breadcrumb,
... ...
src/styles/animation/ease.less
  Show/Hide comments   View file @5d122b3
1 1 .ease-motion(@className, @keyframeName) {
2 2 .make-motion(@className, @keyframeName);
3   - .@{className}-enter, .@{className}-appear {
  3 + .@{className}-enter-active, .@{className}-appear {
4 4 opacity: 0;
5 5 animation-timing-function: linear;
6 6 animation-duration: @transition-time;
7 7 }
8   - .@{className}-leave {
  8 + .@{className}-leave-active {
9 9 animation-timing-function: linear;
10 10 animation-duration: @transition-time;
11 11 }
... ...
src/styles/animation/fade.less
  Show/Hide comments   View file @5d122b3
1 1 .fade-motion(@className, @keyframeName) {
2 2 .make-motion(@className, @keyframeName);
3   - .@{className}-enter, .@{className}-appear {
  3 + .@{className}-enter-active, .@{className}-appear {
4 4 opacity: 0;
5 5 animation-timing-function: linear;
6 6 }
7   - .@{className}-leave {
  7 + .@{className}-leave-active {
8 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 4 }
5 5  
6 6 .make-motion(@className, @keyframeName) {
7   - .@{className}-enter, .@{className}-appear {
  7 + .@{className}-enter-active, .@{className}-appear {
8 8 .motion-common();
9 9 animation-play-state: paused;
10 10 }
11   - .@{className}-leave {
  11 + .@{className}-leave-active {
12 12 .motion-common();
13 13 animation-play-state: paused;
14 14 }
15   - .@{className}-enter, .@{className}-appear {
  15 + .@{className}-enter-active, .@{className}-appear {
16 16 animation-name: ~"@{keyframeName}In";
17 17 animation-play-state: running;
18 18 }
19   - .@{className}-leave {
  19 + .@{className}-leave-active {
20 20 animation-name: ~"@{keyframeName}Out";
21 21 animation-play-state: running;
22 22 }
... ...
src/styles/animation/move.less
  Show/Hide comments   View file @5d122b3
1 1 .move-motion(@className, @keyframeName) {
2 2 .make-motion(@className, @keyframeName);
3   - .@{className}-enter, .@{className}-appear {
  3 + .@{className}-enter-active, .@{className}-appear {
4 4 opacity: 0;
5 5 animation-timing-function: @ease-in-out;
6 6 }
7   - .@{className}-leave {
  7 + .@{className}-leave-active {
8 8 animation-timing-function: @ease-in-out;
9 9 }
10 10 }
... ...
src/styles/animation/slide.less
  Show/Hide comments   View file @5d122b3
1 1 .slide-motion(@className, @keyframeName) {
2 2 .make-motion(@className, @keyframeName);
3   - .@{className}-enter, .@{className}-appear {
  3 + .@{className}-enter-active, .@{className}-appear {
4 4 opacity: 0;
5 5 animation-timing-function: @ease-in-out;
6 6 }
7   - .@{className}-leave {
  7 + .@{className}-leave-active {
8 8 animation-timing-function: @ease-in-out;
9 9 }
10 10 }
... ...
test/app.vue
  Show/Hide comments   View file @5d122b3
... ... @@ -22,6 +22,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
22 22 <li><router-link to="/steps">Steps</router-link></li>
23 23 <li><router-link to="/timeline">Timeline</router-link></li>
24 24 <li><router-link to="/switch">Switch</router-link></li>
  25 + <li><router-link to="/alert">Alert</router-link></li>
25 26 </ul>
26 27 </nav>
27 28 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @5d122b3
... ... @@ -52,6 +52,10 @@ const router = new VueRouter({
52 52 {
53 53 path: '/switch',
54 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 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 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 33 </template>
32 34 <script>
33 35 import { Alert, Icon } from 'iview';
... ...