【已解决】VUE MathJax 展示latex数学公式(最简化版)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
目录
1.1 index.html 1.2 MathJax.js 新建文件
1.3.1 全局引用 src/main.js 1.3.2 局部引用 abc.vue
第一部分:引入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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)