122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view v-html="mathlab" :mathlab="mathlab" :change:mathlab="math.receiveLab" class="latexId">
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "bing-math",
|
||
props: {
|
||
latex: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
mathlab: ''
|
||
}
|
||
},
|
||
|
||
watch: { // 监视latex的变化
|
||
latex: {
|
||
handler(newval, oldval) {
|
||
// console.log("--------- 监视latex的变化 ----------")
|
||
// console.log("oldval", oldval);
|
||
// console.log("newval", newval);
|
||
this.mathlab = newval;
|
||
this.$forceUpdate();
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
mounted() {
|
||
this.mathlab = this.latex;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script module="math" lang="renderjs">
|
||
export default {
|
||
|
||
methods: {
|
||
// 接收逻辑层发送的数据
|
||
receiveLab(newValue, oldValue, ownerVm, vm) {
|
||
// console.log("--------- 接收逻辑层发送的数据 ----------")
|
||
// console.log("newValue", newValue);
|
||
// console.log("oldValue", oldValue);
|
||
|
||
this.mathlab = newValue;
|
||
|
||
if (typeof window.MathJax != 'object') {
|
||
console.log("window.MathJax", window.MathJax);
|
||
this.initMathJax();
|
||
}
|
||
|
||
// 根据id渲染重新渲染
|
||
const el = document.getElementsByClassName('latexId');
|
||
this.renderByMathjax(el)
|
||
},
|
||
|
||
initMathJax() {
|
||
window.MathJax = {
|
||
tex: {
|
||
inlineMath: [
|
||
['$', '$'],
|
||
['\\(', '\\)']
|
||
], //行内公式选择符
|
||
|
||
displayMath: [
|
||
["$$", "$$"],
|
||
["\\[", "\\]"]
|
||
], //段内公式选择符
|
||
// 支持渲染某些公式
|
||
processEnvironments: true,
|
||
processRefs: true,
|
||
},
|
||
// 参考官方文档 https://www.osgeo.cn/mathjax/options/menu.html#menu-options
|
||
options: {
|
||
//关闭右击选择菜单
|
||
enableMenu: false,
|
||
// 跳过渲染的标签
|
||
skipHtmlTags: ['noscript', 'style', 'textarea', 'pre', 'code', 'a'],
|
||
// 跳过mathjax处理的元素的类名，任何元素指定一个类 tex2jax_ignore 将被跳过，多个累=类名'class1|class2'
|
||
ignoreHtmlClass: 'tex2jax_ignore',
|
||
},
|
||
|
||
svg: {
|
||
scale: 1.0
|
||
}
|
||
};
|
||
(function() {
|
||
var script = document.createElement('script')
|
||
script.id = 'MathJax-script'
|
||
// cdn引入比较慢
|
||
// script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js'
|
||
// script.src = 'static/tex-svg.js'; // 下载源码导入比较快，svg比chtml视觉上比较好
|
||
script.src = 'static/tex-chtml.js';
|
||
document.head.appendChild(script)
|
||
})();
|
||
console.log("initMathJax() window.MathJax", window.MathJax);
|
||
},
|
||
renderByMathjax: function(el) {
|
||
// mathjax初始化后才会注入version
|
||
if (!window.MathJax.version) {
|
||
return
|
||
}
|
||
if (el && !Array.isArray(el)) {
|
||
el = [el]
|
||
}
|
||
return window.MathJax.typesetPromise(el)
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|