Text 文本

文本的常见操作。

基础用法

由 type 属性来选择 Text 的类型。

DefaultPrimarySuccessInfoWarningDanger

<template>
  <div class="text-box">
    <v-text>Default</v-text>
    <v-text type="primary">Primary</v-text>
    <v-text type="success">Success</v-text>
    <v-text type="info">Info</v-text>
    <v-text type="warning">Warning</v-text>
    <v-text type="danger">Danger</v-text>
  </div>
</template>
<style scoped>
.text-box {
  display: flex;
  gap: 10px;
}
</style>

尺寸

使用 size 属性配置尺寸，可选的尺寸大小有: large 和 small。

LargeDefaultSmall

<template>
  <div class="text-box">
    <v-text size="large">Large</v-text>
    <v-text>Default</v-text>
    <v-text size="small">Small</v-text>
  </div>
</template>
<style scoped>
.text-box {
  display: flex;
  gap: 10px;
}
</style>

覆盖

使用属性 tag 覆盖元素。

span

This is a paragraph.

BoldItalic This is _subscript This is ^superscriptInsertedDeletedMarked

<template>
  <div class="text-box">
    <v-text>span</v-text>
    <v-text tag="p">This is a paragraph.</v-text>
    <v-text tag="b">Bold</v-text>
    <v-text tag="i">Italic</v-text>
    <v-text>
      This is
      <v-text tag="sub" size="small">subscript</v-text>
    </v-text>
    <v-text>
      This is
      <v-text tag="sup" size="small">superscript</v-text>
    </v-text>
    <v-text tag="ins">Inserted</v-text>
    <v-text tag="del">Deleted</v-text>
    <v-text tag="mark">Marked</v-text>
  </div>
</template>
<style scoped>
.text-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
</style>

Text Attributes

属性名	说明	类型	默认值
type	类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
size	大小	'large' | 'small'	—
tag	自定义元素标签	string	span

Text Slots

插槽名	说明
default	默认内容