tijiao

src/components/page/components/table/LateX.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <label>输入 LaTeX 公式:</label>
+        <div ref="mathField" class="math-container"></div>
+        <p>LaTeX 代码: {{ latex }}</p>
+    </div>
+</template>
+
+<script>
+import { MathfieldElement } from 'mathlive'; // 直接导入 MathLive 组件
+
+export default {
+    data() {
+        return {
+            latex: '\\frac{a}{b} + \\sqrt{x^2 + y^2} + e^{i\\pi}', // 默认 LaTeX 公式,
+            mathFieldInstance: null
+        };
+    },
+    watch: {
+        latex(newVal) {
+            if (this.mathFieldInstance && this.mathFieldInstance.value !== newVal) {
+                this.mathFieldInstance.setValue(newVal);
+            }
+        }
+    },
+
+    mounted() {
+        if (this.$refs.mathField) {
+            // 创建 MathfieldElement 组件
+            const mf = new MathfieldElement();
+            mf.style.width = '100%'; // 让输入框撑满
+            mf.virtualKeyboardMode = 'manual'; // 显示虚拟键盘
+            mf.addEventListener('input', (event) => {
+                this.latex = event.target.value; // 监听输入并更新 LaTeX 公式
+            });
+            mf.value = this.latex; // 设置默认值
+            this.$refs.mathField.appendChild(mf); // 挂载到 DOM
+            this.mathFieldInstance = mf;
+        } else {
+            console.error('MathLive 未正确加载');
+        }
+    },
+    beforeDestroy() {
+        this.mathFieldInstance = null; // 组件销毁时清除实例
+    }
+};
+</script>
+
+<style>
+.math-container {
+    min-height: 40px;
+    border: 1px solid #ccc;
+    padding: 5px;
+    font-size: 18px;
+}
+</style>

src/components/page/components/table/word.vue

@@ -65,6 +65,7 @@
                                 <i class="el-icon-document"> </i>
                                 Batch Add content
                             </li>
+                           
                         </ul>
                     </div>
                 </div>
@@ -116,6 +117,8 @@
                     position: relative;
                 "
             >
+
+            <!-- <common-late-x></common-late-x> -->
                 <template v-for="(item, index) in wordList">
                     <el-checkbox
                         @change="updateUniqueIds"