vue2 引入MathJax 输入数学算式，显示分式（分数）

记录一下

1. 引入MathJax

1.1 修改index.html

在public=>index.html 添加

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script>

1.2 在src=>untils 添加 MathJax.js

let isMathjaxConfig = false; // ⽤于标识是否配置
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax = {
    tex: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"],
      ], // ⾏内公式选择符
      displayMath: [
        ["$$", "$$"],
        ["\\[", "\\]"],
      ], // 段内公式选择符
    },
    chtml: {
      scale: 1, //缩放比例
    },
    options: {
      skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"], // 避开某些标签
      ignoreHtmlClass: "tex2jax_ignore",
      processHtmlClass: "tex2jax_process",
    },
  };
  isMathjaxConfig = true; // 配置完成，改为true
};
const TypeSet = async function (elementId) {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.startup.promise = window.MathJax.startup.promise
    .then(() => {
      return window.MathJax.typesetPromise();
    })
    .catch((err) => console.log("Typeset failed: " + err.message));
  return window.MathJax.startup.promise;
};
export default {
  isMathjaxConfig,
  initMathjaxConfig,
  TypeSet,
};

1.3 在 main.js 引入MathJax（全局）

import MathJax from "./utils/MathJax";
Vue.prototype.MathJax = MathJax;

到这已经完成前置引入工作

2. 在页面使用

2.1 h5

<!-- 输入框绑定数据 在输入时转换 -->
<el-input v-model="num" placeholder="请输入答案" style="width: 220px" @input="addFraction"></el-input>
<!-- 点击按钮插入分式 -->
<el-button @click="changeFraction">{{ isFraction ? "取消插入" : "插入分式" }} </el-button>
<div v-if="latex">
	<!-- 使用v-html显示 -->
	<div class="question-stem" v-html="latex"></div>
</div>

2.2 data()

data() {
	isFraction: false,//是否插入分式
	latex: "",//回显的数学公式
	num: "",//输入框输入的数据
}

2.3 js

 watch: {
    latex() {
      this.mathJax();
    },
  },

 mounted() {
    this.mathJax();
  },

2.3.1 methods()

    mathJax() {
      this.$nextTick(function () {
        if (this.MathJax.isMathjaxConfig) {
          // 判断是否初始配置，若⽆则配置。
          this.MathJax.initMathjaxConfig();
        }
        this.MathJax.TypeSet();
      });
    },

//点击插入分式 可简化在上面 直接写 @click= isFraction = !isFraction 
    changeFraction() {
      if (this.isFraction) {
        this.isFraction = false;
      } else {
        this.isFraction = true;
      }
    },

 //插入分数
    addFraction() {
      if (this.num) {
        const [a, b] = this.num.split("/");
        let fraction = "";
        if (a && b && this.isFraction) {
          fraction = "\\frac{" + a + "}{" + b + "}";
          this.latex = "$$" + fraction + "$$";
        } else {
          this.latex = "$$" + this.num + "$$";
          //this.latex = this.num;
        }
      } else {
        this.latex = "";
      }
    },

下面是效果图