vue 一個簡單的公式編輯器組件

示例

一個基于vue實現數據統計公式的基本功能。
新建一個 formula.vue 組件，
使用 <formula ref=“formulaPage” :data-list=“dataList” >

<template><div id="formulaPage"><!-- 公式編輯區域 --><divclass="formulaView"id="formulaView"ref="formulaView"@click.stop="recordPosition()"><div class="content-item" v-for="(item,index) in formulaList" :key="index" @click.stop="recordPosition(index)" ><div class="num" v-if="item.type == 'num'" >&zwj;{{item.value}}</div><div class="plain" v-else-if="item.type == 'plain'" >&zwj;{{item.value}}</div><div class="obj" v-else-if="item.type == 'obj'" >&zwj;{{item.value}}</div><!--光標--><div class="cursor" v-if="item.cursor" ></div></div></div><div class="tab mt_10 flex-lr"><div class=""><el-select @change="e=>{addItem(e,'obj',)}"style="width: 120px"v-model="dataId" placeholder="選擇指標" ><el-option v-for="item in dataList":label="item.name" :value="item.id":key="item.id" ></el-option></el-select><el-select @change="e=>{addItem(e,'plain',)}" v-model="operatorId"placeholder="選擇數學運算符"style="width: 120px"class="ml_20"><el-option v-for="item in operatorList" :label="item.name" :value="item.id" :key="item.id" ></el-option></el-select></div><div class=""><span class="mr_10 pointer theme-col" @click="clearAll()" > 清除全部</span></div></div></div> </template> <script>/*** dataList 需要選擇數據的集合* defaultList 初始值的集合* @change 比變更后回傳的數據* **/export default {name: '',props:{dataList:{type:Array,default() {return [];},},defaultList:{type:Array,default() {return [];},},},data: function () {return {// 公式字符串formulaStr:'',dataId:'',operatorId:'',formulaList:[],//運算符operatorList:[{name:'+',id:'+'},{name:'-',id:'-'},{name:'*',id:'*'},{name:'/',id:'/'},{name:'()',id:'()'},]}},watch:{formulaList(val){this.$emit('change',val)}},created() {//監聽鼠標事件this.$nextTick(function () {document.addEventListener("keydown", this.keydown, false);document.addEventListener('click',this.formulaBlur);});},destroyed () {//移除監聽事件document.removeEventListener("keydown", this.keydown, false);document.removeEventListener('click',this.formulaBlur);},methods: {// 獲取getFormula: function(){},// 點選時記錄光標位置recordPosition(index) {if(this.formulaList && this.formulaList.length >0){this.formulaList = this.formulaList.map((item,itemIndex)=>{item.cursor = false;if(index > -1 && index == itemIndex){item.cursor = true;}else if((index!==0 && !index) && itemIndex == (this.formulaList.length -1)){item.cursor = true;}return item});}else {this.formulaList = [{cursor:true,type:'placeholder',value:'',}]}// this.$forceUpdate();},//失去焦點formulaBlur(e){this.formulaList = this.formulaList?.map(item=>{item.cursor = false;return item})},/*** @returns {addItem<*, void, *>}* 添加字段* type obj 字段 num 數字 plain符號* place 是否修改光標位置*/addItem: function (val, type,place = true) {if(!val) return false;let that = this;//插入括號if(type == 'plain' && val == '()'){val = '(';setTimeout(function () {that.addItem(')',type,false)},50)}let obj={},data = {value:'',key:val,type:type,};if(type == 'obj'){//獲取數據 為 value 賦值obj = this.dataList?.find(item=>item.id == val);data.value = obj.name;}else {data.value = val;}if(this.formulaList && this.formulaList.length>0){const length = this.formulaList.length;for (let i = 0; i < length; i++) {//查找光標位置 如果光標位置為空 則在最后添加if(this.formulaList[i].cursor){this.formulaList.splice(i+1,0,data);place && this.recordPosition(i+1);break;}else if(i === (this.formulaList.length - 1)){this.formulaList.push(data)this.recordPosition(this.formulaList.length - 1);}}}else {if(!this.formulaList){this.formulaList = [];}this.formulaList.push(data);this.recordPosition(this.formulaList.length - 1);}},//清除全部clearAll(){this.formulaList = [];let that = this;setTimeout(function () {that.recordPosition();},100);},//刪除deleteItem(type){let arr = JSON.parse(JSON.stringify(this.formulaList)),index = null;const length = arr?.length;for (let i = 0; i < length; i++) {if(arr[i].cursor && arr[i].key){index = i;if(type == 'del'){index = i + 1;}if(index > -1){this.formulaList.splice(index,1);if(type == 'del') {}else {this.recordPosition(index - 1);}}break;}}},// 鍵盤輸入keydown(e){//禁止輸入// 檢測光標是否存在let index,cursorData = this.formulaList?.find((item,itemIndex)=>{if(item.cursor){index = itemIndex}return item.cursor});if(!cursorData){return false;}//左右移動鍵控制光標位置if (e && [37,39].includes(e.keyCode)){if(e.keyCode == 37){index = index - 1;}else {index = index + 1;}if(index > -1 && index < this.formulaList.length){this.recordPosition(index);}}else if (e && e.keyCode == 8){//Backspace 鍵 刪除前面的值this.deleteItem();}else if (e && [107,109,106,111].includes(e.keyCode)){//運算符列表this.addItem(e.key,'plain')}else if (e && e.shiftKey && [48,57].includes(e.keyCode) ){//括號if( e.keyCode == 48) e.key = ')';if( e.keyCode == 57) e.key = '(';this.addItem(e.key,'plain')}else if (e && e.keyCode == 46){//delete鍵刪除光標后面的值this.deleteItem('del');}else {document.returnValue = false;var tt=/^([1-9]{1}[0-9]{0,7})$/;//能輸入正數if(tt.test(e.key)){//輸入為數字 插入數字this.addItem(e.key,'num')}}},/*** 公式轉為字符串* 格式 [id]符號數字* **/parsingFormula: function(formulaStr){let str = '',arr = [];arr = this.formulaList?.map(item=>{let val = item.key;if(val){if(item.type == 'obj'){val = '['+val+']'}str = str+val;}return val});return str},/*** 格式效驗* */formatValidation(){let objData = null;let arr = this.formulaList?.filter(item=>{if(item.type == 'obj'){objData = item;}return item.key;}),data = {type:true,mag:''};if(!objData){data.mag = '至少添加一個指標';}else {for (let i = 0; i < arr.length; i++) {if(i < arr.length-1){//判斷當前類型if(arr[i].type == 'obj' && arr[i+1].type =='plain' ){//類型為obj時 后一個 需以 符號結尾data.mag = '指標后綴';}}}}if(data.mag){data.type = false;}return data;},}} </script> <style lang="scss">#formulaPage {.formulaView{padding: 3px 4px;width: 100%;height: 120px;border: 1px solid #eee;line-height: 1.3;font-size: 12px;overflow-y: scroll;.content-item{position: relative;height: 16px;cursor: text;user-select: none;display: flex;align-items: center;float: left;.cursor{height: 13px;width: 1px;background: #333;animation:defaultCursor 1s steps(2) infinite;position: absolute;right: 0;}.obj {padding: 0 5px;margin: 0 1px;background: #f1f1f1;border-radius: 3px;}.num{color: #000;background: #fff;padding: 0 1px 0 0;}}}}@keyframes defaultCursor {0% {opacity: 1;}100% {opacity: 0;}} </style>

總結

以上是生活随笔為你收集整理的【一个简单的vue公式编辑器组件】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。