如何为第三方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再进一步判断

推荐阅读更多精彩内容

  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 4,468评论 16 21
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 7,199评论 0 6
  • 哈里·基恩想和新教练何塞·穆里尼奥建立一种“牢固的关系”,这将有助于托特纳姆更上一层楼。 凯恩在4-2战胜奥林匹亚...
    疯狂SPORTS阅读 5,132评论 0 5
  • 可爱进取,孤独成精。努力飞翔,天堂翱翔。战争美好,孤独进取。胆大飞翔,成就辉煌。努力进取,遥望,和谐家园。可爱游走...
    赵原野阅读 1,022评论 1 1
  • 在妖界我有个名头叫胡百晓,无论是何事,只要找到胡百晓即可有解决的办法。因为是只狐狸大家以讹传讹叫我“倾城百晓”,...
    猫九0110阅读 951评论 2 3