Browse Source

KERNEL-12148 feat: drawer暂时改用left,right实现

因为transform对下拉框影响到问题还未解决,会导致drawer里面的下拉框都无法弹出
es6
zsmj 2 years ago
parent
commit
093621581d
  1. 21
      src/base/layer/layer.drawer.js
  2. 2
      src/less/base/view/drawer.less

21
src/base/layer/layer.drawer.js

@ -154,22 +154,22 @@ BI.Drawer = BI.inherit(BI.Widget, {
switch (o.placement) {
case "right":
self.element.css({
transform: "translateX(-" + size.width + "px)"
left: "calc(100% - " + size.width + "px)"
});
break;
case "left":
self.element.css({
transform: "translateX(" + size.width + "px)"
right: "calc(100% - " + size.width + "px)"
});
break;
case "top":
self.element.css({
transform: "translateY(" + size.height + "px)"
bottom: "calc(100% - " + size.height + "px)"
});
break;
case "bottom":
self.element.css({
transform: "translateY(-" + size.height + "px)"
top: "calc(100% - " + size.height + "px)"
});
break;
}
@ -180,17 +180,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
hide: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
var size = self._getSuitableSize();
switch (o.placement) {
case "right":
self.element.css({
left: "100%"
});
break;
case "left":
self.element.css({
transform: "translateX(0px)"
right: "100%"
});
break;
case "top":
self.element.css({
bottom: "100%"
});
break;
case "bottom":
self.element.css({
transform: "translateY(0px)"
top: "100%"
});
break;
}

2
src/less/base/view/drawer.less

@ -2,5 +2,5 @@
.bi-drawer {
.box-shadows(-6px 0 16px -8px #00000014, -9px 0 28px #0000000d, -12px 0 48px 16px #00000008);
.transitions(transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1));
.transitions(inset .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1));
}

Loading…
Cancel
Save