如何为第三方vue组件进行自定义/拓展属性方法

最近有个需求,项目用的IVIEW4 UI.
问题:drawer组件在选中文本移动到蒙层松开会是drawer关闭(组件本身设计问题).
需求:用户在选中文本时幅度很大拖动到蒙层,drawer不关闭.
(抱怨两句,哪个傻逼脑子有坑选文本要那么大幅度?有空配张该用户使用设想图)

项目已经很多地方用到了,第一想到的最好修改的方法是,对第三方组件的修改,不可能直接修改源码。想了想能否从引入的时候进行修改,着手行动.发现是可行的。

Vue.component('Drawer', _.defaultsDeep({ // lodash深度合并
  methods: {
    close () {
      // ******** begin 选中文本时拖动到蒙层时不执行关闭****************
      let selectText = window.getSelection?window.getSelection():document.selection.createRange().text;
      if(selectText.anchorNode.nodeType == 3 && selectText.anchorNode.data && selectText.type=='Range') {
        return;
      }
      // ******** end 选中文本时拖动到蒙层时不执行关闭****************
      
      // ******** start iview 源码*********
      if (!this.beforeClose) {
        return this.handleClose();
      }
      const before = this.beforeClose();
      if (before && before.then) {
        before.then(() => {
          this.handleClose();
        });
      } else {
        this.handleClose();
      }
      // ******** end iview 源码*********
    }
  }
},Drawer,{}));

特别注意:
selectText.type=='Range'
研究时发现,selectText 会默认拿到第一个label标签,需要通过type再进一步判断

你可能感兴趣的:(如何为第三方vue组件进行自定义/拓展属性方法)