Skip to content

Commit

Permalink
add Alert
Browse files Browse the repository at this point in the history
  • Loading branch information
icarusion committed Jun 4, 2018
1 parent dacbac8 commit e7e8ba8
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 0 deletions.
74 changes: 74 additions & 0 deletions src/code/alert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
let code = {};

code.import = `
"usingComponents": {
"i-alert": "../../dist/alert/index"
}
`;
code.usage = `
<i-alert>
An info prompt
</i-alert>
<i-alert type="success">
An success prompt
</i-alert>
<i-alert type="warning">
An warning prompt
</i-alert>
<i-alert type="error">
An error prompt
</i-alert>
<i-alert>
An info prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert type="success">
An success prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert type="warning">
An warning prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert type="error">
An error prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert show-icon>
An info prompt
</i-alert>
<i-alert type="success" show-icon>
An success prompt
</i-alert>
<i-alert type="warning" show-icon>
An warning prompt
</i-alert>
<i-alert type="error" show-icon>
An error prompt
</i-alert>
<i-alert show-icon desc>
An info prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert type="success" show-icon desc>
An success prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert type="warning" show-icon desc>
An warning prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert type="error" show-icon desc>
An error prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
<i-alert closable bind:close="handleClick">
An info prompt
</i-alert>
<i-alert type="success" show-icon desc closable bind:close="handleClick">
An success prompt
<view slot="desc">Content of prompt. Content of prompt.</view>
</i-alert>
`;

export default code;
7 changes: 7 additions & 0 deletions src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/badge.vue'], resolve)
},
{
path: '/components/alert',
meta: {
title: '警告提示 Alert'
},
component: (resolve) => require(['./views/components/alert.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
119 changes: 119 additions & 0 deletions src/views/components/alert.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<template>
<i-article>
<article>
<h1>Alert 警告提示</h1>
<Anchor title="概述" h2></Anchor>
<p>静态地呈现一些警告信息,可手动关闭。</p>
<Anchor title="使用指南" h2></Anchor>
<p>在 .json 中引入组件</p>
<i-code bg lang="json">{{ code.import }}</i-code>
<Anchor title="示例" h2></Anchor>
<i-code bg lang="html">{{ code.usage }}</i-code>
<ad></ad>

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Alert properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>警告提示样式,可选值为 info、success、warning、error</td>
<td>String</td>
<td>info</td>
</tr>
<tr>
<td>closable</td>
<td>是否可关闭</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>show-icon</td>
<td>是否显示图标</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>desc</td>
<td>是否设置了 desc slot</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<Anchor title="Alert events" h3></Anchor>
<table>
<thead>
<tr>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>bind:close</td>
<td>点击关闭按钮时触发</td>
<td>-</td>
</tr>
</tbody>
</table>
<Anchor title="Cell slot" h3></Anchor>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>默认</td>
<td>标题</td>
</tr>
<tr>
<td>desc</td>
<td>描述内容</td>
</tr>
</tbody>
</table>
</div>
</article>
</i-article>
</template>
<script>
import iArticle from '../../components/article.vue';
import iCode from 'iCode';
import Demo from '../../components/demo.vue';
import Code from '../../code/alert';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>

0 comments on commit e7e8ba8

Please sign in to comment.