Text

文本

参考文档

类型

  1. ComponentType<TextProps>

示例代码

  • React
  • Vue
  1. export default class PageView extends Component {
  2. state = {
  3. contents: [],
  4. contentsLen: 0
  5. }
  6. add = () => {
  7. this.setState(prev => {
  8. const cot = prev.contents.slice()
  9. cot.push({ text: 'hello world' })
  10. return {
  11. contents: cot,
  12. contentsLen: cot.length
  13. }
  14. })
  15. }
  16. remove = () => {
  17. this.setState(prev => {
  18. const cot = prev.contents.slice()
  19. cot.pop()
  20. return {
  21. contents: cot,
  22. contentsLen: cot.length
  23. }
  24. })
  25. }
  26. render () {
  27. return (
  28. <View className='container'>
  29. {this.state.contents.map((item, index) => (
  30. <Text key={index}>{item.text}</Text>
  31. ))}
  32. <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
  33. <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
  34. </View>
  35. )
  36. }
  37. }
  1. <template>
  2. <view class="container">
  3. <view v-for="(item, index) in contents">
  4. <text>{{item.text}} line {{index + 1}}</text>
  5. </view>
  6. <button class="btn-max-w button_style" :plain="true" type="default" @tap="add">add line</button>
  7. <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" @tap="remove">remove line</button>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. contents: [],
  14. contentsLen: 0
  15. }
  16. },
  17. methods: {
  18. add () {
  19. const cot = this.contents.slice()
  20. cot.push({ text: 'hello world' })
  21. this.contents = cot
  22. this.contentsLen = cot.length
  23. },
  24. remove () {
  25. const cot = this.contents.slice()
  26. cot.pop()
  27. this.contents = cot
  28. this.contentsLen = cot.length
  29. }
  30. }
  31. }
  32. </script>

TextProps

参数类型默认值必填说明
selectablebooleanfalse文本是否可选
space“ensp” | “emsp” | “nbsp”显示连续空格
decodebooleanfalse是否解码

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
TextProps.selectable✔️✔️✔️✔️✔️✔️
TextProps.space✔️✔️✔️
TextProps.decode✔️✔️

TSpace

space 的合法值

参数说明
ensp中文字符空格一半大小
emsp中文字符空格大小
nbsp根据字体设置的空格大小

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Text✔️✔️✔️✔️✔️✔️