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

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

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

<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>