此插件可用于H5页面的公式渲染与书写,渲染使用的是mathquill.js,所以只要mathquill支持的格式,本插件都支持。

更新日志
- 增加输入框触摸移动光标
- 长按删除键快速删除
插件的安装
NPM
npm i math-keyboard
插件依赖
由于本插件公式渲染使用了mathquill.js,该插件依赖于JQuery,所以需要正确引用JQuery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
引入插件
import Vue from 'vue';
import MathKeyboard from 'math-keyboard';
Vue.use(MathKeyboard);
基本用法
<!-- 公式渲染 -->
<math-render :value.sync="value" :imgshow='!show'></math-render>
<!-- 键盘 -->
<math-keyboard
:show.sync="show"
v-bind:keypanel='1'
:value.sync="value"
:output.sync="output"
url='http://localhost:8080/formula'
v-bind:writeShow='true'
></math-keyboard>
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| :show.sync | 键盘的显示与隐藏 | Boolean | false |
| v-bind:keypanel | 默认键盘的面板(1.数字2.符号3.字母) | Number | 1 |
| :value.sync | 当前键盘LaTeX值,会实时更新,可当做默认值传递 | String | |
| :output.sync | 输出LaTeX值 | String | |
| url | 手写识别接口地址 | String | |
| v-bind:writeShow | 是否使用手写 | Boolean | true |
手写识别
本插件手写识别使用的是 seshat,感兴趣的可以自行搭建,默认接口使用的是官方示例接口
请求示例(已内置,只需提供接口地址即可,可自行后台搭建):
$.ajax({
url:"http://cat.prhlt.upv.es/mer/eq.php",
method: 'post',
data: {
strokes:params
},
dataType:'json',
success(res){
console.log(res.data)
}
})
公式符号扩展
配置格式如下,可根据自己的需求来修改,目前还不支持通过API来进行修改
k:按键显示字符
v:符号latex代码
i:对于一些无法正常输入的符号可以使用图片代替(仅显示)
import img from './img.js'
//符号配置
keysym:[
{k:'',v:'^2',i:img.cuadrado},
{k:'',v:'^3',i:img.tercera},
{k:'',v:'/',i:img.fraccion},
{k:'',v:'^',i:img.potencia},
{k:'',v:'\\sqrt',i:img.raiz2},
{k:'',v:'\\nthroot',i:img.raiz},
{k:'',v:'(',i:img.zkh},
{k:'',v:')',i:img.ykh},
{k:'',v:'[',i:img.zfkh},
{k:'',v:']',i:img.yfkh},
{k:'sin',v:'\\sin',i:''},
{k:'cos',v:'\\cos',i:''},
{k:'tan',v:'\\tan',i:''},
{k:'π',v:'\\pi',i:''},
{k:'',v:'|',i:img.abs},
{k:'≈',v:'\\approx',i:''},
{k:'%',v:'%',i:''},
{k:'+',v:'+',i:''},
{k:'-',v:'-',i:''},
{k:'×',v:'\\times',i:''},
{k:'÷',v:'\\div',i:''},
{k:'±',v:'\\pm',i:''},
{k:'>',v:'>',i:''},
{k:'<',v:'<',i:''},
{k:'≥',v:'\\geq',i:''},
{k:'≤',v:'\\leq',i:''},
{k:',',v:',',i:''},
{k:':',v:':',i:''},
{k:'或',v:'或',i:''},
{k:'且',v:'且',i:''},
{k:'非',v:'非',i:''},
]
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build