1 | import { ComponentType } from 'react'
|
2 | import { StandardProps } from './common'
|
3 | interface TextProps extends StandardProps {
|
4 | /** 文本是否可选
|
5 | * @default false
|
6 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
|
7 | */
|
8 | selectable?: boolean
|
9 | /** 文本是否可选,该属性会使文本节点显示为 inline-block
|
10 | * @default false
|
11 | * @supported weapp, h5, harmony_hybrid
|
12 | */
|
13 | userSelect?: boolean
|
14 | /** 显示连续空格
|
15 | * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
|
16 | */
|
17 | space?: keyof TextProps.TSpace
|
18 | /** 是否解码
|
19 | * @default false
|
20 | * @supported weapp, alipay, tt, qq, jd
|
21 | * @h5 默认解码,不支持设置
|
22 | */
|
23 | decode?: boolean
|
24 | /** 多行省略,值须大于等于 1,表现同 css 的 -webkit-line-clamp 属性一致。
|
25 | * @supported alipay
|
26 | */
|
27 | numberOfLines?: number
|
28 | /**
|
29 | * 文本溢出处理
|
30 | * @supported weapp-skyline
|
31 | * @default 'visible'
|
32 | */
|
33 | overflow?: keyof TextProps.Overflow
|
34 | /** 限制文本最大行数
|
35 | * @supported weapp, harmony
|
36 | */
|
37 | maxLines?: number
|
38 | }
|
39 | declare namespace TextProps {
|
40 | /** space 的合法值 */
|
41 | interface TSpace {
|
42 | /** 中文字符空格一半大小 */
|
43 | ensp
|
44 | /** 中文字符空格大小 */
|
45 | emsp
|
46 | /** 根据字体设置的空格大小 */
|
47 | nbsp
|
48 | }
|
49 | interface Overflow {
|
50 | /** 修剪文本 */
|
51 | clip
|
52 | /** 淡出 */
|
53 | fade
|
54 | /** 显示省略号 */
|
55 | ellipsis
|
56 | /** 文本不截断 */
|
57 | visible
|
58 | }
|
59 | }
|
60 | /** 文本
|
61 | * @classification base
|
62 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
|
63 | * @example_react
|
64 | * ```tsx
|
65 | * export default class PageView extends Component {
|
66 | * state = {
|
67 | * contents: [],
|
68 | * contentsLen: 0
|
69 | * }
|
70 | *
|
71 | * add = () => {
|
72 | * this.setState(prev => {
|
73 | * const cot = prev.contents.slice()
|
74 | * cot.push({ text: 'hello world' })
|
75 | * return {
|
76 | * contents: cot,
|
77 | * contentsLen: cot.length
|
78 | * }
|
79 | * })
|
80 | * }
|
81 | *
|
82 | * remove = () => {
|
83 | * this.setState(prev => {
|
84 | * const cot = prev.contents.slice()
|
85 | * cot.pop()
|
86 | * return {
|
87 | * contents: cot,
|
88 | * contentsLen: cot.length
|
89 | * }
|
90 | * })
|
91 | * }
|
92 | *
|
93 | * render () {
|
94 | * return (
|
95 | * <View className='container'>
|
96 | * {this.state.contents.map((item, index) => (
|
97 | * <Text key={index}>{item.text}</Text>
|
98 | * ))}
|
99 | * <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
|
100 | * <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
|
101 | * </View>
|
102 | * )
|
103 | * }
|
104 | * }
|
105 | * ```
|
106 | * @example_vue
|
107 | * ``` html
|
108 | * <template>
|
109 | * <view class="container">
|
110 | * <view v-for="(item, index) in contents">
|
111 | * <text>{{item.text}} line {{index + 1}}</text>
|
112 | * </view>
|
113 | * <button class="btn-max-w button_style" :plain="true" type="default" `@tap="add">add line</button>
|
114 | * <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" `@tap="remove">remove line</button>
|
115 | * </template>
|
116 | *
|
117 | * <script>
|
118 | * export default {
|
119 | * data() {
|
120 | * return {
|
121 | * contents: [],
|
122 | * contentsLen: 0
|
123 | * }
|
124 | * },
|
125 | * methods: {
|
126 | * add () {
|
127 | * const cot = this.contents.slice()
|
128 | * cot.push({ text: 'hello world' })
|
129 | * this.contents = cot
|
130 | * this.contentsLen = cot.length
|
131 | * },
|
132 | *
|
133 | * remove () {
|
134 | * const cot = this.contents.slice()
|
135 | * cot.pop()
|
136 | * this.contents = cot
|
137 | * this.contentsLen = cot.length
|
138 | * }
|
139 | * }
|
140 | * }
|
141 | * </script>
|
142 | * ```
|
143 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/text.html
|
144 | */
|
145 | declare const Text: ComponentType<TextProps>
|
146 | export { Text, TextProps }
|