UNPKG

weex-flymeui

Version:

A Flyme Style UI library based on Weex for Creator.

51 lines (43 loc) 2.26 kB
# 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` |`{}` | 自定义提示文字的样式 |