-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
200 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |