单击文档上的任意位置时隐藏弹出框



>我正在尝试制作一个带有项目列表的组件,当我单击每个项目时,它会显示一个编辑弹出窗口。当我再次单击它时,它会隐藏编辑弹出窗口。但是我也希望能够单击文档上的任意位置并隐藏所有编辑弹出窗口(通过设置 edit_item_visible = false)。

尝试点击 v-on-move,但由于我有一个项目列表,那么它会触发多次。@click事件将首先触发,然后单击事件将触发多次并在显示后立即将其隐藏。我还尝试从外部更改组件的数据,但没有运气。

Vue.component('item-list', {
    template: `
        <div>
            <div v-for="(item, index) in items" @click="showEdit(index)">
                <div>{{ item.id }}</div>
                <div>{{ item.description }}</div>
                <div v-if="edit_item_visible" class="edit-item">
                    Edit this item here...
                </div>
            </div>
        </div>
    `,
    data()
    {
        return {
            items: [],
            edit_item_visible: false,
            selected: null,
        };
    },
    methods:
    {
        showEdit(index)
        {
            this.selected = index;
            this.edit_item_visible = !this.edit_item_visible;
        }
    },
});
const App = new Vue ({
    el: '#app',
})

如果您希望能够同时编辑多个项目,则应存储已编辑项目的列表,而不是全局edit_item_visible标志。

    showEdit(item)
    {
        this.selected = item;
        this.editing_items.push(item);
    }

    // v-on-clickaway="cancelEdit(item)"
    cancelEdit(item)
    {
        let idx = this.editing_items.indexOf(item);
        this.editing_items.splice(idx, 1);
    }

最新更新