在index.html中引入
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
新建一個golbalVariable.js
// 新建一個golbalVariable.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: [["$", "$"], ["\\(", "\\)"]], //行內(nèi)公式選擇符
displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段內(nèi)公式選擇符
skipTags: ["script", "noscript", "style", "textarea", "pre"] //避開某些標簽
},
"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(elementId)]);//這里可以用原生的js調(diào)用name,class,id。
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue
}
在main.js全局引入
// main.js
import globalVariable from '@/assets/js/globalVariable'
Vue.prototype.commonsVariable = globalVariable
.vue頁面使用
<div>{{math}}</div>
data(){
return{
math:'`N=(LBh_1q_1)/1000`'
}
}
mounted() {
this.$nextTick(function() { // 這里要注意，使用$nextTick等組件數(shù)據(jù)渲染完之后再調(diào)用MathJax渲染方法，要不然會獲取不到數(shù)據(jù)
if (this.commonsVariable.isMathjaxConfig) { // 判斷是否初始配置，若無則配置荸频。
this.commonsVariable.initMathjaxConfig()
}
this.commonsVariable.MathQueue('container-table')// 傳入組件id，讓組件被MathJax渲染
})
},
效果圖
