add Alert component
add Alert component
This commit is contained in:
梁灏
parent
e06f5e265c
commit
9d69bab6a6
8 changed files with 250 additions and 16 deletions
101
components/alert/alert.vue
Normal file
101
components/alert/alert.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<div v-if="!closed" :class="wrapClasses" transition="fade">
|
||||
<slot name="icon" v-if="showIcon">
|
||||
<span :class="iconClasses">
|
||||
<Icon :type="iconType"></Icon>
|
||||
</span>
|
||||
</slot>
|
||||
<span :class="messageClasses"><slot></slot></span>
|
||||
<span :class="descClasses" v-el:desc><slot name="desc"></slot></span>
|
||||
<a :class="closeClasses" v-if="closable" @click="close">
|
||||
<slot name="close">
|
||||
<Icon type="ios-close-empty"></Icon>
|
||||
</slot>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-alert';
|
||||
|
||||
export default {
|
||||
components: { Icon },
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['success', 'info', 'warning', 'error']);
|
||||
},
|
||||
default: 'info'
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
closed: false,
|
||||
desc: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-${this.type}`,
|
||||
{
|
||||
[`${prefixCls}-with-icon`]: this.showIcon,
|
||||
[`${prefixCls}-with-desc`]: this.desc
|
||||
}
|
||||
]
|
||||
},
|
||||
messageClasses () {
|
||||
return `${prefixCls}-message`;
|
||||
},
|
||||
descClasses () {
|
||||
return `${prefixCls}-desc`;
|
||||
},
|
||||
closeClasses () {
|
||||
return `${prefixCls}-close`;
|
||||
},
|
||||
iconClasses () {
|
||||
return `${prefixCls}-icon`;
|
||||
},
|
||||
iconType () {
|
||||
let type = '';
|
||||
|
||||
switch (this.type) {
|
||||
case 'success':
|
||||
type = 'checkmark-circled';
|
||||
break;
|
||||
case 'info':
|
||||
type = 'information-circled';
|
||||
break;
|
||||
case 'warning':
|
||||
type = 'android-alert';
|
||||
break;
|
||||
case 'error':
|
||||
type = 'close-circled';
|
||||
break;
|
||||
}
|
||||
|
||||
return type;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close (e) {
|
||||
this.closed = true;
|
||||
this.$emit('on-close', e);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.desc = this.$els.desc.innerHTML != '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
2
components/alert/index.js
Normal file
2
components/alert/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Alert from './alert.vue';
|
||||
export default Alert;
|
||||
4
index.js
4
index.js
|
|
@ -17,6 +17,7 @@ import BackTop from './components/back-top';
|
|||
import Spin from './components/spin';
|
||||
import Steps from './components/steps';
|
||||
import Breadcrumb from './components/breadcrumb';
|
||||
import Alert from './components/alert';
|
||||
|
||||
const iview = {
|
||||
Button,
|
||||
|
|
@ -38,7 +39,8 @@ const iview = {
|
|||
BackTop,
|
||||
Spin,
|
||||
Steps,
|
||||
Breadcrumb
|
||||
Breadcrumb,
|
||||
Alert
|
||||
};
|
||||
|
||||
module.exports = iview;
|
||||
|
|
@ -1,27 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio :checked.sync="radio">梁灏</Radio>
|
||||
{{ radio | json }}
|
||||
<div @click="radio = false">单项切换</div>
|
||||
<br><br><br>
|
||||
<Radio-group :model.sync="radioGroup" size="large" type="button" @on-change="changeGroup">
|
||||
<Radio value="梁灏"></Radio>
|
||||
<Radio value="段模"></Radio>
|
||||
<Radio value="倪斌"></Radio>
|
||||
</Radio-group>
|
||||
{{ radioGroup | json }}
|
||||
<div @click="radioGroup = '梁灏'">多项切换</div>
|
||||
<Alert show-icon>
|
||||
成功的提示
|
||||
</Alert>
|
||||
<Alert closable show-icon>
|
||||
成功的提示
|
||||
<span slot="desc">这里是成功的内容</span>
|
||||
</Alert>
|
||||
<Alert type="warning" closable show-icon>
|
||||
成功的提示
|
||||
<span slot="desc">这里是成功的内容</span>
|
||||
</Alert>
|
||||
<Alert type="success" closable show-icon>
|
||||
成功的提示
|
||||
<span slot="desc">这里是成功的内容</span>
|
||||
</Alert>
|
||||
<Alert type="error" closable show-icon @on-close="closed">
|
||||
成功的提示
|
||||
<span slot="desc">这里是成功的内容</span>
|
||||
</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'iview';
|
||||
import { Radio, Alert, Icon } from 'iview';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup
|
||||
RadioGroup,
|
||||
Alert,
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
|
||||
|
|
@ -38,6 +48,9 @@
|
|||
methods: {
|
||||
changeGroup (data) {
|
||||
console.log(data);
|
||||
},
|
||||
closed (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.3",
|
||||
"title": "iView",
|
||||
"description": "An UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
|
|||
112
styles/components/alert.less
Normal file
112
styles/components/alert.less
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
@alert-prefix-cls: ~"@{css-prefix}alert";
|
||||
@icon--prefix-cls: ~"@{css-prefix}icon";
|
||||
|
||||
.@{alert-prefix-cls}{
|
||||
position: relative;
|
||||
padding: 8px 48px 8px 16px;
|
||||
border-radius: @border-radius-base;
|
||||
color: @text-color;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&&-with-icon{
|
||||
padding: 8px 48px 8px 38px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 14px;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-success {
|
||||
border: 1px solid tint(@success-color, 80%);
|
||||
background-color: tint(@success-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
border: 1px solid tint(@primary-color, 80%);
|
||||
background-color: tint(@primary-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-warning {
|
||||
border: 1px solid tint(@warning-color, 80%);
|
||||
background-color: tint(@warning-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
border: 1px solid tint(@error-color, 80%);
|
||||
background-color: tint(@error-color, 90%);
|
||||
.@{alert-prefix-cls}-icon {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.@{icon--prefix-cls}-ios-close-empty {
|
||||
font-size: 22px;
|
||||
color: @legend-color;
|
||||
transition: color @transition-time ease;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
&:hover {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-with-desc {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
border-radius: @border-radius-base;
|
||||
margin-bottom: 10px;
|
||||
color: @text-color;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&-with-desc&-with-icon{
|
||||
padding: 16px 16px 16px 69px;
|
||||
}
|
||||
|
||||
&-with-desc &-desc{
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-with-desc &-message {
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-with-desc &-icon {
|
||||
top: 50%;
|
||||
left: 24px;
|
||||
margin-top: -21px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,4 +3,5 @@
|
|||
@import "back-top";
|
||||
@import "badge";
|
||||
@import "circle";
|
||||
@import "spin";
|
||||
@import "spin";
|
||||
@import "alert";
|
||||
|
|
@ -26,6 +26,9 @@
|
|||
@grid-columns : 24;
|
||||
@grid-gutter-width : 0;
|
||||
|
||||
// Legend
|
||||
@legend-color : #999;
|
||||
|
||||
// Z-index
|
||||
@zindex-affix : 10;
|
||||
@zindex-back-top : 10;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue