support Alert
support Alert
This commit is contained in:
parent
2d5ba27837
commit
5d122b374c
12 changed files with 69 additions and 60 deletions
|
@ -22,6 +22,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/steps">Steps</router-link></li>
|
||||
<li><router-link to="/timeline">Timeline</router-link></li>
|
||||
<li><router-link to="/switch">Switch</router-link></li>
|
||||
<li><router-link to="/alert">Alert</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
@ -52,6 +52,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/switch',
|
||||
component: require('./routers/switch.vue')
|
||||
},
|
||||
{
|
||||
path: '/alert',
|
||||
component: require('./routers/alert.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
@ -1,33 +1,35 @@
|
|||
<template>
|
||||
<Alert show-icon banner closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon>成功提示文案</Alert>
|
||||
<Alert type="warning" show-icon banner>警告提示文案</Alert>
|
||||
<Alert type="error" show-icon>错误提示文案</Alert>
|
||||
<Alert show-icon>
|
||||
消息提示文案
|
||||
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
|
||||
</Alert>
|
||||
<Alert type="success" show-icon>
|
||||
成功提示文案
|
||||
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
|
||||
</Alert>
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
<Alert type="error" show-icon>
|
||||
错误提示文案
|
||||
<span slot="desc">
|
||||
<div>
|
||||
<Alert show-icon banner closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon>成功提示文案</Alert>
|
||||
<Alert type="warning" show-icon banner>警告提示文案</Alert>
|
||||
<Alert type="error" show-icon>错误提示文案</Alert>
|
||||
<Alert show-icon>
|
||||
消息提示文案
|
||||
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
|
||||
</Alert>
|
||||
<Alert type="success" show-icon>
|
||||
成功提示文案
|
||||
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
|
||||
</Alert>
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
<Alert type="error" show-icon>
|
||||
错误提示文案
|
||||
<span slot="desc">
|
||||
自定义错误描述文案。
|
||||
</span>
|
||||
</Alert>
|
||||
<Alert show-icon>
|
||||
自定义图标
|
||||
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
|
||||
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
|
||||
</Alert>
|
||||
</Alert>
|
||||
<Alert show-icon closable>
|
||||
自定义图标
|
||||
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
|
||||
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
|
||||
</Alert>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Alert, Icon } from 'iview';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue