vue公式编辑器加强版(简化版)

上次需求是不需要输入,让他固定选择数据,所以做了这套max垃圾版,看看就行了,还是那个大佬写的好一点,我这个是简化了

之前代码改自 vue 一个公式编辑器组件_你好,我叫A某人的博客-CSDN博客


<template><div id="formulaPage"><div class="tab"><div class="tit">添加字段</div><div class="df"><div class="mr10" v-for="(v, i) in JsonList" :key="i"><button @click="addItem($event, 1)">{{ v.name }}</button></div></div></div><div class="tab"><div class="tit">数字</div><div class="df"><div class="mr10" v-for="(v, i) in Num" :key="i"><button @click="addItem($event, 2)">{{ v }}</button></div></div></div><div class="tab"><div class="tit">状态按钮</div><div class="df"><div class="mr10" v-for="(v, i) in StateButton" :key="i"><button @click="addItem($event, 3)">{{ v.name }}</button></div></div></div><div class="tab"><div class="tit">数学运算符</div><div class="df"><div class="mr10" v-for="(v, i) in Symbol" :key="i"><button @click="addItem($event, 4)">{{ v }}</button></div><button @click="remove()">del</button></div></div><!-- 公式编辑区域 --><!-- {{JsonList}} --><div class="df"><div class="mr5" v-for="(v, i) in formulaArr" :key="i">{{ v | filterJson(JsonList, StateButton) }}</div></div>{{ formulaVarArr }}</div>
</template>
<script>
export default {name: "formulaPage",data: function () {return {// 公式字符串 (通过公式数组拼接)formulaStr: "",// 公式数组 (返回给后端的)formulaArr: ["y2", 2, 3],// // 公式数组 (不返回,显示数组,不一定要用)// formulaNameArr: [],// 变量数组 (返回给后端的)formulaVarArr: ["y2"],// 数据一览 本地存储的数据JsonList: [{id: 1,name: "P",value: "y2",type: "1",},{id: 2,name: "N3",value: "y3",type: "1",},],Num: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],Symbol: ["+","-","*","/","(",")",".",",","if","<",">","=",],StateButton: [{id: 1,name: "开",value: 1,},{id: 2,name: "关",value: 2,},{id: 3,name: "运行",value: 3,},{id: 4,name: "停止",value: 4,},],};},filters: {// 用户名filterJson(id, JsonList, StateButton) {var name = "";// var list = options.find(function (item) {//     return item.id == id;// });JsonList.forEach((item) => {// console.log(item, id, item.id);if (item.value !== id) {name = id;}});JsonList.forEach((item) => {// console.log(item, id, item.id);if (item.value == id) {name = item.name;}});var reg = /#(.+?)#/g;var r = reg.test(id);if (r) {var a = id.replace(reg, function (word, $1) {return $1;});var name2 = "";StateButton.forEach((v, i) => {if (a == v.value) {name2 = v.name;}});return name2;} else {return name;}},},methods: {// 点选时记录光标位置recordPosition: function () {// 保存最后光标点this.formulaLastRange = window.getSelection().getRangeAt(0);},// 添加字段 type 1 字段  2 公式 3 状态 4 数字或者数字运算符addItem: function (e, type) {// e.target.innerText为当前元素名称// console.log(e.target.innerText, type);if (type == 1) {this.JsonList.forEach((v, i) => {if (v.name === e.target.innerText) {this.formulaVarArr.push(v.value);this.formulaArr.push(v.value);}});} else if (type == 3) {this.StateButton.forEach((v, i) => {if (v.name == e.target.innerText) {this.formulaArr.push("#" + v.value + "#");}});// this.formulaArr.push(e.target.innerText);} else {this.formulaArr.push(e.target.innerText);}},remove() {// console.log(this.formulaVarArr);// console.log(this.formulaArr);var fin = this.formulaArr[this.formulaArr.length - 1];// console.log(fin);this.JsonList.forEach((v, i) => {if (v.value == fin) {this.formulaVarArr.pop();}});this.formulaArr.pop();},},
};
</script>
<style lang="less">
#formulaPage {> .tab {> ul {&:after {content: "";display: table;clear: both;}> li {margin-right: 20px;float: left;padding: 0 10px;height: 25px;line-height: 25px;border-radius: 5px;border: 1px solid #000;}}}> .formulaView {margin-top: 20px;min-height: 100px;width: 300px;padding: 5px;border: 2px solid #000;resize: both;overflow: auto;line-height: 25px;span {user-select: none;display: inline-block;margin: 0 3px;height: 20px;line-height: 20px;letter-spacing: 2px;background: #aaa;border-radius: 3px;white-space: nowrap;color: red;&:first-child {margin-left: 0;}}}
}
</style>

vue公式编辑器加强版(简化版)相关推荐

【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...
使用electron-vue开发公式编辑器
开发起因由于组会汇报时,在所难免的需要使用公式,但是PPT和Word中的公式编辑器使用不惯,并且之前写博客都是使用markdown编辑的,而markdown中的LaTeX公式编辑就非常方便,所以就打 ...
vue数学公式编辑器_将Vue包装器用于MathLive数学编辑器的示例
vue数学公式编辑器 Vue-Mathlive (vue-mathlive) The MathLive Vue wrapper provides a Vue component that implem ...
excel公式编辑器_职场办公技巧—Word公式编辑器怎么用
在使用办公软件的时候,Excel是经常使用公式的一个软件,那么Word中有没有公式可以使用呢?其实在Word中有一个非常好用的公式编辑器,你们知道怎么用吗?一起来看看我的公式编辑器怎么用吧!! 首先点 ...
公式没有编号_知乎公式编辑器的一些小技巧 amp; 使用规范
经常在知乎写数学/物理等含有大量公式的文章的小伙伴们,一定都离不开知乎里的公式编辑器.这里分享几个公式编辑器的小技巧~ 公式编辑器其实有快捷键,开启/关闭时完全可以不用鼠标操作按下 Ctrl + S ...
[原创] 为Visio添加公式编辑器工具栏按钮
前言作为理工科的学生,在写论文时,难免会在示意图中添加一些公式来说明研究内容.常用的画图工具就是 Visio .而常用的公式编辑器就是 Mathtype .对于 Word 这种软件,Mathtype ...
Aurora公式编辑器在64位Word 2013不显示选项卡
Aurora公式编辑器在64位Word 2013,可能是2013版本太高,支持性不佳,或者因为64位的版本原因,安装Aurora后在word 2013中不显示选项卡. 虽然不显示选项卡,但也是可以使用 ...
无穷级数求和7个公式_亿图在线公式编辑器使用方法入门篇
在工作和学习中难免会遇到写公式的时候,简单的公式可以用Word自带的公式编辑器进行编写.若是遇到复杂的公式时,鼠标频繁性的点击和查找又会花费我们很多时间,如何解决快速输入公式的问题,让我们效率变得更高 ...
catia目录编辑器使用教程_如何去编辑数学公式？公式编辑器使用教程
在我们的日常工作中,经常会使用和编辑到数学公式,mathtype作为一个专业的数学公式编辑器,有着强大的功能,能够轻松地在文档中输入复杂的数学.物理公式和符号!是理科生必备工具! 那么我们该怎么使用这 ...
Markdown如何插入LaTeX公式？（在线LaTeX公式编辑器）
如图,想在markdown中插入这个公式,咋弄呢? 如果为了编辑这个公式而去学习LaTeX公式语法,那可就太蛋疼了!!! 下面推荐一个在线可视化LaTeX公式编辑器,你可以利用里面的可视化工具编辑好公 ...

vue公式编辑器加强版(简化版)

vue公式编辑器加强版(简化版)相关推荐

最新文章

热门文章

vue公式编辑器 加强版(简化版)

vue公式编辑器 加强版(简化版)相关推荐

最新文章

热门文章

vue公式编辑器加强版(简化版)

vue公式编辑器加强版(简化版)相关推荐