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>
https://img-blog.csdnimg.cn/direct/81cbd69b7a794216995ebc1330fd36f5.png
案例：展示段落
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/0811d8d451854ed88b919543ee560b3e.png
案例：展示重要内容
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/9f44b3c929984743b14aa35f9ffbff12.png
案例：展示二级标题
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/59858a373d064ae982d6c4811f1232bc.png
案例：展示代码片断
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/a1df9b6b36c547aab7a731ef7bf5fa54.png
案例：展示链接
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/e48e82310d97452b8d54fe79975ca6da.png
案例：展示键盘快捷键
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/3398330062b24dd88bd0264db06a94da.png
案例：超过一行变省略号
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/5bd1371c9e9e46cf8052f74de84e586f.png
案例：段落可编辑
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/e5620ac5a4a840ae97efbe9e8357fa95.png
案例：段落可复制
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/a5a8e41b6db44a049595b4228aea46a8.png
案例：文本样式
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/f526ff5673ce4d3a8a6745acf6d04f4a.png
案例：文本划线
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/13dcb08cc15a42c9ac0f18336f86d27a.png
案例：文本高亮
焦点代码：
<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>
https://img-blog.csdnimg.cn/direct/7fed46aa52ba40bf99ce6dc51c8fd917.png
API
Typography.Text
参数阐明类型默认值版本code添加代码样式booleanfalsecontent(v-model)当利用 ellipsis 或 editable 时，利用 content 取代 childrenstring-copyable是否可拷贝，为对象时可举行各种自定义boolean | copyablefalsecopyabledelete添加删除线样式booleanfalsedisabled禁用文本booleanfalseeditable是否可编辑，为对象时可对编辑举行控制boolean | editablefalseeditableellipsis主动溢出省略booleanfalsekeyboard添加键盘样式booleanfalsemark添加标记样式booleanfalsestrong是否加粗booleanfalsetype文本类型secondarysuccesswarningunderline添加下划线样式booleanfalse Typography.Title
参数阐明类型默认值版本code添加代码样式booleanfalsecontent(v-model)当利用 ellipsis 或 editable 时，利用 content 取代 childrenstring-copyable是否可拷贝，为对象时可举行各种自定义boolean | copyablefalsecopyabledelete添加删除线样式booleanfalsedisabled禁用文本booleanfalseeditable是否可编辑，为对象时可对编辑举行控制boolean | editablefalseeditableellipsis主动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等boolean | ellipsisfalseellipsislevel重要程度，相当于 h1、h2、h3、h4、h5number: 1, 2, 3, 4, 51mark添加标记样式booleanfalsetype文本类型secondarysuccesswarningunderline添加下划线样式booleanfalse Typography.Paragraph
参数阐明类型默认值版本code添加代码样式booleanfalsecontent(v-model)当利用 ellipsis 或 editable 时，利用 content 取代 childrenstring-copyable是否可拷贝，为对象时可举行各种自定义boolean | copyablefalsecopyabledelete添加删除线样式booleanfalsedisabled禁用文本booleanfalseeditable是否可编辑，为对象时可对编辑举行控制boolean | editablefalseeditableellipsis主动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等boolean | ellipsisfalseellipsismark添加标记样式booleanfalsestrong是否加粗booleanfalsetype文本类型secondarysuccesswarningunderline添加下划线样式booleanfalse 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是否展示提示文本booleantrueonCopy拷贝乐成的回调函数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控制是否是编辑中状态booleanfalsemaxlength编辑中文本域最大长度number-tooltip是否展示提示文本booleantruetriggerType编辑模式触发器类型，图标、文本大概两者都设置（不设置图标作为触发器时它会隐藏）Array<icontext>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)-
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]