Python私教张大鹏 Vue3整合AntDesignVue之文本组件

案例：展示标题

核心代码：

<a-typography>
    <a-typography-title>Introduction</a-typography-title>
</a-typography>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>这是一个标题</a-typography-title>
  </a-typography>
</template>

在这里插入图片描述

案例：展示段落

核心代码：

<template>
  <a-typography>
    <a-typography-title>美国新闻稿发布-华尔街日报</a-typography-title>
    <a-typography-paragraph>
      媒体介绍：华尔街日报（The Wall Street Journal）于1889年创刊，是美国付费发行量最大的财经报纸，其发行量超过200万份。该报出版于美国纽约，主要报道财经新闻，侧重金融商业报道，其影响力巨大。《华尔街日报》的读者大多为政治、经济、教育和医学界人士、金融大亨和经营管理人员以及股票市场的投资者。
    </a-typography-paragraph>
  </a-typography>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>美国新闻稿发布-华尔街日报</a-typography-title>
    <a-typography-paragraph>
      媒体介绍：华尔街日报（The Wall Street
      Journal）于1889年创刊，是美国付费发行量最大的财经报纸，其发行量超过200万份。该报出版于美国纽约，主要报道财经新闻，侧重金融商业报道，其影响力巨大。《华尔街日报》的读者大多为政治、经济、教育和医学界人士、金融大亨和经营管理人员以及股票市场的投资者。
    </a-typography-paragraph>
    <a-typography-paragraph>
      该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，其读者每天超2000万人。《华尔街日报》是美国的高端报纸，读者群的平均家庭年收入达15万美元。针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，为潜在用户提供免费内容资源，独家新闻采取收费。
    </a-typography-paragraph>
  </a-typography>
</template>

在这里插入图片描述

案例：展示重要内容

核心代码：

<a-typography-text strong>
  uniform the user interface specs for internal background projects, lower the unnecessary
  cost of design differences and implementation and liberate the resources of design and
  front-end development.
</a-typography-text>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>美国新闻稿发布-华尔街日报</a-typography-title>
    <a-typography-paragraph>
      媒体介绍：华尔街日报（The Wall Street
      Journal）于1889年创刊，是美国付费发行量最大的财经报纸，其发行量超过200万份。该报出版于美国纽约，主要报道财经新闻，侧重金融商业报道，其影响力巨大。《华尔街日报》的读者大多为政治、经济、教育和医学界人士、金融大亨和经营管理人员以及股票市场的投资者。
    </a-typography-paragraph>
    <a-typography-text strong>
      该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，其读者每天超2000万人。《华尔街日报》是美国的高端报纸，读者群的平均家庭年收入达15万美元。针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，为潜在用户提供免费内容资源，独家新闻采取收费。
    </a-typography-text>
  </a-typography>
</template>

在这里插入图片描述

案例：展示二级标题

核心代码：

<a-typography-title :level="2">Guidelines and Resources</a-typography-title>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>美国新闻稿发布-华尔街日报</a-typography-title>
    <a-typography-title :level="2">二级标题</a-typography-title>
    <a-typography-paragraph>
      媒体介绍：华尔街日报（The Wall Street
      Journal）于1889年创刊，是美国付费发行量最大的财经报纸，其发行量超过200万份。该报出版于美国纽约，主要报道财经新闻，侧重金融商业报道，其影响力巨大。《华尔街日报》的读者大多为政治、经济、教育和医学界人士、金融大亨和经营管理人员以及股票市场的投资者。
    </a-typography-paragraph>
    <a-typography-title :level="2">二级标题</a-typography-title>
    <a-typography-paragraph>
      该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，其读者每天超2000万人。《华尔街日报》是美国的高端报纸，读者群的平均家庭年收入达15万美元。针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，为潜在用户提供免费内容资源，独家新闻采取收费。
    </a-typography-paragraph>
  </a-typography>
</template>

在这里插入图片描述

案例：展示代码片段

核心代码：

<a-typography-text code>Sketch</a-typography-text>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>Python代码片段</a-typography-title>
    <a-typography-text code>
      def add(a, b):
        return a + b
      print(add(11, 22))
    </a-typography-text>
  </a-typography>
</template>

在这里插入图片描述

案例：展示链接

核心代码：

<a-typography-link href="/docs/resources">Resource Download</a-typography-link>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>友情链接</a-typography-title>
    <a-typography-paragraph>
      参考链接：
      <a-typography-link href="http://www.baidu.com">百度</a-typography-link>
      <a-typography-link href="https://www.sohu.com/">搜狐</a-typography-link>
      <a-typography-link href="https://www.sina.com/">新浪</a-typography-link>
    </a-typography-paragraph>
  </a-typography>
</template>

在这里插入图片描述

案例：展示键盘快捷键

核心代码：

<a-typography-text keyboard>Esc</a-typography-text>

vue3示例：

<template>
  <a-typography>
    <a-typography-title>常用快捷键</a-typography-title>
    <a-typography-paragraph>
      <a-typography-text keyboard>ctrl + c</a-typography-text>
      <a-typography-text>复制</a-typography-text>
    </a-typography-paragraph>

    <a-typography-paragraph>
      <a-typography-text keyboard>ctrl + v</a-typography-text>
      <a-typography-text>粘贴</a-typography-text>
    </a-typography-paragraph>
  </a-typography>
</template>
<script setup lang="ts">
</script>

在这里插入图片描述

案例：超过一行变省略号

核心代码：

<a-typography-paragraph
    :ellipsis="ellipsis"
    content=" Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team."
  />

vue3示例：

<template>
  <a-typography>
    <a-typography-title>超过一行变省略号</a-typography-title>
    <a-typography-paragraph ellipsis>
      该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，其读者每天超2000万人。《华尔街日报》是美国的高端报纸，读者群的平均家庭年收入达15万美元。针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，为潜在用户提供免费内容资源，独家新闻采取收费。
    </a-typography-paragraph>
  </a-typography>
</template>

在这里插入图片描述

案例：段落可编辑

核心代码：

<a-typography-paragraph v-model:content="editableStr" editable />

vue3示例：

<script setup="">
import {ref} from "vue";

const msg = ref("可编辑的文本，不信你试试")
</script>
<template>
  <a-typography>
    <a-typography-title>可编辑的文本</a-typography-title>
    <a-typography-paragraph v-model:content="msg" editable></a-typography-paragraph>
  </a-typography>
</template>
<style scoped>

</style>

在这里插入图片描述

案例：段落可复制

核心代码：

<a-typography-paragraph :copyable="{ tooltip: false }">
  Hide Copy tooltips.
</a-typography-paragraph>

vue3示例：

<script setup="">
import {ref} from "vue";

const msg=ref("可编辑的文本")
</script>
<template>
<a-typography>
  <a-typography-title>可复制的文本</a-typography-title>
  <a-typography-paragraph copyable>这个文本可以被复制，不信你试试</a-typography-paragraph>
  <a-typography-paragraph v-model:content="msg" editable/>
</a-typography>
</template>
<style scoped>

</style>

在这里插入图片描述

案例：文本样式

核心代码：

<template>
  <a-space direction="vertical">
    <a-typography-text>Ant Design Vue (default)</a-typography-text>
    <a-typography-text type="secondary">Ant Design Vue (secondary)</a-typography-text>
    <a-typography-text type="success">Ant Design Vue (success)</a-typography-text>
    <a-typography-text type="warning">Ant Design Vue (warning)</a-typography-text>
    <a-typography-text type="danger">Ant Design Vue (danger)</a-typography-text>
    <a-typography-text disabled>Ant Design Vue (disabled)</a-typography-text>
    <a-typography-text mark>Ant Design Vue (mark)</a-typography-text>
    <a-typography-text code>Ant Design Vue (code)</a-typography-text>
    <a-typography-text keyboard>Ant Design Vue (keyboard)</a-typography-text>
    <a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
    <a-typography-text delete>Ant Design Vue (delete)</a-typography-text>
    <a-typography-text strong>Ant Design Vue (strong)</a-typography-text>
    <a-typography-link href="https://antdv.com" target="_blank">
      Ant Design Vue (Link)
    </a-typography-link>
  </a-space>
</template>

vue3示例：

<script setup="">
</script>
<template>
  <a-typography>
    <a-typography-title>文本样式</a-typography-title>
    <a-typography-paragraph>
      <a-typography-text>默认样式</a-typography-text>
    </a-typography-paragraph>
    <a-typography-paragraph>
      <a-typography-text type="secondary">secondary 样式</a-typography-text>
    </a-typography-paragraph>
    <a-typography-paragraph>
      <a-typography-text type="warning">warning 样式</a-typography-text>
    </a-typography-paragraph>
    <a-typography-paragraph>
      <a-typography-text type="success">success 样式</a-typography-text>
    </a-typography-paragraph>
    <a-typography-paragraph>
      <a-typography-text type="danger">danger 样式</a-typography-text>
    </a-typography-paragraph>
  </a-typography>
</template>
<style scoped>

</style>

在这里插入图片描述

案例：文本划线

核心代码：

<a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
<a-typography-text delete>Ant Design Vue (delete)</a-typography-text>

vue3示例：

<script setup="">
</script>
<template>
  <a-typography>
    <a-typography-title>文本下划线和中划线</a-typography-title>
    <a-typography-paragraph>
      <a-typography-text underline>下划线</a-typography-text>
    </a-typography-paragraph>
    <a-typography-paragraph>
      <a-typography-text delete>中划线，删除线</a-typography-text>
    </a-typography-paragraph>
  </a-typography>
</template>
<style scoped>

</style>

在这里插入图片描述

案例：文本高亮

核心代码：

<a-typography-text mark>Ant Design Vue (mark)</a-typography-text>

vue3示例：

<script setup="">
</script>
<template>
  <a-typography>
    <a-typography-title>文本高亮</a-typography-title>
    <a-typography-paragraph>
      该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，
      其读者每天超2000万人。
      <a-typography-text mark>《华尔街日报》是美国的高端报纸</a-typography-text>
      ，读者群的平均家庭年收入达15万美元。
      针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，
      为潜在用户提供免费内容资源，独家新闻采取收费。
    </a-typography-paragraph>
  </a-typography>
</template>
<style scoped>

</style>

在这里插入图片描述

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`
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`
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`
underline	添加下划线样式	boolean	false

slots

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

copyable

 {
    text: string,
    onCopy: function(event),
    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	编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏）	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)	-