最近有個需求,項目用的IVIEW4 UI.
問題:drawer組件在選中文本移動到蒙層松開會是drawer關(guān)閉(組件本身設(shè)計問題).
需求:用戶在選中文本時幅度很大拖動到蒙層,drawer不關(guān)閉.
(抱怨兩句,哪個傻逼腦子有坑選文本要那么大幅度?有空配張該用戶使用設(shè)想圖)
項目已經(jīng)很多地方用到了,第一想到的最好修改的方法是,對第三方組件的修改湿右，不可能直接修改源碼坐梯。想了想能否從引入的時候進行修改,著手行動.發(fā)現(xiàn)是可行的。
Vue.component('Drawer', _.defaultsDeep({ // lodash深度合并
methods: {
close () {
// ******** begin 選中文本時拖動到蒙層時不執(zhí)行關(guān)閉****************
let selectText = window.getSelection?window.getSelection():document.selection.createRange().text;
if(selectText.anchorNode.nodeType == 3 && selectText.anchorNode.data && selectText.type=='Range') {
return;
}
// ******** end 選中文本時拖動到蒙層時不執(zhí)行關(guān)閉****************
// ******** 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'
研究時發(fā)現(xiàn),selectText 會默認拿到第一個label標簽,需要通過type再進一步判斷
