From bbd11f2dcf78a65fda13b3c61e0e6cd0cb42462d Mon Sep 17 00:00:00 2001 From: wangsong Date: Wed, 4 Apr 2018 20:57:38 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0KLDraggable=EF=BC=8CKLMod?= =?UTF-8?q?al=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/components/notice/KLModal/index.html | 2 +- src/js/components/notice/KLModal/index.js | 1 + src/js/components/notice/KLModal/index.mcss | 2 +- src/js/components/notice/KLModal/index.md | 25 ++ .../components/widget/KLDraggable/dragdrop.js | 17 + src/js/components/widget/KLDraggable/index.js | 298 ++++++++++++++++++ src/js/components/widget/KLDraggable/index.md | 40 +++ src/js/index.js | 1 + 8 files changed, 384 insertions(+), 2 deletions(-) create mode 100644 src/js/components/widget/KLDraggable/dragdrop.js create mode 100644 src/js/components/widget/KLDraggable/index.js create mode 100644 src/js/components/widget/KLDraggable/index.md diff --git a/src/js/components/notice/KLModal/index.html b/src/js/components/notice/KLModal/index.html index 2d13e43d..5fef57bb 100644 --- a/src/js/components/notice/KLModal/index.html +++ b/src/js/components/notice/KLModal/index.html @@ -1,5 +1,5 @@
-
+
{#if isCanClose} diff --git a/src/js/components/notice/KLModal/index.js b/src/js/components/notice/KLModal/index.js index 2a056f77..eaba9fc3 100644 --- a/src/js/components/notice/KLModal/index.js +++ b/src/js/components/notice/KLModal/index.js @@ -26,6 +26,7 @@ const _ = require('../../../ui-base/_'); * @param {boolean} [options.data.noClose] => ok时是否关闭弹窗 * @param {number} [options.data.minHeight] => 内容区域最小高度 * @param {number} [options.data.maxHeight] => 内容区域最大高度，超出则显示滚动条 + * @param {boolean} [options.data.draggable=false] => 是否可以拖拽对话框 */ const KLModal = Component.extend({ name: 'kl-modal', diff --git a/src/js/components/notice/KLModal/index.mcss b/src/js/components/notice/KLModal/index.mcss index 36dcbb15..8ac837a1 100644 --- a/src/js/components/notice/KLModal/index.mcss +++ b/src/js/components/notice/KLModal/index.mcss @@ -31,7 +31,7 @@ // - Mask the background page background: rgba(0, 0, 0, 0.6); - &:before { + &:after { content: ''; display: inline-block; vertical-align: middle; diff --git a/src/js/components/notice/KLModal/index.md b/src/js/components/notice/KLModal/index.md index bad8699e..4d5300b0 100644 --- a/src/js/components/notice/KLModal/index.md +++ b/src/js/components/notice/KLModal/index.md @@ -430,6 +430,31 @@ var component = new NEKUI.Component({ ``` + +### 配置信息draggable +设置Modal可拖拽，默认不可拖拽。 + +
+ +```xml + +``` + +```javascript +var component = new NEKUI.Component({ + template: template, + show: function() { + var modal = new NEKUI.KLModal({ + data: { + content: 'Modal可拖拽', + draggable: true + } + }); + } +}); +``` + + ### 实例方法cancel 通过实例调用，执行该实例对象的`cancel`事件 diff --git a/src/js/components/widget/KLDraggable/dragdrop.js b/src/js/components/widget/KLDraggable/dragdrop.js new file mode 100644 index 00000000..f44ab5e2 --- /dev/null +++ b/src/js/components/widget/KLDraggable/dragdrop.js @@ -0,0 +1,17 @@ +const dragdrop = { + dragging: false, + data: null, + proxy: null, + screenX: 0, + screenY: 0, + clientX: 0, + clientY: 0, + pageX: 0, + pageY: 0, + movementX: 0, + movementY: 0, + droppable: null, + droppables: [], +}; + +module.exports = dragdrop; diff --git a/src/js/components/widget/KLDraggable/index.js b/src/js/components/widget/KLDraggable/index.js new file mode 100644 index 00000000..7cd6a4be --- /dev/null +++ b/src/js/components/widget/KLDraggable/index.js @@ -0,0 +1,298 @@ +/** + * ------------------------------------------------------------ + * @file KLDraggable 拖拽 + * @author sensen(rainforest92@126.com) + * ------------------------------------------------------------ + */ + +const Component = require('../../../ui-base/component'); +const _ = require('../../../ui-base/_'); +const dragdrop = require('./dragdrop.js'); + +/** + * @class KLDraggable + * @extend Component + * @param {object} [options.data] = 绑定属性 + * @param {object} [options.data.data] => 拖拽时需要传递的数据 + * @param {string/Dragable.Proxy/Element/function} [options.data.proxy] @=> 拖拽代理，即拖拽时显示的元素。默认值为`clone`，拖拽时拖起自身的一个拷贝；当值为`self`，拖拽时直接拖起自身。也可以用``自定义代理，或直接传入一个元素或函数。其他值表示不使用拖拽代理。 + * @param {string} [options.data.direction=all] => 拖拽代理可以移动的方向，`all`为任意方向，`horizontal`为水平方向，`vertical`为垂直方向 + * @param {boolean} [options.data.disabled=false] => 是否禁用 + * @param {string} [options.data.class=z-draggable] => 可拖拽时（即disabled=false）给元素附加此class + * @param {string} [options.data.dragClass=z-drag] => 拖拽该元素时给元素附加此class + */ +const Draggable = Component.extend({ + name: 'draggable', + template: '{#inc this.$body}', + config() { + _.extend(this.data, { + data: null, + proxy: 'clone', + direction: 'all', + class: 'z-draggable', + dragClass: 'z-drag', + }); + this.supr(); + + this._onMouseDown = this._onMouseDown.bind(this); + this._onBodyMouseMove = this._onBodyMouseMove.bind(this); + this._onBodyMouseUp = this._onBodyMouseUp.bind(this); + this.cancel = this.cancel.bind(this); + }, + init() { + const inner = _.dom.element(this); + _.dom.on(inner, 'mousedown', this._onMouseDown); + this.supr(); + + this.$watch('disabled', (newValue) => { + if (newValue) { + _.dom.delClass(inner, this.data.class); + } else { + _.dom.addClass(inner, this.data.class); + } + }); + }, + _getProxy() { + if (typeof this.data.proxy === 'function') { + return this.data.proxy(); + } else if (this.data.proxy instanceof window.Element) { + return this.data.proxy; + } else if (this.data.proxy instanceof Draggable.Proxy) { + const proxy = _.dom.element(this.data.proxy); + const dimension = _.dom.getDimension(_.dom.element(this)); + this._initProxy(proxy, dimension); + document.body.appendChild(proxy); + return proxy; + } else if (this.data.proxy === 'clone') { + const self = _.dom.element(this); + const dimension = _.dom.getDimension(self); + const proxy = self.cloneNode(true); + this._initProxy(proxy, dimension); + self.parentElement.appendChild(proxy); + return proxy; + } else if (this.data.proxy === 'self') { + const proxy = _.dom.element(this); + const dimension = _.dom.getDimension(proxy); + this._initProxy(proxy, dimension); + return proxy; + } + }, + _initProxy(proxy, dimension) { + proxy.style.left = `${dimension.left}px`; + proxy.style.top = `${dimension.top}px`; + proxy.style.zIndex = '2000'; + proxy.style.position = 'fixed'; + proxy.style.display = ''; + }, + _onMouseDown($event) { + if (this.data.disabled) { + return; + } + $event.preventDefault(); + _.dom.on(document, 'mousemove', this._onBodyMouseMove); + _.dom.on(document, 'mouseup', this._onBodyMouseUp); + }, + _onBodyMouseMove($event) { + const e = $event.event; + $event.preventDefault(); + if (dragdrop.dragging === false) { + _.extend(dragdrop, { + dragging: true, + data: this.data.data, + proxy: this._getProxy(), + screenX: e.screenX, + screenY: e.screenY, + clientX: e.clientX, + clientY: e.clientY, + pageX: e.pageX, + pageY: e.pageY, + movementX: 0, + movementY: 0, + droppable: undefined, + }, true); + + this._dragStart(); + } else { + _.extend(dragdrop, { + screenX: e.screenX, + screenY: e.screenY, + clientX: e.clientX, + clientY: e.clientY, + pageX: e.pageX, + pageY: e.pageY, + movementX: e.screenX - dragdrop.screenX, + movementY: e.screenY - dragdrop.screenY, + }, true); + + if (dragdrop.proxy) { + if (this.data.direction === 'all' || this.data.direction === 'horizontal') { + dragdrop.proxy.style.left = `${dragdrop.proxy.offsetLeft + dragdrop.movementX}px`; + } + if (this.data.direction === 'all' || this.data.direction === 'vertical') { + dragdrop.proxy.style.top = `${dragdrop.proxy.offsetTop + dragdrop.movementY}px`; + } + } + + this._drag(); + if (!dragdrop.dragging) { + return; + } + + // Drop + let pointElement = null; + if (dragdrop.proxy) { + dragdrop.proxy.style.display = 'none'; + pointElement = document.elementFromPoint(e.clientX, e.clientY); + dragdrop.proxy.style.display = ''; + } else { + pointElement = document.elementFromPoint(e.clientX, e.clientY); + } + + const pointDroppable = dragdrop.droppables.find((droppable) => { // eslint-disable-line array-callback-return + let element = pointElement; + const target = _.dom.element(droppable); + while (element) { + if (element === target) { + return true; + } + element = element.parentElement; + } + }); + + if (dragdrop.droppable !== pointDroppable) { + dragdrop.droppable && dragdrop.droppable._dragLeave(this); + if (!dragdrop.dragging) { + return; + } + pointDroppable && pointDroppable._dragEnter(this); + if (!dragdrop.dragging) { + return; + } + dragdrop.droppable = pointDroppable; + } else { + pointDroppable && pointDroppable._dragOver(this); + } + } + }, + _onBodyMouseUp($event) { + $event.preventDefault(); + + dragdrop.droppable && dragdrop.droppable._drop(this); + this.cancel(); + }, + cancel() { + this._dragEnd(); + + _.extend(dragdrop, { + dragging: false, + data: null, + proxy: null, + screenX: 0, + screenY: 0, + clientX: 0, + clientY: 0, + pageX: 0, + pageY: 0, + movementX: 0, + movementY: 0, + droppable: undefined, + }, true); + + _.dom.off(document, 'mousemove', this._onBodyMouseMove); + _.dom.off(document, 'mouseup', this._onBodyMouseUp); + }, + _dragStart() { + if (dragdrop.proxy) { + _.dom.addClass(dragdrop.proxy, this.data.dragClass); + } + + /** + * @event KLDraggable#dragstart 拖拽开始时触发 + * @property {object} sender 事件发送对象，为当前draggable + * @property {object} origin 拖拽源，为当前draggable + * @property {object} source 拖拽起始元素 + * @property {object} proxy 拖拽代理元素 + * @property {object} data 拖拽时需要传递的数据 + * @property {number} screenX 鼠标指针相对于屏幕的水平位置 + * @property {number} screenY 鼠标指针相对于屏幕的垂直位置 + * @property {number} clientX 鼠标指针相对于浏览器的水平位置 + * @property {number} clientY 鼠标指针相对于浏览器的垂直位置 + * @property {number} pageX 鼠标指针相对于页面的水平位置 + * @property {number} pageY 鼠标指针相对于页面的垂直位置 + * @property {number} movementX 鼠标指针水平位置相对于上次操作的偏移量 + * @property {number} movementY 鼠标指针垂直位置相对于上次操作的偏移量 + * @property {function} cancel 取消拖拽操作 + */ + this.$emit('dragstart', _.extend({ + sender: this, + origin: this, + source: _.dom.element(this), + proxy: dragdrop.proxy, + cancel: this.cancel, + }, dragdrop)); + }, + _drag() { + /** + * @event KLDraggable#drag 正在拖拽时触发 + * @property {object} sender 事件发送对象，为当前draggable + * @property {object} origin 拖拽源，为当前draggable + * @property {object} source 拖拽起始元素 + * @property {object} proxy 拖拽代理元素 + * @property {object} data 拖拽时需要传递的数据 + * @property {number} screenX 鼠标指针相对于屏幕的水平位置 + * @property {number} screenY 鼠标指针相对于屏幕的垂直位置 + * @property {number} clientX 鼠标指针相对于浏览器的水平位置 + * @property {number} clientY 鼠标指针相对于浏览器的垂直位置 + * @property {number} pageX 鼠标指针相对于页面的水平位置 + * @property {number} pageY 鼠标指针相对于页面的垂直位置 + * @property {number} movementX 鼠标指针水平位置相对于上次操作的偏移量 + * @property {number} movementY 鼠标指针垂直位置相对于上次操作的偏移量 + * @property {function} cancel 取消拖拽操作 + */ + this.$emit('drag', _.extend({ + sender: this, + origin: this, + source: _.dom.element(this), + proxy: dragdrop.proxy, + cancel: this.cancel, + }, dragdrop)); + }, + /** + * @private + */ + _dragEnd() { + /** + * @event KLDraggable#dragend 拖拽结束时触发 + * @property {object} sender 事件发送对象，为当前draggable + * @property {object} origin 拖拽源，为当前draggable + * @property {object} source 拖拽起始元素 + * @property {object} proxy 拖拽代理元素 + */ + this.$emit('dragend', { + sender: this, + origin: this, + source: _.dom.element(this), + proxy: dragdrop.proxy, + }); + + if (dragdrop.proxy) { + if (this.data.proxy instanceof Draggable.Proxy || this.data.proxy === 'clone') { + dragdrop.proxy.parentElement.removeChild(dragdrop.proxy); + } + _.dom.delClass(dragdrop.proxy, this.data.dragClass); + } + }, +}); + +Draggable.Proxy = Component.extend({ + name: 'draggable.proxy', + template: '{#inc this.$body}', + init() { + if (this.$outer instanceof Draggable) { + _.dom.element(this).style.display = 'none'; + this.$outer.data.proxy = this; + } + }, + // node: _.noop +}); + +module.exports = Draggable; diff --git a/src/js/components/widget/KLDraggable/index.md b/src/js/components/widget/KLDraggable/index.md new file mode 100644 index 00000000..e548a477 --- /dev/null +++ b/src/js/components/widget/KLDraggable/index.md @@ -0,0 +1,40 @@ +--- +title: 拖拽 +--- + + +### 基本形式 + +
+ +```xml + +``` + + + +### 移动自身 + +
+ +```xml + + + +``` + + + +### 修改代理 + +
+ +```xml + + + + + + +``` + \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index 420401db..de19775b 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -52,6 +52,7 @@ const Components = { KLIcon: require('./components/widget/KLIcon'), KLImagePreview: require('./components/widget/KLImagePreview'), KLLocaleProvider: require('./components/widget/KLLocaleProvider'), + KLDraggable: require('./components/widget/KLDraggable'), // Layout KLTable: require('./components/layout/KLTable'), From a1b48a5bf61aeb97e482b26176f2301ecc2f0b93 Mon Sep 17 00:00:00 2001 From: wangsong Date: Thu, 12 Apr 2018 21:30:31 +0800 Subject: [PATCH 2/4] kl-draggable --- doc/source/doc.js | 2 +- src/js/components/notice/KLModal/index.html | 10 +++++----- src/js/components/widget/KLDraggable/index.js | 2 +- src/js/components/widget/KLDraggable/index.md | 16 ++++++++-------- src/mcss/base/effect.mcss | 5 +++-- 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/doc/source/doc.js b/doc/source/doc.js index 279cb171..0c4779d8 100644 --- a/doc/source/doc.js +++ b/doc/source/doc.js @@ -108,7 +108,7 @@ const doc = (isDev, callback) => { // 组件文档 CATES.forEach((c) => { const components = getComponents(c.cate).filter((comp) => { - if (isDev && !/^KL(Sidebar|Upload|Menu|Button|Table|Select|MultiSelect)$/.test(comp)) { + if (isDev && !/^KL(Sidebar|Modal|Draggable|Button)$/.test(comp)) { return false; } diff --git a/src/js/components/notice/KLModal/index.html b/src/js/components/notice/KLModal/index.html index 5fef57bb..9f3dcd4d 100644 --- a/src/js/components/notice/KLModal/index.html +++ b/src/js/components/notice/KLModal/index.html @@ -1,13 +1,13 @@ -
-
- +
+
+
{#if isCanClose} {/if}

{title}

- +
{#if contentTemplate}{#inc @(contentTemplate)}{#else}{content}{/if}
@@ -17,7 +17,7 @@

{title}

{#inc @(footerTemplate)} {#else} {#if okButton} - + {/if} {#if cancelButton && isCanClose} 拖拽该元素时给元素附加此class */ const Draggable = Component.extend({ - name: 'draggable', + name: 'kl-draggable', template: '{#inc this.$body}', config() { _.extend(this.data, { diff --git a/src/js/components/widget/KLDraggable/index.md b/src/js/components/widget/KLDraggable/index.md index e548a477..ab56697f 100644 --- a/src/js/components/widget/KLDraggable/index.md +++ b/src/js/components/widget/KLDraggable/index.md @@ -8,7 +8,7 @@ title: 拖拽
```xml - + ``` @@ -18,9 +18,9 @@ title: 拖拽
```xml - - - + + + ``` @@ -30,11 +30,11 @@ title: 拖拽
```xml - + - + - - + + ``` \ No newline at end of file diff --git a/src/mcss/base/effect.mcss b/src/mcss/base/effect.mcss index d4bc9e1b..f1cf02c8 100644 --- a/src/mcss/base/effect.mcss +++ b/src/mcss/base/effect.mcss @@ -360,10 +360,11 @@ $pulse(); to { opacity: 0; } } .zoomOut { animation-name: zoomOut; } -.modal_zoomOut .modal_dialog { animation-name: zoomOut; } +.modal_zoomOut .modal_dialog { animation-name: zoomOut; $animation-duration: 0.3s; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } -.zoomIn { animation-name: zoomIn; } \ No newline at end of file +.zoomIn { animation-name: zoomIn; } +.modal_zoomIn .modal_dialog { animation-name: zoomIn; $animation-duration: 0.3s; } \ No newline at end of file From b063f64415ae6b9be82a5ab9450b9c887009f84e Mon Sep 17 00:00:00 2001 From: wangsong Date: Fri, 13 Apr 2018 15:01:32 +0800 Subject: [PATCH 3/4] klmodal --- doc/themes/nekui/layout/index.ejs | 2 +- doc/themes/nekui/layout/layout.ejs | 2 ++ src/js/components/notice/KLModal/index.html | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/doc/themes/nekui/layout/index.ejs b/doc/themes/nekui/layout/index.ejs index 48797944..ed9143a2 100644 --- a/doc/themes/nekui/layout/index.ejs +++ b/doc/themes/nekui/layout/index.ejs @@ -88,7 +88,7 @@ $(document).ready(function() { 'background': '#1D2E45 url(//haitao.nos.netease.com/056f5787-daa5-4a46-8eb4-d662eb6c7618.jpg) no-repeat scroll right bottom'}); $('.m-section1').addClass('loaded'); }; - earth.src = 'http://haitao.nos.netease.com/056f5787-daa5-4a46-8eb4-d662eb6c7618.jpg'; + earth.src = '//haitao.nos.netease.com/056f5787-daa5-4a46-8eb4-d662eb6c7618.jpg'; var $header = $('#header'), $logo = $('#logo'), diff --git a/doc/themes/nekui/layout/layout.ejs b/doc/themes/nekui/layout/layout.ejs index 9c1fe111..b23e3651 100644 --- a/doc/themes/nekui/layout/layout.ejs +++ b/doc/themes/nekui/layout/layout.ejs @@ -15,6 +15,8 @@ + + <% if (isIndex) { %> diff --git a/src/js/components/notice/KLModal/index.html b/src/js/components/notice/KLModal/index.html index 9f3dcd4d..6f73856c 100644 --- a/src/js/components/notice/KLModal/index.html +++ b/src/js/components/notice/KLModal/index.html @@ -1,4 +1,4 @@ -
+
From 740795b216ddcfc8813ea7f8e872b8f4e745ccb7 Mon Sep 17 00:00:00 2001 From: wangsong Date: Fri, 13 Apr 2018 17:39:26 +0800 Subject: [PATCH 4/4] =?UTF-8?q?modal=E3=80=81loading=E3=80=81imagePreview?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0el=E5=B1=9E=E6=80=A7=EF=BC=8C=E6=8C=87?= =?UTF-8?q?=E5=AE=9A=E7=88=B6=E7=BA=A7=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/source/doc.js | 2 +- src/js/components/notice/KLModal/index.js | 8 ++- src/js/components/notice/KLModal/index.md | 63 +++++++++++++------ src/js/components/widget/KLDraggable/index.js | 14 ++--- src/js/components/widget/KLDraggable/index.md | 4 +- .../components/widget/KLImagePreview/index.js | 7 ++- .../components/widget/KLImagePreview/index.md | 33 ++++++++++ src/js/components/widget/KLLoading/index.js | 8 ++- src/js/components/widget/KLLoading/index.md | 31 ++++++++- 9 files changed, 134 insertions(+), 36 deletions(-) diff --git a/doc/source/doc.js b/doc/source/doc.js index 0c4779d8..6630a1f3 100644 --- a/doc/source/doc.js +++ b/doc/source/doc.js @@ -108,7 +108,7 @@ const doc = (isDev, callback) => { // 组件文档 CATES.forEach((c) => { const components = getComponents(c.cate).filter((comp) => { - if (isDev && !/^KL(Sidebar|Modal|Draggable|Button)$/.test(comp)) { + if (isDev && !/^KL(Sidebar|Modal|Draggable|Button|Loading|ImagePreview)$/.test(comp)) { return false; } diff --git a/src/js/components/notice/KLModal/index.js b/src/js/components/notice/KLModal/index.js index eaba9fc3..f984c7e7 100644 --- a/src/js/components/notice/KLModal/index.js +++ b/src/js/components/notice/KLModal/index.js @@ -26,6 +26,7 @@ const _ = require('../../../ui-base/_'); * @param {boolean} [options.data.noClose] => ok时是否关闭弹窗 * @param {number} [options.data.minHeight] => 内容区域最小高度 * @param {number} [options.data.maxHeight] => 内容区域最大高度，超出则显示滚动条 + * @param {string} [options.data.el] => 设置对话框要插入的父级元素，默认为document.body * @param {boolean} [options.data.draggable=false] => 是否可以拖拽对话框 */ const KLModal = Component.extend({ @@ -49,9 +50,10 @@ const KLModal = Component.extend({ init() { this.supr(); - - // 如果不是内嵌组件，则嵌入到document.body中 - if (this.$root === this) this.$inject(document.body); + // 如果不是内嵌组件，则嵌入到data.el或document.body中 + if (this.$root === this) { + this.$inject(this.data.el || document.body); + } }, /** * @method KLModal#close(result) 关闭对话框 diff --git a/src/js/components/notice/KLModal/index.md b/src/js/components/notice/KLModal/index.md index 4d5300b0..8423e747 100644 --- a/src/js/components/notice/KLModal/index.md +++ b/src/js/components/notice/KLModal/index.md @@ -30,6 +30,33 @@ var component = new NEKUI.Component({ ``` + +### 配置要嵌入的父级元素 + +设置modal嵌入的父级元素，默认为document.body + +
+ +```xml + +``` + +```javascript +var component = new NEKUI.Component({ + template: template, + show: function() { + // 打开一个Modal，inject到#main元素里 + var modal = new NEKUI.KLModal({ + data: { + content: 'Modal内容', + el: '#main' + } + }); + } +}); +``` + + ### 配置信息title @@ -95,7 +122,7 @@ var component = new NEKUI.Component({ show: function() { var modal = new NEKUI.KLModal({ data: { - + name: 'Rabbit', contentTemplate: '' } @@ -121,7 +148,7 @@ var component = new NEKUI.Component({ show: function() { var modal = new NEKUI.KLModal({ data: { - + name: 'Rabbit', content: '自定义footer', footerTemplate: '' @@ -148,7 +175,7 @@ var component = new NEKUI.Component({ show: function(okDisabled) { var modal = new NEKUI.KLModal({ data: { - + okDisabled: okDisabled, content: 'okDisabled设置为' + okDisabled, } @@ -174,7 +201,7 @@ var component = new NEKUI.Component({ show: function(cancelDisabled) { var modal = new NEKUI.KLModal({ data: { - + cancelDisabled: cancelDisabled, cancelButton: true, content: 'cancelDisabled设置为' + cancelDisabled, @@ -203,7 +230,7 @@ var component = new NEKUI.Component({ show: function(hasFooter) { var modal = new NEKUI.KLModal({ data: { - + hasFooter: hasFooter, content: 'hasFooter设置为' + hasFooter, } @@ -233,7 +260,7 @@ var component = new NEKUI.Component({ show: function(isCanClose) { var modal = new NEKUI.KLModal({ data: { - + isCanClose: isCanClose, content: 'isCanClose设置为' + isCanClose, } @@ -263,7 +290,7 @@ var component = new NEKUI.Component({ show: function(okButton) { var modal = new NEKUI.KLModal({ data: { - + okButton: okButton, content: '设置okButton的值', } @@ -290,7 +317,7 @@ var component = new NEKUI.Component({ show: function(cancelButton) { var modal = new NEKUI.KLModal({ data: { - + cancelButton: cancelButton, content: '设置cancelButton' } @@ -324,7 +351,7 @@ var component = new NEKUI.Component({ show: function() { var modal = new NEKUI.KLModal({ data: { - + cancelButton: true, content: '设置自定义样式', class: 'u-modal-red', @@ -352,7 +379,7 @@ var component = new NEKUI.Component({ show: function(noClose) { var modal = new NEKUI.KLModal({ data: { - + noClose: noClose, content: '设置noClose:' + noClose, } @@ -478,11 +505,11 @@ var component = new NEKUI.Component({ var modal = new NEKUI.KLModal({ data: data }); - + modal.$on('cancel', function(){ console.log('监听cancel事件'); }); - + setTimeout(function(){ modal.cancel(); }, 3000); @@ -560,11 +587,11 @@ var component = new NEKUI.Component({ var modal = new NEKUI.KLModal({ data: data }); - + modal.$on('ok', function(){ console.log('监听ok事件'); }); - + setTimeout(function(){ modal.ok(); }, 3000); @@ -609,11 +636,11 @@ var component = new NEKUI.Component({ template: template, show: function(content, title, okButton, cancelButton) { var modal = NEKUI.KLModal.confirm(content, title, okButton, cancelButton); - + modal.$on('ok', function(){ console.log('监听ok事件'); }); - + modal.$on('cancel', function(){ console.log('监听cancel事件'); }); @@ -647,9 +674,9 @@ var component = new NEKUI.Component({ var component = new NEKUI.Component({ template: template, show: function(content, title, okButton) { - + var modal = NEKUI.KLModal.alert(content, title, okButton); - + modal.$on('ok', function(){ console.log('监听ok事件'); }); diff --git a/src/js/components/widget/KLDraggable/index.js b/src/js/components/widget/KLDraggable/index.js index 156b7b00..aa385cc8 100644 --- a/src/js/components/widget/KLDraggable/index.js +++ b/src/js/components/widget/KLDraggable/index.js @@ -20,7 +20,7 @@ const dragdrop = require('./dragdrop.js'); * @param {string} [options.data.class=z-draggable] => 可拖拽时（即disabled=false）给元素附加此class * @param {string} [options.data.dragClass=z-drag] => 拖拽该元素时给元素附加此class */ -const Draggable = Component.extend({ +const KLDraggable = Component.extend({ name: 'kl-draggable', template: '{#inc this.$body}', config() { @@ -56,7 +56,7 @@ const Draggable = Component.extend({ return this.data.proxy(); } else if (this.data.proxy instanceof window.Element) { return this.data.proxy; - } else if (this.data.proxy instanceof Draggable.Proxy) { + } else if (this.data.proxy instanceof KLDraggable.Proxy) { const proxy = _.dom.element(this.data.proxy); const dimension = _.dom.getDimension(_.dom.element(this)); this._initProxy(proxy, dimension); @@ -275,7 +275,7 @@ const Draggable = Component.extend({ }); if (dragdrop.proxy) { - if (this.data.proxy instanceof Draggable.Proxy || this.data.proxy === 'clone') { + if (this.data.proxy instanceof KLDraggable.Proxy || this.data.proxy === 'clone') { dragdrop.proxy.parentElement.removeChild(dragdrop.proxy); } _.dom.delClass(dragdrop.proxy, this.data.dragClass); @@ -283,11 +283,11 @@ const Draggable = Component.extend({ }, }); -Draggable.Proxy = Component.extend({ - name: 'draggable.proxy', +KLDraggable.Proxy = Component.extend({ + name: 'kl-draggable-proxy', template: '{#inc this.$body}', init() { - if (this.$outer instanceof Draggable) { + if (this.$outer instanceof KLDraggable) { _.dom.element(this).style.display = 'none'; this.$outer.data.proxy = this; } @@ -295,4 +295,4 @@ Draggable.Proxy = Component.extend({ // node: _.noop }); -module.exports = Draggable; +module.exports = KLDraggable; diff --git a/src/js/components/widget/KLDraggable/index.md b/src/js/components/widget/KLDraggable/index.md index ab56697f..87df0f87 100644 --- a/src/js/components/widget/KLDraggable/index.md +++ b/src/js/components/widget/KLDraggable/index.md @@ -32,9 +32,9 @@ title: 拖拽 ```xml - + - + ``` \ No newline at end of file diff --git a/src/js/components/widget/KLImagePreview/index.js b/src/js/components/widget/KLImagePreview/index.js index 2e12b427..f5fc8429 100644 --- a/src/js/components/widget/KLImagePreview/index.js +++ b/src/js/components/widget/KLImagePreview/index.js @@ -15,6 +15,7 @@ const tpl = require('./index.html'); * name: 图片文件名称 * src: 图片文件的路径 * @param {number} [options.data.cur-index=0] => 必选，当前图片文件的索引, 默认第一项为当前项 + * @param {string} [options.data.el] => 设置对话框要插入的父级元素，默认为document.body */ const KLImagePreview = Component.extend({ @@ -77,8 +78,10 @@ const KLImagePreview = Component.extend({ init(data) { this.supr(data); - // 如果不是内嵌组件，则嵌入到document.body中 - if (this.$root === this) this.$inject(document.body); + // 如果不是内嵌组件，则嵌入到data.el或document.body中 + if (this.$root === this) { + this.$inject(data.el || document.body); + } }, onClose() { this.destroy(); diff --git a/src/js/components/widget/KLImagePreview/index.md b/src/js/components/widget/KLImagePreview/index.md index e31d7c61..64d46262 100644 --- a/src/js/components/widget/KLImagePreview/index.md +++ b/src/js/components/widget/KLImagePreview/index.md @@ -33,3 +33,36 @@ var component = new NEKUI.Component({ }); ``` + + +### 配置要嵌入的父级元素 + +
+ +```xml + +``` + +```javascript +var component = new NEKUI.Component({ + template: template, + onPreviewClick: function() { + const imageList = [{ + name: 'Kaola.jpeg', + src: 'http://haitao.nos.netease.com/9b73692b3a6b46d2be1de7d3be893834.jpg' + }, { + name: 'Music.jpg', + src: 'http://haitao.nos.netease.com/7dfd9aa492694493be0fc1458d558536.jpg' + }]; + + new NEKUI.KLImagePreview({ + data: { + imageList: imageList, + curIndex: 0, + el: '#main' + } + }); + } +}); +``` + diff --git a/src/js/components/widget/KLLoading/index.js b/src/js/components/widget/KLLoading/index.js index 7c02367b..4648a761 100644 --- a/src/js/components/widget/KLLoading/index.js +++ b/src/js/components/widget/KLLoading/index.js @@ -14,6 +14,7 @@ const _ = require('../../../ui-base/_'); * @param {boolean} [options.data.disabled=false] => 是否禁用, 禁用后调用show和hide则无效 * @param {boolean} [options.data.visible=false] => 是否显示 * @param {string} [options.data.class] => 补充class + * @param {string} [options.data.el] => 设置对话框要嵌入的父级元素，默认为document.body */ const KLLoading = Component.extend({ name: 'kl-loading', @@ -27,8 +28,11 @@ const KLLoading = Component.extend({ }, init() { this.supr(); - // 证明不是内嵌组件 - if (this.$root === this) this.$inject(document.body); + + // 如果不是内嵌组件，则嵌入到data.el或document.body中 + if (this.$root === this) { + this.$inject(this.data.el || document.body); + } }, /** * @method KLLoading#show() 显示组件 diff --git a/src/js/components/widget/KLLoading/index.md b/src/js/components/widget/KLLoading/index.md index aa91c470..5685a4e2 100644 --- a/src/js/components/widget/KLLoading/index.md +++ b/src/js/components/widget/KLLoading/index.md @@ -8,7 +8,7 @@ title: 加载
```xml - + ``` @@ -49,3 +49,32 @@ var component = new NEKUI.Component({ }); ``` + + +### 指定嵌入的父级元素 + +
+ +```xml + +``` + +```javascript +var component = new NEKUI.Component({ + template: template, + config: function(data) { + }, + show: function() { + var loading = new NEKUI.KLLoading({ + data: { + visible: true, + el: '#main' + } + }); + setTimeout(function() { + loading.destroy(); + }, 2000); + } +}); +``` +