weex-flymeui
Version:
A Flyme Style UI library based on Weex for Creator.
51 lines (43 loc) • 2.26 kB
Markdown
# fm-foldable-text
> 在大段文字上添加一个更多按钮
## 规则
- 支持三种文字大小
- 支持设置默认状态
## 使用方法
```html
<template>
<div class="mzui-demo">
<!-- 可折叠文本 -->
<fm-foldable-text :text="text" width="340"></fm-foldable-text>
<!-- 不同大小 -->
<fm-foldable-text :text="text" width="340"></fm-foldable-text>
<fm-foldable-text :text="text" size="large" width="340"></fm-foldable-text>
<fm-foldable-text :text="text" size="huge" width="340"></fm-foldable-text>
<!-- 限制不同行数 -->
<fm-foldable-text :text="text" width="340" lines="3"></fm-foldable-text>
<!-- 默认不折叠状态 -->=
<fm-foldable-text :text="text" width="340" :folded="false"></fm-foldable-text>
<!-- 自定义样式 -->
<fm-foldable-text :text="text" width="340" :textStyle="{fontSize: 18, lineHeight: 30, color: 'red'}" :tipStyle="{fontSize: 18, lineHeight: 30, color: 'green'"></fm-foldable-text>
</div>
</template>
<script>
import { FmFoldableText } from 'weex-flymeui';
export default {
components: { FmFoldableText },
data: () => ({
text: '该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。'
})
};
</script>
```
更多详细代码例子可以参考 [demo](https://github.com/FlymeApps/weex-flymeui/blob/master/example/component/foldableText/index.vue)
## 可配置参数
| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| text | `String` | `Y` |`''` | 文本内容 |
| width | `Number` | `N` |`1020` | 文本内容 |
| size | `String` | `N` |`'small'` | 文本大小,有 small, large, huge 三种 |
| folded | `Boolean` | `N` |`true` | 文本是否折叠,默认为 true |
| textStyle | `Object` | `N` |`{}` | 自定义文本的样式 |
| tipStyle | `Object` | `N` |`{}` | 自定义提示文字的样式 |