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