Text 文本

基础用法

Text 文本 - 图1

  1. <se-text>
  2.   this is first line\nthis is second line
  3. </se-text>

space

Text 文本 - 图2

  1. <se-text space="emsp">
  2.   this is first line\nthis is second line
  3. </se-text>

space 的合法值

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

动态更新

Text 文本 - 图3

  1. <se-input
  2.   type="textarea"
  3.   :value="message"
  4.   placeholder="请输入文案"
  5.   @change="onChange"
  6.   style="width: 100%;"
  7. />
  8. <se-text space="nbsp">
  9.   {{ message }}
  10. </se-text>
  12. <script>
  13.   export default {
  14.     data() {
  15.       return {
  16.         message: `this is first line\nthis is second line &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;`
  17.       }
  18.     },
  19.     methods: {
  20.       onChange(e) {
  21.         this.message = e.detail.value
  22.       }
  23.     }
  24.   }
  25. </script>

嵌套

只支持 text 嵌套

Text 文本 - 图4

<se-text>
  this is first line
  <span>不支持</span>
  <se-text>
    this is second line
    <se-text>
      this is third line
      <a>不支持</a>
    </se-text>
  </se-text>
</se-text>

Props

属性类型默认值必填说明
selectablebooleanfalsefalse文本是否可选
spacestring-false显示连续空格，可选值：ensp / emsp / nbsp

Tip

  • 各个操作系统的空格标准并不一致。
  • text 组件内只支持 text 嵌套。
  • 除了文本节点以外的其他节点都无法长按选中。