Vue 全局禁用组件

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

                            }

                        }

                    });

                }

            }

        });

    }

});
阅读 290
评论 更新于 1月7日
    3 个回答

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

    评论 赞赏 1月7日
      Mwind
      • 469

      我能想到的有三个方法:

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

        通过css样式来控制如何.

        .disabled{
            pointer-events: none;
            opacity: 0.6;
        }
        评论 赞赏 1月7日
          撰写回答

          登录后参与交流、获取后续更新提醒