在这里有个mathjax的插件,可以将dom中的数学公式展示。
第一步安装mathjax
npm install mathjax
安装完之后,你会在index.html中发现,已经引用了js文件,并且有相关配置
<script type="text/javascript" src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ jax: ["input/MathML","output/SVG"], extensions: ["mml2jax.js","MathEvents.js"] }); </script>
并且在utils中多了一个文件MathJax.js
MathJax文件内容
export default { MathConfig () { if (window.MathJax) { console.log('rendering mathjax') window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub], () => console.log('done')) } } }
再来说一个npm通用的问题,怎么配置,怎么导入
通过在网上半天查询,终于找到
将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.getElementById('app')]) } export default { isMathjaxConfig, initMathjaxConfig, MathQueue }
这里做一个简单说明,Hub.Config中是做一些基本配置,再通过调用Hub.Queue这个方法对dom树进行渲染。
基本配置搞定,然后将文件导入到main.js中
import MathJax from './utils/MathJax'
Vue.prototype.MathJax = MathJax
接下来就可以使用了
watch: { list: function () { this.$nextTick(function () { if (this.MathJax.isMathjaxConfig) { // 判断是否初始配置,若无则配置。 this.MathJax.initMathjaxConfig() } this.MathJax.MathQueue()// 传入组件id,让组件被MathJax渲染 }) } }
监听list是否发生变化,发生变化之后,就在dom渲染完之后,生成试题的正确展示形式