ToB企服应用市场:ToB评测及商务社交产业平台

标题: Python私教张大鹏 Vue3整合AntDesignVue之文本组件 [打印本页]
作者: 徐锦洪    时间: 2024-6-29 06:28
标题: Python私教张大鹏 Vue3整合AntDesignVue之文本组件
案例：展示标题

焦点代码：
  1. <a-typography>
  2.     <a-typography-title>Introduction</a-typography-title>
  3. </a-typography>
复制代码
vue3示例：
  1. <template>
  2.   <a-typography>
  3.     <a-typography-title>这是一个标题</a-typography-title>
  4.   </a-typography>
  5. </template>
复制代码

案例：展示段落

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

案例：展示重要内容

焦点代码：
  1. <a-typography-text strong>
  2.   uniform the user interface specs for internal background projects, lower the unnecessary
  3.   cost of design differences and implementation and liberate the resources of design and
  4.   front-end development.
  5. </a-typography-text>
复制代码
vue3示例：
  1. <template>
  2.   <a-typography>
  3.     <a-typography-title>美国新闻稿发布-华尔街日报</a-typography-title>
  4.     <a-typography-paragraph>
  5.       媒体介绍：华尔街日报（The Wall Street
  6.       Journal）于1889年创刊，是美国付费发行量最大的财经报纸，其发行量超过200万份。该报出版于美国纽约，主要报道财经新闻，侧重金融商业报道，其影响力巨大。《华尔街日报》的读者大多为政治、经济、教育和医学界人士、金融大亨和经营管理人员以及股票市场的投资者。
  7.     </a-typography-paragraph>
  8.     <a-typography-text strong>
  9.       该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，其读者每天超2000万人。《华尔街日报》是美国的高端报纸，读者群的平均家庭年收入达15万美元。针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，为潜在用户提供免费内容资源，独家新闻采取收费。
  10.     </a-typography-text>
  11.   </a-typography>
  12. </template>
复制代码

案例：展示二级标题

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

案例：展示代码片断

焦点代码：
  1. <a-typography-text code>Sketch</a-typography-text>
复制代码
vue3示例：
  1. <template>
  2.   <a-typography>
  3.     <a-typography-title>Python代码片段</a-typography-title>
  4.     <a-typography-text code>
  5.       def add(a, b):
  6.         return a + b
  7.       print(add(11, 22))
  8.     </a-typography-text>
  9.   </a-typography>
  10. </template>
复制代码

案例：展示链接

焦点代码：
  1. <a-typography-link href="/docs/resources">Resource Download</a-typography-link>
复制代码
vue3示例：
  1. <template>
  2.   <a-typography>
  3.     <a-typography-title>友情链接</a-typography-title>
  4.     <a-typography-paragraph>
  5.       参考链接：
  6.       <a-typography-link href="http://www.baidu.com">百度</a-typography-link>
  7.       <a-typography-link href="https://www.sohu.com/">搜狐</a-typography-link>
  8.       <a-typography-link href="https://www.sina.com/">新浪</a-typography-link>
  9.     </a-typography-paragraph>
  10.   </a-typography>
  11. </template>
复制代码

案例：展示键盘快捷键

焦点代码：
  1. <a-typography-text keyboard>Esc</a-typography-text>
复制代码
vue3示例：
  1. <template>
  2.   <a-typography>
  3.     <a-typography-title>常用快捷键</a-typography-title>
  4.     <a-typography-paragraph>
  5.       <a-typography-text keyboard>ctrl + c</a-typography-text>
  6.       <a-typography-text>复制</a-typography-text>
  7.     </a-typography-paragraph>
  9.     <a-typography-paragraph>
  10.       <a-typography-text keyboard>ctrl + v</a-typography-text>
  11.       <a-typography-text>粘贴</a-typography-text>
  12.     </a-typography-paragraph>
  13.   </a-typography>
  14. </template>
  15. <script setup lang="ts">
  16. </script>
复制代码

案例：超过一行变省略号

焦点代码：
  1. <a-typography-paragraph
  2.     :ellipsis="ellipsis"
  3.     content=" Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
  4.     Design, a design language for background applications, is refined by Ant UED Team. Ant
  5.     Design, a design language for background applications, is refined by Ant UED Team. Ant
  6.     Design, a design language for background applications, is refined by Ant UED Team. Ant
  7.     Design, a design language for background applications, is refined by Ant UED Team. Ant
  8.     Design, a design language for background applications, is refined by Ant UED Team."
  9.   />
复制代码
vue3示例：
  1. <template>
  2.   <a-typography>
  3.     <a-typography-title>超过一行变省略号</a-typography-title>
  4.     <a-typography-paragraph ellipsis>
  5.       该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，其读者每天超2000万人。《华尔街日报》是美国的高端报纸，读者群的平均家庭年收入达15万美元。针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，为潜在用户提供免费内容资源，独家新闻采取收费。
  6.     </a-typography-paragraph>
  7.   </a-typography>
  8. </template>
复制代码

案例：段落可编辑

焦点代码：
  1. <a-typography-paragraph v-model:content="editableStr" editable />
复制代码
vue3示例：
  1. <script setup="">
  2. import {ref} from "vue";
  4. const msg = ref("可编辑的文本，不信你试试")
  5. </script>
  6. <template>
  7.   <a-typography>
  8.     <a-typography-title>可编辑的文本</a-typography-title>
  9.     <a-typography-paragraph v-model:content="msg" editable></a-typography-paragraph>
  10.   </a-typography>
  11. </template>
  12. <style scoped>
  14. </style>
复制代码

案例：段落可复制

焦点代码：
  1. <a-typography-paragraph :copyable="{ tooltip: false }">
  2.   Hide Copy tooltips.
  3. </a-typography-paragraph>
复制代码
vue3示例：
  1. <script setup="">
  2. import {ref} from "vue";
  4. const msg=ref("可编辑的文本")
  5. </script>
  6. <template>
  7. <a-typography>
  8.   <a-typography-title>可复制的文本</a-typography-title>
  9.   <a-typography-paragraph copyable>这个文本可以被复制，不信你试试</a-typography-paragraph>
  10.   <a-typography-paragraph v-model:content="msg" editable/>
  11. </a-typography>
  12. </template>
  13. <style scoped>
  15. </style>
复制代码

案例：文本样式

焦点代码：
  1. <template>
  2.   <a-space direction="vertical">
  3.     <a-typography-text>Ant Design Vue (default)</a-typography-text>
  4.     <a-typography-text type="secondary">Ant Design Vue (secondary)</a-typography-text>
  5.     <a-typography-text type="success">Ant Design Vue (success)</a-typography-text>
  6.     <a-typography-text type="warning">Ant Design Vue (warning)</a-typography-text>
  7.     <a-typography-text type="danger">Ant Design Vue (danger)</a-typography-text>
  8.     <a-typography-text disabled>Ant Design Vue (disabled)</a-typography-text>
  9.     <a-typography-text mark>Ant Design Vue (mark)</a-typography-text>
  10.     <a-typography-text code>Ant Design Vue (code)</a-typography-text>
  11.     <a-typography-text keyboard>Ant Design Vue (keyboard)</a-typography-text>
  12.     <a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
  13.     <a-typography-text delete>Ant Design Vue (delete)</a-typography-text>
  14.     <a-typography-text strong>Ant Design Vue (strong)</a-typography-text>
  15.     <a-typography-link href="https://antdv.com" target="_blank">
  16.       Ant Design Vue (Link)
  17.     </a-typography-link>
  18.   </a-space>
  19. </template>
复制代码
vue3示例：
  1. <script setup="">
  2. </script>
  3. <template>
  4.   <a-typography>
  5.     <a-typography-title>文本样式</a-typography-title>
  6.     <a-typography-paragraph>
  7.       <a-typography-text>默认样式</a-typography-text>
  8.     </a-typography-paragraph>
  9.     <a-typography-paragraph>
  10.       <a-typography-text type="secondary">secondary 样式</a-typography-text>
  11.     </a-typography-paragraph>
  12.     <a-typography-paragraph>
  13.       <a-typography-text type="warning">warning 样式</a-typography-text>
  14.     </a-typography-paragraph>
  15.     <a-typography-paragraph>
  16.       <a-typography-text type="success">success 样式</a-typography-text>
  17.     </a-typography-paragraph>
  18.     <a-typography-paragraph>
  19.       <a-typography-text type="danger">danger 样式</a-typography-text>
  20.     </a-typography-paragraph>
  21.   </a-typography>
  22. </template>
  23. <style scoped>
  25. </style>
复制代码

案例：文本划线

焦点代码：
  1. <a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
  2. <a-typography-text delete>Ant Design Vue (delete)</a-typography-text>
复制代码
vue3示例：
  1. <script setup="">
  2. </script>
  3. <template>
  4.   <a-typography>
  5.     <a-typography-title>文本下划线和中划线</a-typography-title>
  6.     <a-typography-paragraph>
  7.       <a-typography-text underline>下划线</a-typography-text>
  8.     </a-typography-paragraph>
  9.     <a-typography-paragraph>
  10.       <a-typography-text delete>中划线，删除线</a-typography-text>
  11.     </a-typography-paragraph>
  12.   </a-typography>
  13. </template>
  14. <style scoped>
  16. </style>
复制代码

案例：文本高亮

焦点代码：
  1. <a-typography-text mark>Ant Design Vue (mark)</a-typography-text>
复制代码
vue3示例：
  1. <script setup="">
  2. </script>
  3. <template>
  4.   <a-typography>
  5.     <a-typography-title>文本高亮</a-typography-title>
  6.     <a-typography-paragraph>
  7.       该报出版亚洲版（1976年）、欧洲版（1983年）、网络版（1996年）等，覆盖面广泛且历史悠久，
  8.       其读者每天超2000万人。
  9.       <a-typography-text mark>《华尔街日报》是美国的高端报纸</a-typography-text>
  10.       ，读者群的平均家庭年收入达15万美元。
  11.       针对不同的用户群体有不同的营销策略，为忠实用户推出专业并具有深度的优质新闻内容，
  12.       为潜在用户提供免费内容资源，独家新闻采取收费。
  13.     </a-typography-paragraph>
  14.   </a-typography>
  15. </template>
  16. <style scoped>
  18. </style>
复制代码

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

  1. {
  2.     text: string,
  3.     onCopy: function(event),
  4.     tooltip: false,
  5.   }
复制代码
参数阐明类型默认值版本text拷贝到剪切板里的文本string-tooltip是否展示提示文本booleantrueonCopy拷贝乐成的回调函数function- editable

  1.   {
  2.     tooltip: boolean,
  3.     editing: boolean,
  4.     maxlength: number,
  5.     autoSize: boolean | { minRows: number, maxRows: number },
  6.     onStart: function,
  7.     onChange: function(string),
  8.     onCancel: function,
  9.     onEnd: function,
  10.     triggerType: ('icon' | 'text')[],
  11.   }
复制代码
参数阐明类型默认值版本autoSize主动 resize 文本域boolean | { minRows: number, maxRows: number }-editing控制是否是编辑中状态booleanfalsemaxlength编辑中文本域最大长度number-tooltip是否展示提示文本booleantruetriggerType编辑模式触发器类型，图标、文本大概两者都设置（不设置图标作为触发器时它会隐藏）Array<icontext>[icon]onCancel按 ESC 退出编辑状态时触发function-onChange文本域编辑时触发function(event)-onEnd按 ENTER 结束编辑状态时触发function-onStart进入编辑中状态时触发function- ellipsis

  1.   {
  2.     rows: number,
  3.     expandable: boolean,
  4.     suffix: string,
  5.     symbol: string,
  6.     tooltip: boolean,
  7.     onExpand: function(event),
  8.     onEllipsis: function(ellipsis),
  9.   }
复制代码
参数阐明类型默认值版本expandable是否可展开boolean-rows最多表现的行数number-suffix自定义省略内容后缀string-symbol自定义展开描述文案string展开tooltip省略时，展示提示信息boolean | string-onEllipsis触发省略时的回调function(ellipsis)-onExpand点击展开时的回调function(event)-
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4