目录

1 引入MathJax

1.1 index.html                                      1.2 MathJax.js 新建文件

1.3 全局/局部引用

1.3.1 全局引用 src/main.js          1.3.2 局部引用  abc.vue

2 页面使用

2.1 页面

2.2 JS-局部                                          2.3 JS-全局

3 组件复用

3.1 子组件                                           3.2 父组件

---

第一部分：引入MathJax与其他帖子差不多，第二部分已经写成最简单了

1 引入MathJax

1.1 index.html

// index.html

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"/>

PS：听说已经有3.0

1.2 MathJax.js 新建文件

// MathJax.js

let isMathjaxConfig = false// 用于标识是否配置
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false, // 关闭js加载过程信息
    messageStyle: 'none', // 不显示信息
    jax: ['input/TeX', 'output/HTML-CSS'],
    tex2jax: {
      inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式选择符
      displayMath: [['$$', '$$'], ['\\[', '\\]']], // 段内公式选择符
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] // 避开某些标签
    },
    'HTML-CSS': {
      availableFonts: ['STIX', 'TeX'], // 可选字体
      showMathMenu: false // 关闭右击菜单显示
    }
  })
  isMathjaxConfig = true // 配置完成，改为true
}

const MathQueue = function (elementId) {
  if (!window.MathJax) {
    return
  }
  window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementsByClassName(elementId)]) // 根据class
//  window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementById(elementId)]) // 根据id
}

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue
}

1.3 全局/局部引用

1.3.1 全局引用 src/main.js

// main.js

import MathJax from './common/MathJax.js' // MathJax.js内容在1.3，位置随意
Vue.prototype.MathJax = MathJax

1.3.2 局部引用  abc.vue

// abc.vue

<script>
  import MathJax from '../../common/MathJax'

  export default {...}
</script>

2 页面使用

2.1 页面

<template>
  <el-row>
    <el-input v-model="latex" />
    <!--<div id="latexId">$${{latex}}$$</div> // 根据id-->
    <div class="latexId" v-html="'$$'+latex+'$$'"/> // 根据class
  </el-row>
</template>

可以用{{ }}或v-html，但不能用v-text

2.2 JS-局部

<script>
  import MathJax from '../../common/MathJax'

    export default {
        data() {
          return {
            latex: '',
            latexHtml: ''
          }
        },
        watch: { // 监视latex的变化
          latex() {
            this.$nextTick(function () { // Vue的DOM渲染是异步的
              if (MathJax.isMathjaxConfig) { // 是否配置MathJax
                  MathJax.initMathjaxConfig()
              }
              MathJax.MathQueue('latexDiv') // 渲染对应的id/class
            })
          }
        },
      }
</script>

2.3 JS-全局

全局的代码就是把2.2里面的MathJax改为this.MathJax

3 组件复用

3.1 子组件

<!--组件：latex转换成math表示
输入：
  latex：string
输出：
  无，仅展示数学公式
使用案例：
  <TheLatex2Math :latex="mathForm.sdOutput"/>
-->
<template>
  <div class="latexDiv" v-html="'$$'+latex+'$$'"/>
</template>

<script>
  import MathJax from '../common/MathJax'
  export default {
    name: 'TheLatex2Math',
    props: {latex: {type: String}}, // 限制父子组件参数为String
    created() { // 组件刚创建的时候，watch并不会被触发，因为latex值没发生变化
      this.mathJax()
    },
    watch: { // 监视latex的变化
      latex() {
        this.mathJax()
      }
    },
    methods: {
      mathJax () {
        this.$nextTick(function () { // Vue的DOM渲染是异步的
          if (MathJax.isMathjaxConfig) { // 是否配置MathJax
            MathJax.initMathjaxConfig()
          }
          MathJax.MathQueue('latexDiv') // 渲染对应的id/class
        })
      }
    }
  }
</script>

3.2 父组件

<template>
  <el-row>
    <el-input v-model="latex" />
    <TheLatex2Math :latex="ff"/>
  </el-row>
</template>

<script>

  export default {
    data() {
      return {
        ff: '',
      }
    }
  }
</script>