Vue 全局禁用组件

Question

Vue + antdv 的项目，最近有个页面有两种状态，编辑态和查看态，编辑状态下可以对页面进行修改，但是如果是查看状态下，页面所有的可修改部分都应该被禁用，但页面中元素太多，每个地方都去加 disabled 不太方便，到后面新开发的组件也需要兼顾这部分功能有些难以维护，因此考虑一种可以直接全局禁用的方案，不用在每个组件上去添加 disabled 的方法，有大佬给出思路吗？

目前想到的一种方案是直接修改 props.disabled 的 getter，这种方式太暴力，但目前还没有更好的思路，希望哪位朋友想到了指点指点:

Vue.use({

    install(Vue) {

        Vue.mixin({

            created() {

                const { $props, $route } = this;

                if ($props && $route) {

                    const desc = Object.getOwnPropertyDescriptor($props, 'disabled') || {};

                    const originGetter = desc.get;

                    Object.defineProperty($props, 'disabled', {

                        ...desc,

                        get() {

                            if ($route.query.readMode !== undefined) {

                                return true;

                            } else {

                                return originGetter && originGetter.call(this);

                            }

                        }

                    });

                }

            }

        });

    }

});

Answer 1

<fieldset>可以一定程度上实现。之所以说一定程度是因为ant中的date-picker这样的组件没办法通过fieldset禁用。或许只能通过二次封装来实现了。

Answer 2

我能想到的有三个方法：

1. 表单中所有的输入组件disabled属性都绑定到同一个值，只需改变这个值就好。缺点就是个别输入框需要单独禁止就无法实现了，解决办法就是特例输入框绑定到其他值单独控制。
2. 二次封装，代价有点高。
3. 直接父组件this.$refs拿到所有子组件的引用，遍历子组件分别disabled属性赋值true，vue会有警告，这会破坏vue组件设计原则不建议使用。

Answer 3

通过css样式来控制如何.

.disabled{
    pointer-events: none;
    opacity: 0.6;
}

Answer 4

我也在解决这个问题，我的思路是，这个状态单独存起来。每一个操作可以和页面路由关联。然后实现：①把按钮的状态放在状态管理里面 ②封装一个组件把子组件套起来 ③ 隐藏v-if实现，disable通过父组件做遮盖。 ④接口做API权限，这样双重保险。

这样新项目可以用父组件直接套上，老项目在代价高，但是如果是持续迭代的化还好，需要权限的就给套上。

另一种方式：实现一个公共方法，在vue的生命周期取实现。