更新记录

2.1.1(2020-03-27)

  • 修复 APP端非V3版编绎多行时出现{"line":20,"column":28}错语的bug
  • 示例 更新了使用示例,新增积分函数显示示例,新增了化

2.1.0(2020-03-24)

  • 新增 多行显示功能,可以显示含有多行内容的特殊结构文本
  • 新增 分段函数显示功能
  • 新增 行列式显示功能
  • 新增 矩阵显示功能
  • 新增 跨行大中小括号和竖线符号显功能
  • 重要 利用多行功能,可以给分式、角标、或其他更复杂的文本添加漂亮的括号
查看更多

轻量级uniapp数学公式组件 使用说明

1. 组件的引用方法

  1. 将组件代码放置在components目录下

    8dcrHx.png

  2. 在引用页的<template>中放置本组件
    <qiu-holotext :content="content"></qiu-holotext>
  3. 在引用页的中的data()内设置content数据
    content: [
        ...
    ]

2. content数据结构

  1. content用于向<qiu-holotext>组件提供显示数据

    属性名 类型 必填 重要说明
    content Number/String/Object/Array 暂不支持nvue
  2. content示例
    1. Number类型
      content: 123e-2
    2. String类型
      content: '1.23'
    3. Object类型
      content: {
      type: 'text',
      value: 123e-2
      }
    4. Array类型(推荐)
      content: [
      '1.23',
      {
          type: 'text',
          value: '123e-2'
      },
      {
          type: 'fenshi',
          fenzi: 123e-2,
          fenmu: '3x+1'
      }
      ]

3. 支持类型

本组件采用了去冗余算法,能够生成尽可能简洁的HTML代码,目前已支持文本分式根式角标多行等五种类型及其嵌套,可显示大多数数理结构和公式。

  1. 文本(type: 'text')

    1. 用于显示纯数值和纯文本,支持多种数据模式。

      属性名 类型 取值 必填 重要说明
      type String 'text'
      value Number/String/Object 不限 文本值,支持嵌套
    2. 注意
      • 当type和value属性都省略时,可以直接将Number/String类型的数据作为显示数据。
      • 支持换行符'\n'、半角空格'\u2002'、全角空格'\u2003'、累加符'∑'等特殊字符。
      • 支持嵌套,但只能嵌套text类型本身,如果嵌套其他类型,会产生不可预料的结果。
      • 组件会自动过滤冗余,生成最简洁的HTML。例如,以下示例中的五种写法生成的HTML是完全相同的。
    3. 文本示例
      content: [
      123e-2,                   //数字
      '1.23',                   //文本
      {
          value: '1.23'         //简略对象
      },
      {
          type: 'text',
          value: '1.23'         //标准对象
      },
      {
          type: 'text',
          value: {              //多层嵌套
              type: 'text',
              value: {
                  value: {
                      type: 'text',
                      value: '1.23'
                  }
              }
          }
      }
      ]
  2. 分式(type: 'fenshi')

    1. 用于显示分数和分式,支持多层嵌套

      属性名 类型 取值 必填 重要说明
      type String 'fenshi'
      fenzi Number/String/Object/Array 不限 分子,支持嵌套
      fenmu Number/String/Object/Array 不限 分母,支持嵌套
    2. 注意:

      • 分子和分母均可进一步嵌套'text'(文本)、'jiaobiao'(角标)、'fenshi'(分式)、'genshi'(根式)、'duohang'(多行)等类型,组件会自动生成尽可能简洁的HTML代码。
      • 当分子和分母存在多层嵌套时,组件会自动将基线对齐至主分数线上。
    3. 分式示例

      content: [
      '嵌套分式\u2002y=1+',
      {
          type: 'fenshi',
          fenzi: [
              '1 + ',
              {
                  type: 'fenshi',
                  fenzi: '1',
                  fenmu: 1e4
              }
          ],
          fenmu: [
              '1 + ',
              {
                  type: 'fenshi',
                  fenzi: '1',
                  fenmu: [
                      '1 + ',
                      {
                          type: 'fenshi',
                          fenzi: '1',
                          fenmu: [
                              '1 + ',
                              {
                                  type: 'fenshi',
                                  fenzi: '1',
                                  fenmu: 2
                              }
                          ]
                      }
                  ]
              }
          ]
      }
      ]

      8dc6UK.png

  3. 根式(type: 'genshi')

    1. 用于显示根式,支持多层嵌套

      属性名 类型 取值 必填 重要说明
      type String 'genshi' 暂不支持nvue
      base Number/String/Object/Array 不限 基数,被开方数,支持嵌套
      lsup Number/String/Object/Array 不限 左上标,根指数,支持嵌套
    2. 注意:

      • 假如不需要显示根指数,则应省略lsup属性。
      • base、lsup均可进一步嵌套'text'(文本)、'jiaobiao'(角标)、'fenshi'(分式)、'genshi'(根式)、'duohang'(多行)等类型,组件会自动生成尽可能简洁的HTML代码。
    3. 根式示例

      content: [
      '嵌套根式\u2002R=',
      {
          type: 'genshi',
          base: [{
                  type: 'jiaobiao',
                  base: [
                      '(',
                      {
                          type: 'fenshi',
                          fenzi: 2,
                          fenmu: [
                              '3+',
                              {
                                  type: 'genshi',
                                  base: 3
                              }
                          ]
      
                      },
                      ')'
                  ],
                  rsup: 2
              },
              '+',
              {
                  type: 'fenshi',
                  fenzi: {
                      type: 'jiaobiao',
                      base: 'h',
                      rsup: 2
                  },
                  fenmu: [
                      '4+',
                      {
                          type: 'genshi',
                          base: {
                              type: 'genshi',
                              base: {
                                  type: 'genshi',
                                  base: 5,
                                  lsup: 3
                              },
                              lsup: 3
                          }
                      }
                  ]
              }
          ],
          lsup: 3
      }
      ]

      8dcyE6.png

  4. 角标(type: 'jiaobiao')

    1. 基本概念

      角标用于显示各种角标,支持左上标、左下标、正上标、正下标、右上标、右下标、上标、下标、顶标、底标等10种角标类型及组合,其基本结构如下图所示:

      8dc2CD.png

    2. 角标属性

      属性名 类型 取值 必填 重要说明
      type String 'jiaobiao'
      base Number/String/Object/Array 不限 角标基准,支持嵌套
      lsup Number/String/Object/Array 不限 左上标,支持嵌套
      lsub Number/String/Object/Array 不限 左下标,支持嵌套
      csup Number/String/Object/Array 不限 正上标,支持嵌套
      csub Number/String/Object/Array 不限 正下标,支持嵌套
      rsup Number/String/Object/Array 不限 上标、右上标,支持嵌套
      rsub Number/String/Object/Array 不限 下标、右下标,支持嵌套
      ctop Number/String/Object/Array 不限 顶标,支持嵌套
      bottom Number/String/Object/Array 不限 底标,支持嵌套
    3. 注意事项

      • 非必填属性均可嵌套支持'text'(文本)、'jiaobiao'(角标)、'fenshi'(分式)、'genshi'(根式)等类型。
      • 当省略base时,仅支持(rsup)、下标(rsub)二者之一,用于显示普通纯文本的上标、下标;当base存在时,支持所有角标类型及其任意组合。
      • base属性可以支持跨行组合运算符,如求和运算符:base: '⎲\n⎳'。但需字库支持才能美观。
    4. 角标示例

      content: [
      '\n普通文本的上标',
      {
          type: 'jiaobiao',
          rsup: '【1】'
      },
      
      '\n铝离子',
      {
          type: 'jiaobiao',
          base: 'Al',
          lsup: '27',
          lsub: '13',
          rsup: '3+'
      },
      
      '\n数学角标',
      {
          type: 'jiaobiao',
          base: '∑',
          csub: 'i = 0',
          csup: 'n',
      },
      '(',
      {
          type: 'jiaobiao',
          base: 'x',
          rsup: '3',
          rsub: 'i'
      },
      {
          type: 'jiaobiao',
          base: 'y',
          rsup: '3',
          rsub: 'i'
      },
      ')',
      
      '\n跨行数学角标',
      {
          type: 'jiaobiao',
          base: '⎲\n⎳',
          csup: 'n',
          csub: 'i = 0',
      },
      {
          type: 'fenshi',
          fenmu: {
              type: 'jiaobiao',
              base: 'x',
              rsup: '3',
              rsub: 'i'
          },
          fenzi: {
              type: 'jiaobiao',
              base: 'y',
              rsup: '3',
              rsub: 'i'
          }
      },
      
      '\n复杂嵌套',
      {
          type: 'jiaobiao',
          base: [
              '(',
              {
                  type: 'genshi',
                  base: {
                      type: 'jiaobiao',
                      base: 'x',
                      rsup: '2'
                  },
                  lsup: '3'
              },
              '\u2004+ ',
              {
                  type: 'fenshi',
                  fenzi: 2,
                  fenmu: 'x'
              },
              ')'
          ],
          rsup: 3
      }
      ]

      8dcR8e.png

  5. 多行(type: 'duohang')

    1. 基本概念

      多行用于显示行高超过单行文本的,或含有多行文本/多行公式的特殊文本结构,如分式、分段函数、行列式、矩阵等。

    2. 多行属性 属性名 类型 取值 必填 重要说明
      type String 'duohang'/'{'/'{}'/'[]'/'()'/'||' type的取值决定多行由什么符号包裹
      value Number/String/Object/Array 不限 value的取值决定多行需要显示哪些数据,支持嵌套
      • type属性 取值 包裹符号 必填 重要说明
        'duohang' 多行的左侧和右侧均无包裹符号
        '{' 多行的左侧有左花括号,右侧无包裹符号 注意是左侧而非右侧有'{'
        '{}' 多行的左侧有左花括号,右侧有右花括号
        '[]' 多行的左侧有左方括号,右侧有右方括号 不支持单独的'['
        '()' 多行的左侧有左圆括号,右侧有右圆括号 不支持单独的'(
        '||' 多行的左侧有左竖线,右侧有右竖线 支持单独的'|'
        '|' 多行的左侧无包裹符号,右侧有右竖线 注意是右侧而非左侧有'|'
      • value属性 类型 包裹符号 必填 重要说明
        Number 纯数值单行文本
        String 纯字符串单行文本
        Object 文本、分式、根式、角标,或多行类型的复杂单行文本 可嵌套
        Array 由数组元素构成的多行文本,数组的每一个元素代表一行文本 推荐,可嵌套
    3. 多行示例

      content: [
      '\n\n\u2003麦克斯韦方程组\u2002',
      {
          type: '{',
          value: [
              [
                  '∇×Η=J+',
                  {
                      type: 'fenshi',
                      fenzi: '∂D',
                      fenmu: '∂t'
                  },
                  ','
              ],
              [
                  '∇×Η= -',
                  {
                      type: 'fenshi',
                      fenzi: '∂Β',
                      fenmu: '∂t'
                  },
                  ','
              ],
              '∇∙Β=0,',
              '∇∙D=ρ.'
          ]
      }
      ]

    8Luahd.jpg

4. 完整示例

请导入或下载右上方参考示例

G9Tg0I.png

最后,欢迎大家下载使用,我会不断升级完善本组件,恳请大家多提宝贵意见和建议!

隐私、权限及商业化声明

说明:除收费原生SDK插件外,其他插件或示例工程默认均为MIT开源协议。如提供了github地址,并在github上专门标注了开源协议,则以github标注为准。

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问