Question

标题只是一个简单介绍真正的问题，基本上我有一个包含很多元素的仪表板（例如：表格，段落，标题）这些元素分别对应于docx文档的构造。

每当我点击其中一个元素时，我会打开一个新模态，我可以在其中更改一些参数以创建元素，例如使用段落我可以更改其对齐方式，颜色和文本。

当我点击添加这个元素时，它会被添加到我页面中的一个部分作为一个块，我应该可以通过点击块上方来更改每个块的属性。

我想打开一个新模式（类似于我在仪表板中打开时的模态，区别而不是添加，进行编辑）。

我的问题是，我不知道在没有杂乱的意大利面条代码的情况下，最好的方法是什么。

目前我正在以这种方式构建它：

我的仪表板组件是这样的：

<template>
    <div class="navbar navbar-custom navbar-fixed-left navSize">
        <form class="navbar-form margin-above" role="search">
            <div class="input-group add-on">
                <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
            </div>
        </form>
        <h4 class="text-center">Doc Sections</h4>
        <div @click="changeView('appTable')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Table</h4>
            </div>
        </div>

        <div @click="changeView('appParagraph')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Paragraph</h4>
            </div>
        </div>
        <div @click="changeView('appImage')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Image</h4>
            </div>
        </div>
        <div @click="changeView('appBulletList')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Bullet List</h4>
            </div>
        </div>
        <div @click="changeView('appHeading')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Heading</h4>
            </div>
        </div>
        <div @click="changeView('appBreak')" class="card card-color">
            <div class="card-block">
                <h4 class="card-title text-center">Break</h4>
            </div>
        </div>
    </div>
</template>


<script>

export default {
    data() {
        return {
            text: "",
            fontSize: 14,
            key: "Paragraph",
            paragraph: {},

        }
    },
    methods: {
        addParagraph() {
            this.$set(this.paragraph, 'key', this.key);
            this.$set(this.paragraph, 'text', this.text);
            this.$set(this.paragraph, 'fontSize', this.fontSize);
            this.$store.commit("appendToDocument", this.paragraph)
        },
        changeView: function (view) {
            this.$store.commit("changeCurrentView", view);
            this.show();
        },
        show() {
            this.$modal.show('modalSection');
        },
        hide() {
            this.$modal.hide('modalSection');
        },
        hey() {
            console.log("HEY");
        }
    },
}
</script>

更改视图向vuex发送应该呈现模式的新组件，我在vuex商店中有这个：

 currentView: 'appTable',



  changeCurrentView: (state, view) => {
        state.currentView = view;
    },

在我的创建文件模板中的

是我渲染我点击的组件的地方，像这样：

 <modal name="modalSection">
        <component :is="getView">
        </component>
    </modal>

computed:{
    getView(){
        return this.$store.getters.getCurrentView;
    }
},

再次，我访问vuex以查看当前单击的View并更改渲染的组件。在这个页面中，我还加载了要显示的组件，但我认为关于它如何工作的重要部分已经显示出来，每个组件都有自己的属性，例如Table是1个组件，里面有他的属性，比如（行数），列）。

我是否需要将所有这些属性从我的所有组件传递到vuex？所以我可以在其他组件中编辑它们。或者有更好的方法吗？

谢谢你们

使用vuejs模态进行编辑

0 个答案: