Typography 排版

大约 3 分钟

Typography 排版

文本的基本格式。

何时使用

当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。
当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。

示例

基本用法

可交互用法

Trigger edit with:

<template>
  <f-typography-paragraph v-model:content="editableStr" editable />
  <f-typography-paragraph v-model:content="customIconStr" editable>
    <template #editableIcon><HighlightOutlined /></template>
    <template #editableTooltip>click to edit text</template>
  </f-typography-paragraph>
  Trigger edit with:&nbsp;&nbsp;
  <f-radio-group :value="stateToRadio()" @change="e => (chooseTrigger = radioToState(e.target.value))">
    <f-radio value="icon">icon</f-radio>
    <f-radio value="text">text</f-radio>
    <f-radio value="both">both</f-radio>
  </f-radio-group>
  <f-typography-paragraph v-model:content="clickTriggerStr" :editable="{ triggerType: chooseTrigger }">
    <template #editableTooltip>click to edit text</template>
  </f-typography-paragraph>
  <f-typography-paragraph v-model:content="customEnterIconStr" editable>
    <template #editableIcon><HighlightOutlined /></template>
    <template #editableTooltip>click to edit text</template>
    <template #editableEnterIcon="{ className }">
      <CheckOutlined :class="className" />
    </template>
  </f-typography-paragraph>
  <f-typography-paragraph v-model:content="noEnterIconStr" editable>
    <template #editableIcon><HighlightOutlined /></template>
    <template #editableTooltip>click to edit text</template>
    <template #editableEnterIcon>{{ null }}</template>
  </f-typography-paragraph>
  <f-typography-paragraph v-model:content="hideTooltipStr" :editable="{ tooltip: false }" />
  <f-typography-paragraph
    v-model:content="lengthLimitedStr"
    :editable="{ maxlength: 50, autoSize: { maxRows: 5, minRows: 3 } }"
  />

  <f-typography-paragraph copyable>This is a copyable text.</f-typography-paragraph>
  <f-typography-paragraph :copyable="{ text: 'Hello, Ant Design!' }"> Replace copy text. </f-typography-paragraph>
  <f-typography-paragraph copyable content="Custom Copy icon and replace tooltips text.">
    <template #copyableIcon="{ copied }">
      <SmileOutlined v-if="!copied" key="copy-icon" />
      <SmileFilled v-else key="copied-icon" />
    </template>
    <template #copyableTooltip="{ copied }">
      <span v-if="!copied" key="copy-tooltip">click here</span>
      <span v-else key="copied-tooltip">you clicked!!</span>
    </template>
  </f-typography-paragraph>
  <f-typography-paragraph :copyable="{ tooltip: false }"> Hide Copy tooltips. </f-typography-paragraph>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { HighlightOutlined, SmileOutlined, SmileFilled, CheckOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    HighlightOutlined,
    SmileOutlined,
    SmileFilled,
    CheckOutlined,
  },
  setup() {
    const editableStr = ref('This is an editable text.')
    watch(editableStr, () => {
      console.log('editableStr', editableStr.value)
    })
    const chooseTrigger = ref<('icon' | 'text')[]>(['icon'])

    const radioToState = (input: string): ('icon' | 'text')[] => {
      switch (input) {
        case 'text':
          return ['text']
        case 'both':
          return ['icon', 'text']
        case 'icon':
        default:
          return ['icon']
      }
    }

    const stateToRadio = () => {
      if (chooseTrigger.value.indexOf('text') !== -1) {
        return chooseTrigger.value.indexOf('icon') !== -1 ? 'both' : 'text'
      }
      return 'icon'
    }
    return {
      radioToState,
      stateToRadio,
      editableStr,
      customIconStr: ref('Custom Edit icon and replace tooltip text.'),
      hideTooltipStr: ref('Hide Edit tooltip.'),
      lengthLimitedStr: ref('This is an editable text with limited length.'),
      clickTriggerStr: ref('Text or icon as trigger - click to start editing.'),
      chooseTrigger,
      customEnterIconStr: ref('Editable text with a custom enter icon in edit field.'),
      noEnterIconStr: ref('Editable text with no enter icon in edit field.'),
    }
  },
})
</script>

API

Typography.Text

参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string	-
copyable	是否可拷贝，为对象时可进行各种自定义	boolean \| copyable	false	copyable
delete	添加删除线样式	boolean	false
disabled	禁用文本	boolean	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean \| editable	false	editable
ellipsis	自动溢出省略	boolean	false
keyboard	添加键盘样式	boolean	false
mark	添加标记样式	boolean	false
strong	是否加粗	boolean	false
type	文本类型	`secondary` \| `success` \| `warning` \| `danger`	-
underline	添加下划线样式	boolean	false

Typography.Title

参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string	-
copyable	是否可拷贝，为对象时可进行各种自定义	boolean \| copyable	false	copyable
delete	添加删除线样式	boolean	false
disabled	禁用文本	boolean	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean \| editable	false	editable
ellipsis	自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等	boolean \| ellipsis	false	ellipsis
level	重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5`	number: 1, 2, 3, 4, 5	1
mark	添加标记样式	boolean	false
type	文本类型	`secondary` \| `success` \| `warning` \| `danger`	-
underline	添加下划线样式	boolean	false

Typography.Paragraph

参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string	-
copyable	是否可拷贝，为对象时可进行各种自定义	boolean \| copyable	false	copyable
delete	添加删除线样式	boolean	false
disabled	禁用文本	boolean	false
editable	是否可编辑，为对象时可对编辑进行控制	boolean \| editable	false	editable
ellipsis	自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等	boolean \| ellipsis	false	ellipsis
mark	添加标记样式	boolean	false
strong	是否加粗	boolean	false
type	文本类型	`secondary` \| `success` \| `warning` \| `danger`	-
underline	添加下划线样式	boolean	false

slots

名称	说明	参数	默认值	版本
copyableIcon	自定义拷贝图标	`{ copied: boolean }`	`copied ? <CheckOutlined /> : <CopyOutlined />`
copyableTooltip	自定义提示文案，当 `copyable.tooltip = false` 时关闭	`{ copied: boolean }`	`copied ? '复制成功' : '复制'`
editableIcon	自定义编辑图标	-	<EditOutlined />
editableTooltip	自定义提示文本，当 `editable.tooltip = false` 时关闭	-	`编辑`
ellipsisSymbol	自定义展开描述文案	-	-
ellipsisTooltip	省略时，展示提示信息	-	-
enterEnterIcon	在编辑段中自定义“enter”图标	`{className: string}`	`<EnterOutlined />`	3.0

copyable

  {
    text: string,
    onCopy: function,
    tooltip: false,
  }

参数	说明	类型	默认值
text	拷贝到剪切板里的文本	string	-
tooltip	是否展示提示文本	boolean	true
onCopy	拷贝成功的回调函数	function	-

editable

  {
    tooltip: boolean,
    editing: boolean,
    maxlength: number,
    autoSize: boolean | { minRows: number, maxRows: number },
    onStart: function,
    onChange: function(string),
    onCancel: function,
    onEnd: function,
    triggerType: ('icon' | 'text')[],
  }

参数	说明	类型	默认值
autoSize	自动 resize 文本域	boolean \| `{ minRows: number, maxRows: number }`	-
editing	控制是否是编辑中状态	boolean	false
maxlength	编辑中文本域最大长度	number	-
tooltip	是否展示提示文本	boolean	true
triggerType	Edit mode trigger - icon, text or both (not specifying icon as trigger hides it)	Array<`icon`\|`text`>	[`icon`]
onCancel	按 ESC 退出编辑状态时触发	function	-
onChange	文本域编辑时触发	function(event)	-
onEnd	按 ENTER 结束编辑状态时触发	function	-
onStart	进入编辑中状态时触发	function	-

ellipsis

  {
    rows: number,
    expandable: boolean,
    suffix: string,
    symbol: string,
    tooltip: boolean,
    onExpand: function(event),
    onEllipsis: function(ellipsis),
  }

参数	说明	类型	默认值
expandable	是否可展开	boolean	-
rows	最多显示的行数	number	-
suffix	自定义省略内容后缀	string	-
symbol	自定义展开描述文案	string	`展开`
tooltip	省略时，展示提示信息	boolean \| string	-
onEllipsis	触发省略时的回调	function(ellipsis)	-
onExpand	点击展开时的回调	function(event)	-

Typography 排版

# Typography 排版

# 何时使用

# 示例

# API

# Typography.Text

# Typography.Title

# Typography.Paragraph

# slots

# copyable

# editable

# ellipsis

Typography 排版

何时使用

示例

API

Typography.Text

Typography.Title

Typography.Paragraph

slots

copyable

editable

ellipsis