chenhaodong / mew-iview

Commit 9d69bab6a6af96505a2b203baba4213be3e18829

Authored by 梁灏
1 parent e06f5e26

add Alert component 

add Alert component
Showing 8 changed files with 250 additions and 16 deletions   Show diff stats
Inline Side-by-side
components/alert/alert.vue 0 → 100644
  Show/Hide comments   View file @9d69bab
  1 +<template>
  2 + <div v-if="!closed" :class="wrapClasses" transition="fade">
  3 + <slot name="icon" v-if="showIcon">
  4 + <span :class="iconClasses">
  5 + <Icon :type="iconType"></Icon>
  6 + </span>
  7 + </slot>
  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>
  16 +</template>
  17 +<script>
  18 + import Icon from '../icon';
  19 + import { oneOf } from '../../utils/assist';
  20 +
  21 + const prefixCls = 'ivu-alert';
  22 +
  23 + export default {
  24 + components: { Icon },
  25 + props: {
  26 + type: {
  27 + validator (value) {
  28 + return oneOf(value, ['success', 'info', 'warning', 'error']);
  29 + },
  30 + default: 'info'
  31 + },
  32 + closable: {
  33 + type: Boolean,
  34 + default: false
  35 + },
  36 + showIcon: {
  37 + type: Boolean,
  38 + default: false
  39 + },
  40 + },
  41 + data () {
  42 + return {
  43 + closed: false,
  44 + desc: false
  45 + }
  46 + },
  47 + computed: {
  48 + wrapClasses () {
  49 + return [
  50 + `${prefixCls}`,
  51 + `${prefixCls}-${this.type}`,
  52 + {
  53 + [`${prefixCls}-with-icon`]: this.showIcon,
  54 + [`${prefixCls}-with-desc`]: this.desc
  55 + }
  56 + ]
  57 + },
  58 + messageClasses () {
  59 + return `${prefixCls}-message`;
  60 + },
  61 + descClasses () {
  62 + return `${prefixCls}-desc`;
  63 + },
  64 + closeClasses () {
  65 + return `${prefixCls}-close`;
  66 + },
  67 + iconClasses () {
  68 + return `${prefixCls}-icon`;
  69 + },
  70 + iconType () {
  71 + let type = '';
  72 +
  73 + switch (this.type) {
  74 + case 'success':
  75 + type = 'checkmark-circled';
  76 + break;
  77 + case 'info':
  78 + type = 'information-circled';
  79 + break;
  80 + case 'warning':
  81 + type = 'android-alert';
  82 + break;
  83 + case 'error':
  84 + type = 'close-circled';
  85 + break;
  86 + }
  87 +
  88 + return type;
  89 + }
  90 + },
  91 + methods: {
  92 + close (e) {
  93 + this.closed = true;
  94 + this.$emit('on-close', e);
  95 + }
  96 + },
  97 + compiled () {
  98 + this.desc = this.$els.desc.innerHTML != '';
  99 + }
  100 + }
  101 +</script>
0 102 \ No newline at end of file
... ...
components/alert/index.js 0 → 100644
  Show/Hide comments   View file @9d69bab
  1 +import Alert from './alert.vue';
  2 +export default Alert;
0 3 \ No newline at end of file
... ...
index.js
  Show/Hide comments   View file @9d69bab
... ... @@ -17,6 +17,7 @@ import BackTop from &#39;./components/back-top&#39;;
17 17 import Spin from './components/spin';
18 18 import Steps from './components/steps';
19 19 import Breadcrumb from './components/breadcrumb';
  20 +import Alert from './components/alert';
20 21  
21 22 const iview = {
22 23 Button,
... ... @@ -38,7 +39,8 @@ const iview = {
38 39 BackTop,
39 40 Spin,
40 41 Steps,
41   - Breadcrumb
  42 + Breadcrumb,
  43 + Alert
42 44 };
43 45  
44 46 module.exports = iview;
45 47 \ No newline at end of file
... ...
local/routers/radio.vue
  Show/Hide comments   View file @9d69bab
1 1 <template>
2 2 <div>
3   - <Radio :checked.sync="radio">梁灏</Radio>
4   - {{ radio | json }}
5   - <div @click="radio = false">单项切换</div>
6   - <br><br><br>
7   - <Radio-group :model.sync="radioGroup" size="large" type="button" @on-change="changeGroup">
8   - <Radio value="梁灏"></Radio>
9   - <Radio value="段模"></Radio>
10   - <Radio value="倪斌"></Radio>
11   - </Radio-group>
12   - {{ radioGroup | json }}
13   - <div @click="radioGroup = '梁灏'">多项切换</div>
  3 + <Alert show-icon>
  4 + 成功的提示
  5 + </Alert>
  6 + <Alert closable show-icon>
  7 + 成功的提示
  8 + <span slot="desc">这里是成功的内容</span>
  9 + </Alert>
  10 + <Alert type="warning" closable show-icon>
  11 + 成功的提示
  12 + <span slot="desc">这里是成功的内容</span>
  13 + </Alert>
  14 + <Alert type="success" closable show-icon>
  15 + 成功的提示
  16 + <span slot="desc">这里是成功的内容</span>
  17 + </Alert>
  18 + <Alert type="error" closable show-icon @on-close="closed">
  19 + 成功的提示
  20 + <span slot="desc">这里是成功的内容</span>
  21 + </Alert>
14 22 </div>
15 23 </template>
16 24 <script>
17   - import { Radio } from 'iview';
  25 + import { Radio, Alert, Icon } from 'iview';
18 26  
19 27 const RadioGroup = Radio.Group;
20 28  
21 29 export default {
22 30 components: {
23 31 Radio,
24   - RadioGroup
  32 + RadioGroup,
  33 + Alert,
  34 + Icon
25 35 },
26 36 props: {
27 37  
... ... @@ -38,6 +48,9 @@
38 48 methods: {
39 49 changeGroup (data) {
40 50 console.log(data);
  51 + },
  52 + closed (data) {
  53 + console.log(data)
41 54 }
42 55 }
43 56 }
... ...
package.json
  Show/Hide comments   View file @9d69bab
1 1 {
2 2 "name": "iview",
3   - "version": "0.0.2",
  3 + "version": "0.0.3",
4 4 "title": "iView",
5 5 "description": "An UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
styles/components/alert.less 0 → 100644
  Show/Hide comments   View file @9d69bab
  1 +@alert-prefix-cls: ~"@{css-prefix}alert";
  2 +@icon--prefix-cls: ~"@{css-prefix}icon";
  3 +
  4 +.@{alert-prefix-cls}{
  5 + position: relative;
  6 + padding: 8px 48px 8px 16px;
  7 + border-radius: @border-radius-base;
  8 + color: @text-color;
  9 + font-size: 12px;
  10 + line-height: 16px;
  11 + margin-bottom: 10px;
  12 +
  13 + &&-with-icon{
  14 + padding: 8px 48px 8px 38px;
  15 + }
  16 +
  17 + &-icon {
  18 + font-size: 14px;
  19 + top: 8px;
  20 + left: 16px;
  21 + position: absolute;
  22 + }
  23 +
  24 + &-desc {
  25 + font-size: 12px;
  26 + color: @legend-color;
  27 + line-height: 21px;
  28 + display: none;
  29 + }
  30 +
  31 + &-success {
  32 + border: 1px solid tint(@success-color, 80%);
  33 + background-color: tint(@success-color, 90%);
  34 + .@{alert-prefix-cls}-icon {
  35 + color: @success-color;
  36 + }
  37 + }
  38 +
  39 + &-info {
  40 + border: 1px solid tint(@primary-color, 80%);
  41 + background-color: tint(@primary-color, 90%);
  42 + .@{alert-prefix-cls}-icon {
  43 + color: @primary-color;
  44 + }
  45 + }
  46 +
  47 + &-warning {
  48 + border: 1px solid tint(@warning-color, 80%);
  49 + background-color: tint(@warning-color, 90%);
  50 + .@{alert-prefix-cls}-icon {
  51 + color: @warning-color;
  52 + }
  53 + }
  54 +
  55 + &-error {
  56 + border: 1px solid tint(@error-color, 80%);
  57 + background-color: tint(@error-color, 90%);
  58 + .@{alert-prefix-cls}-icon {
  59 + color: @error-color;
  60 + }
  61 + }
  62 +
  63 + &-close {
  64 + font-size: 12px;
  65 + position: absolute;
  66 + right: 16px;
  67 + top: 8px;
  68 + overflow: hidden;
  69 + cursor: pointer;
  70 +
  71 + .@{icon--prefix-cls}-ios-close-empty {
  72 + font-size: 22px;
  73 + color: @legend-color;
  74 + transition: color @transition-time ease;
  75 + position: relative;
  76 + top: -3px;
  77 + &:hover {
  78 + color: #444;
  79 + }
  80 + }
  81 + }
  82 +
  83 + &-with-desc {
  84 + padding: 16px;
  85 + position: relative;
  86 + border-radius: @border-radius-base;
  87 + margin-bottom: 10px;
  88 + color: @text-color;
  89 + line-height: 1.5;
  90 + }
  91 +
  92 + &-with-desc&-with-icon{
  93 + padding: 16px 16px 16px 69px;
  94 + }
  95 +
  96 + &-with-desc &-desc{
  97 + display: block;
  98 + }
  99 +
  100 + &-with-desc &-message {
  101 + font-size: 14px;
  102 + color: @text-color;
  103 + display: block;
  104 + }
  105 +
  106 + &-with-desc &-icon {
  107 + top: 50%;
  108 + left: 24px;
  109 + margin-top: -21px;
  110 + font-size: 28px;
  111 + }
  112 +}
0 113 \ No newline at end of file
... ...
styles/components/index.less
  Show/Hide comments   View file @9d69bab
... ... @@ -3,4 +3,5 @@
3 3 @import "back-top";
4 4 @import "badge";
5 5 @import "circle";
6   -@import "spin";
7 6 \ No newline at end of file
  7 +@import "spin";
  8 +@import "alert";
8 9 \ No newline at end of file
... ...
styles/themes/default/custom.less
  Show/Hide comments   View file @9d69bab
... ... @@ -26,6 +26,9 @@
26 26 @grid-columns : 24;
27 27 @grid-gutter-width : 0;
28 28  
  29 +// Legend
  30 +@legend-color : #999;
  31 +
29 32 // Z-index
30 33 @zindex-affix : 10;
31 34 @zindex-back-top : 10;
... ...