lighting-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
85 lines (71 loc) • 2.46 kB
Markdown
# lc-badge
> 徽标组件，可实现消息提醒等功能
### 规则
- 一般集成在cell中或者底部导航栏，提醒用户有未处理消息
## [Demo](http://res.lightyy.com/lightui/example/badge/?_wx_tpl=http%3A%2F%2Fres.lightyy.com%2Flightui%2Fexample%2Fbadge%2Findex.native.js)
<img src="./badge.png" width="240"/>
<img src="./badge-scan.png" width="160">
## 使用方法
```vue
<template>
<div class="wxc-demo">
<scroller>
<title title="lc-badge"></title>
<category title="badge in cell"></category>
<lc-cell label="消息"
title="[恭喜发财，大吉大利]"
:link="link"
:has-bottom-border="false"
@LcCellClicked="LcCellClicked"
:has-margin="false">
<lc-badge slot='value'></lc-badge>
</lc-cell>
<lc-cell label="订单"
title="未处理"
:link="link"
:has-top-border="false"
:has-bottom-border="false"
@LcCellClicked="LcCellClicked"
:has-margin="false">
<lc-badge text="8" slot='value'></lc-badge>
</lc-cell>
<lc-cell label="发现"
title="好友"
:link="link"
:has-top-border="false"
:has-bottom-border="false"
@LcCellClicked="LcCellClicked"
:has-margin="false">
<lc-badge text="99+" slot='value'></lc-badge>
</lc-cell>
<lc-cell label="发现"
title="好友"
:link="link"
:has-top-border="false"
@LcCellClicked="LcCellClicked"
:has-margin="false">
<lc-badge text="NEW" slot='value'></lc-badge>
</lc-cell>
</scroller>
</div>
</template>
<script>
import { LcBadge, LcCell } from '../../index';
import Title from '../_mods/title.vue';
import Category from '../_mods/category.vue';
export default {
components: { Title, Category, LcBadge, LcCell },
methods:{
LcCellClicked(){
console.log('clicked');
}
}
}
</script>
```
### API
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`text`** | `string` | `N` | `-` | 徽标中的文字 |
- *1：没有传入文字，徽标是圆点样式。
- *2：单字符与多字符的徽标样式不同。