Browse Source

新增Drawer组件

es6
guy 3 years ago
parent
commit
8617b508fb
  1. 46
      src/base/layer/layer.drawer.js

46
src/base/layer/layer.drawer.js

@ -4,8 +4,14 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Drawer = BI.inherit(BI.Widget, { BI.Drawer = BI.inherit(BI.Widget, {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big"
},
props: { props: {
baseCls: "bi-drawer bi-card", baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right placement: "right", // top/bottom/left/right
header: null, header: null,
headerHeight: 40, headerHeight: 40,
@ -74,10 +80,37 @@ BI.Drawer = BI.inherit(BI.Widget, {
bgap: o.bodyBgap bgap: o.bodyBgap
}]; }];
return { return BI.extend({
type: "bi.vtape", type: "bi.vtape",
items: items items: items
}, this._getSuitableSize());
},
_getSuitableSize: function () {
var o = this.options;
var size = 0;
switch (o.size) {
case "big":
size = 736;
break;
case "small":
size = 200;
break;
case "normal":
default:
size = 378;
break;
}
if (o.placement === "top" || o.placement === "bottom") {
return {
height: o.height || size
}; };
}
if (o.placement === "left" || o.placement === "right") {
return {
width: o.width || size
};
}
}, },
mounted: function () { mounted: function () {
@ -117,25 +150,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
show: function (callback) { show: function (callback) {
var self = this, o = this.options; var self = this, o = this.options;
requestAnimationFrame(function () { requestAnimationFrame(function () {
var size = self._getSuitableSize();
switch (o.placement) { switch (o.placement) {
case "right": case "right":
self.element.css({ self.element.css({
transform: "translateX(-" + self.getWidth() + "px)" transform: "translateX(-" + size.width + "px)"
}); });
break; break;
case "left": case "left":
self.element.css({ self.element.css({
transform: "translateX(" + self.getWidth() + "px)" transform: "translateX(" + size.width + "px)"
}); });
break; break;
case "top": case "top":
self.element.css({ self.element.css({
transform: "translateY(" + self.getHeight() + "px)" transform: "translateY(" + size.height + "px)"
}); });
break; break;
case "bottom": case "bottom":
self.element.css({ self.element.css({
transform: "translateY(-" + self.getHeight() + "px)" transform: "translateY(-" + size.height + "px)"
}); });
break; break;
} }
@ -160,7 +194,7 @@ BI.Drawer = BI.inherit(BI.Widget, {
}); });
break; break;
} }
setTimeout(callback, 300) setTimeout(callback, 300);
}); });
}, },

Loading…
Cancel
Save