Format特殊格式文本组件

2024-06-19 10:16:26首发，2周前更新

虽然原生标签自带了一些文本格式，但是对于某些特殊格式的文本还是需要用户自行通过css或js来设定；format组件目前支持若干特殊格式文本，包括拼音、断行、数学公式、前缀和后缀。

Format特殊格式文本组件2周前更新

前言

我们常见的是行文本和段落文本，但是我也会见到一些不常见的格式文本，例如有拼音头的中文，复杂的数学公式等。我们通过ax-format自定义组件方便用户创建某些特殊的格式文本。

拼音

关于创建拼音，我们可以使用原生的ruby+rt两个标签来创建，但是写起来甚是麻烦，使用ax-format组件来创建拼音文本就会方便很多。

使用ax-format创建拼音文本，至少需要填写两个属性：type和rts，type表示特殊文本类型，rts表示拼音组。

rts值有两种写法

使用英文逗号（,）隔开单个拼音
使用空格（）隔开单个拼音

附带声调的拼音韵母：a、ā、á、ǎ、à；o、ō、ó、ǒ、ò；e、ē、é、ě、è；i、ī、í、ǐ、ì；ū、ú、ǔ、ù；ü、ǖ、ǘ、ǚ、ǜ。

输出
HTML

中国是世界四大文明古国世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

内分行

内分行是指在段落内，某几个文字需要并列分行显示。这种特殊文本常见于严谨的官方公文。

内分行可以使用_t-br样式类创建，也可以通过ax-format组件创建，至少需要填写两个属性：type和lines，type表示特殊文本类型，lines表示分行数量。

输出
HTML

本次活动由清华大学北京大学共同发起。

本次活动由斯坦福大学
清华大学共同发起。
```
                
                
            
```

内分行是由css控制的，由于css标准的不足，内分行效果会有点差强人意。例如当第一行字数少于第二行时，会导致第一行右侧不能对齐。

公式

关于文本公式需要先了解Tax、Latex和Katext，用户可自行网上查阅资料。ax-format使用Katext作为公式文本渲染器，请确保页面引入了相应的css和js文件。

    
            <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
            <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>

在使用ax-format创建公式文本时，只需要使用属性type=latext即可。

输出
HTML

中国是世界四大文明古国之一，\frac{1}{\sqrt{a}}=\frac{\sqrt{a}}{a},a\ge 0\frac{1}{\sqrt{a}}=\frac{\sqrt{a}}{a},a\ge 0 有着悠久的历史，距今约5000年前，\int \frac{1}{1+x^{2}}\mathrm{d}x= \arctan x +C f(x) = \int_{-\infty}^\infty \hat f(x)\xi\,e^{2 \pi i \xi x} \,\mathrm{d}\xi 以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，S_{n}=na_{1}+\frac{n \left( n-1 \right)}{{2}}d 直至形成多民族国家的大一统局面。
```
                
                
            
```

Latex公式编写方法可自行查找资料，这是一个在线编写Latext公式网站，需要的同学可以点击进入。

添加后缀

我们常见到在某个专有后面会插入一小段文本，这个文本可能是一个图标，也可以是几个小字，起到提示和解释的作用。

通过对ax-format使用type=suffix和suffix属性和创建一个带后缀的字符串。

suffix属性需要传递一个对象类型的字符串，格式如下：

对象格式：suffix="{content:'后缀文本'}"
文本格式：suffix="后缀文本"

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

如果需要给后缀增加悬浮气泡提示，可suffix属性追加tips属性，例如：

suffix="{content:'后缀文本',tips:'提示文本'}"
suffix="{content:'后缀文本',tips:{content:'',theme:''}}"

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

添加前缀

添加前缀与添加后缀方法一样，改用type=prefix和prefix属性。

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

如果需要给后缀增加悬浮气泡提示，可prefix属性追加tips属性，例如：

prefix="{content:'后缀文本',tips:'提示文本'}"
prefix="{content:'后缀文本',tips:{content:'',theme:''}}"

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

数字本地化

数字本地化是指将数组按照本地语言习惯增加千分位符和小数点符号。

对ax-format节点使用type=localenum即可。

注意，此时的label值应该是一个可计算的数值，而不是使用科学计数的数字或者已经带有千分位符的数字。

输出
HTML

这一批货总共7896513.12KG。
```
                
                
            
```

本地语言默认先从浏览器中获取，如果获取不到则按英语模式进行格式化（en-US）。

如果需要指定本地语言，可设置locale属性，可选值如下：

locale=de-DE：德语，数字千分位为.，小数点符号为,。
locale=fr-FR：法语，数字千分位为 (空格)，小数点符号为.。
locale=de-CH：瑞士语，数字千分位为’，小数点符号为.。
locale=sv-SE：瑞典语，数字千分位为 (空格)，小数点符号为,。
locale=en-US：英国语（国标），数字千分位为,，小数点符号为.。

输出
HTML

这一批货总共7896513.12KG(德语)。

这一批货总共7896513.12KG(法语)。

这一批货总共7896513.12KG(瑞士语)。

这一批货总共7896513.12KG(瑞典语)。
```
                
                
            
```

取消本地化数字

与数字本地化相反的操作，即将原本使用千分位符的数字转为普通可计算的数字，非国标的小数点符号也将转为国标小数点。

对ax-format节点使用type=plainnum即可。

注意，此时的label值应该是一个带千分位符的本地化数值。

输出
HTML

这一批货总共7,896,513.12KG。
```
                
                
            
```

默认按浏览器本地语言构成法则清除千分位符和替换小数点符号，如果不能获取则按英语数字构成法则处理。

如果已知传入label的本地数字的构成法则，则可使用locale属性指定本地语言。

输出
HTML

这一批货总共7.896.513,12KG(德语)。

这一批货总共7 896 513,12KG(法语)。

这一批货总共7’896’513.12KG(瑞士语)。

这一批货总共7 896 513,12KG(瑞典语)。
```
                
                
            
```

数字补零

如果label是一个数字（或者带千分位的数字），则可使用补零格式化。

补零分为整数位补零type=padstart和小数位补零type=padend。

补零位数默认为2。

输出
HTML

这一批货的编号是PT6，总共13.1吨。
```
                
                
            
```

如果需要指定补零位数，可通过属性places进行设置。

输出
HTML

这一批货的编号是PT6，总共13.1吨。
```
                
                
            
```

Attributes属性

ax-format为自定义标签，其包含的属性如下：

名称	可选值	默认值	说明
type	'ruby'/'break'/'latex'/'suffix'/'prefix'/ 'localenum'/'plainnum'/'padstart'/'padend'	-	特色格式文本类型
label	''	-	原文本
rts	''	-	使用ruby类型的帽子文本
lines	''	'2'	使用break类型的行数
width	''	-	使用break类型的宽度
size	''	-	使用break类型的字号，例如size=18px
suffix	''	{content:''}	后缀内容
prefix	''	{content:''}	前缀内容
locale	''	'en-US'	本地语言
places	''	'2'	补零位数
engin	''	'katex.render(label, el)'	必须包含label和el参数

Methods方法

有组件通用的内置方法：

set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
reset：重置组件属性，无参数
clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

connected：组件连接成功，无参数
disconnected：组件断开连接，无参数
adopted：组件被转移，无参数
set：设置了属性，支持一个参数即设置的值
cleared：清除了属性，无参数
reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});