Skip to content

Commit

Permalink
doc(KLModal, KLNotify, KLpopConfirm): refactor doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@RabbitPL
RabbitPL committed Aug 28, 2017
1 parent 5652539 commit 0e46771
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 95 deletions.
29 changes: 10 additions & 19 deletions src/js/components/notice/KLModal/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ var component = new NEKUI.Component({
// 打开一个Modal
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',
content: 'Modal内容'
}
});
Expand All @@ -48,7 +47,6 @@ var component = new NEKUI.Component({
show: function() {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',
title: '我是自定义title',
}
});
Expand All @@ -73,7 +71,6 @@ var component = new NEKUI.Component({
show: function() {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',
content: 'Modal的自定义文本内容'
}
});
Expand All @@ -98,7 +95,7 @@ var component = new NEKUI.Component({
show: function() {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

name: 'Rabbit',
contentTemplate: '<kl-row><kl-col span=10><kl-input value="{name}"/></kl-col></kl-row>'
}
Expand All @@ -124,7 +121,7 @@ var component = new NEKUI.Component({
show: function() {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

name: 'Rabbit',
content: '自定义footer',
footerTemplate: '<kl-row><kl-col span=6><kl-button title="提交" type="secondary" /></kl-col><kl-col span=6><kl-button title="撤销" type="success" /></kl-col></kl-row>'
Expand All @@ -151,7 +148,7 @@ var component = new NEKUI.Component({
show: function(okDisabled) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

okDisabled: okDisabled,
content: 'okDisabled设置为' + okDisabled,
}
Expand All @@ -177,7 +174,7 @@ var component = new NEKUI.Component({
show: function(cancelDisabled) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

cancelDisabled: cancelDisabled,
cancelButton: true,
content: 'cancelDisabled设置为' + cancelDisabled,
Expand Down Expand Up @@ -206,7 +203,7 @@ var component = new NEKUI.Component({
show: function(hasFooter) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

hasFooter: hasFooter,
content: 'hasFooter设置为' + hasFooter,
}
Expand Down Expand Up @@ -236,7 +233,7 @@ var component = new NEKUI.Component({
show: function(isCanClose) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

isCanClose: isCanClose,
content: 'isCanClose设置为' + isCanClose,
}
Expand Down Expand Up @@ -266,7 +263,7 @@ var component = new NEKUI.Component({
show: function(okButton) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

okButton: okButton,
content: '设置okButton的值',
}
Expand All @@ -293,7 +290,7 @@ var component = new NEKUI.Component({
show: function(cancelButton) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

cancelButton: cancelButton,
content: '设置cancelButton'
}
Expand Down Expand Up @@ -327,7 +324,7 @@ var component = new NEKUI.Component({
show: function() {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

cancelButton: true,
content: '设置自定义样式',
class: 'u-modal-red',
Expand Down Expand Up @@ -355,7 +352,7 @@ var component = new NEKUI.Component({
show: function(noClose) {
var modal = new NEKUI.KLModal({
data: {
lang: 'en-US',

noClose: noClose,
content: '设置noClose:' + noClose,
}
Expand Down Expand Up @@ -385,7 +382,6 @@ var component = new NEKUI.Component({
template: template,
show: function(minHeight) {
var data = {
lang: 'en-US',
cancelButton: true,
contentTemplate: '<div style="height: 400px;border: 2px dotted #ddd;"></div>',
};
Expand Down Expand Up @@ -420,7 +416,6 @@ var component = new NEKUI.Component({
template: template,
show: function(maxHeight) {
var data = {
lang: 'en-US',
cancelButton: true,
contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;"></div>',
};
Expand Down Expand Up @@ -452,7 +447,6 @@ var component = new NEKUI.Component({
template: template,
show: function() {
var data = {
lang: 'en-US',
cancelButton: true,
contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;">3秒后调用cancel</div>',
};
Expand Down Expand Up @@ -490,7 +484,6 @@ var component = new NEKUI.Component({
template: template,
show: function(close) {
var data = {
lang: 'en-US',
cancelButton: true,
contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;">3秒后调用close</div>',
};
Expand Down Expand Up @@ -535,7 +528,6 @@ var component = new NEKUI.Component({
template: template,
show: function(noClose) {
var data = {
lang: 'en-US',
cancelButton: true,
noClose: noClose,
contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;">3秒后调用ok</div>',
Expand Down Expand Up @@ -591,7 +583,6 @@ var component = new NEKUI.Component({
var component = new NEKUI.Component({
template: template,
show: function(content, title, okButton, cancelButton) {
debugger
var modal = NEKUI.KLModal.confirm(content, title, okButton, cancelButton);

modal.$on('ok', function(){
Expand Down
52 changes: 32 additions & 20 deletions src/js/components/notice/KLNotify/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const KLNotify = Component.extend({
}

/**
* @event show 打开一条消息时触发
* @event KLNotify#show 打开一条消息时触发
* @property {object} sender 事件发送对象
* @property {object} message 弹出的消息对象
*/
Expand All @@ -73,7 +73,7 @@ const KLNotify = Component.extend({
this.$update();

/**
* @event close 关闭某条消息时触发
* @event KLNotify#close 关闭某条消息时触发
* @property {object} sender 事件发送对象
* @property {object} message 关闭了的消息对象
*/
Expand Down Expand Up @@ -109,36 +109,48 @@ const METHODS = [
'error',
];
KLNotify.METHODS = METHODS;


/**
* @method show(text[,state][,duration]) 弹出一个消息
* @static
* @public
* @param {string} [text] 消息内容
* @param {string} [state] 消息状态，可选参数：`info`、`success`、`warning`、`error`
* @param {number} [duration=2000] 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
* @return {void}
* @param {string} text 消息内容
* @param {string} state 消息状态，可选参数：`info`、`success`、`warning`、`error`
* @param {number} duration=2000 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
*/
KLNotify.show = () => {};
/**
* @method [info|success|warning|error](text[,duration]) 弹出特殊类型的消息。为show方法的简写方式。
* @static
* @public
* @param {string} [text] 消息内容
* @param {number} [duration=2000] 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
* @return {void}
* @param {object} message 需要关闭的消息对象
*/
KLNotify.close = () => {};
/**
* @method close(message) 关闭某条消息
* @static
* @public
* @param {object} message 需要关闭的消息对象
* @return {void}
*/
KLNotify.closeAll = () => {};
/**
* @static
* @param {string} text 消息内容
* @param {number} duration=2000 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
*/
KLNotify.success = () => {};
/**
* @static
* @param {string} text 消息内容
* @param {number} duration=2000 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
*/
KLNotify.warning = () => {};
/**
* @static
* @param {string} text 消息内容
* @param {number} duration=2000 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
*/
KLNotify.info = () => {};
/**
* @method closeAll() 关闭所有消息
* @static
* @public
* @return {void}
* @param {string} text 消息内容
* @param {number} duration=2000 该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。
*/
KLNotify.error = () => {};
METHODS.forEach((method) => {
KLNotify[method] = notify[method].bind(notify);
});
Expand Down
39 changes: 24 additions & 15 deletions src/js/components/notice/KLNotify/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,28 @@ var component = new NEKUI.Component({

```xml
<kl-button type="tertiary" title="消息提示不自动关闭" on-click="{this.show(0)}" />
<kl-button type="tertiary" title="5秒后自动关闭" on-click="{this.show(5000)}" />
<kl-button type="tertiary" title="1秒后自动关闭" on-click="{this.show(1000)}" />
<kl-button type="tertiary" title="默认2秒" on-click="{this.show()}" />
```

```javascript
var Notify = null;
var component = new NEKUI.Component({
template: template,
show: function(duration) {
var Notify = new NEKUI.KLNotify({data: {duration: duration} });
Notify.show('duration:' + (duration || ''));
}
Notify = new NEKUI.KLNotify({data: {duration: duration} });
var res = duration || (duration === 0 ? 0 : '2000');
Notify.show('duration:' + res);
if(duration === 0) {
// 5秒后清除此Notify对象
setTimeout(function(Notify){
return function() {
// close和closeAll方法在实例对象的原型链上
Notify.closeAll();
}
}(Notify), 5000)
}
},
});
```
<!-- demo_end -->
Expand All @@ -103,7 +114,7 @@ var component = new NEKUI.Component({
template: template,
config: function() {
// config中初始化notify，配置只显示一条消息
this.notify = new NEKUI.KLNotify({data: {single: true, duration: 0} });
this.notify = new NEKUI.KLNotify({data: {single: true, duration: 5000} });
},
number: 1,
show: function(state) {
Expand Down Expand Up @@ -141,15 +152,16 @@ var component = new NEKUI.Component({
```
<!-- demo_end -->


<!-- demo_start -->

### 配置信息class
设置额外样式

<div class="m-example">
<style>
.m-bg-notify-demo {
border: 1px solid red;
.m-bg-notify-demo .u-message{
color: #f00;
}
</style>
</div>
Expand All @@ -162,8 +174,8 @@ var component = new NEKUI.Component({
var component = new NEKUI.Component({
template: template,
show: function(visible) {
var Notify = new NEKUI.KLNotify({data: {class: 'm-bg-notify-demo', duration: 0}});
Notify.show('设置红色边框');
var Notify = new NEKUI.KLNotify({data: {class: 'm-bg-notify-demo', duration: 1000}});
Notify.show('设置红色字体');
}
});
```
Expand All @@ -176,7 +188,7 @@ var component = new NEKUI.Component({
第三个参数`duration`消息展示时间，单位为ms，默认2秒，如果为0，则表示永不消失。*

**同时消息提示时会派发`show`事件，可以通过`NEKUI.KLNotify.notify.$on('show', callback')`
监听，并且该事件一定要写在show方法调用之前**
监听，并且该事件一定要写在show方法调用之前,打开控制台，可以查看`$on`接收参数**

<div class="m-example"></div>

Expand All @@ -191,9 +203,6 @@ var component = new NEKUI.Component({
var component = new NEKUI.Component({
template: template,
show: function(content, state, duration) {
NEKUI.KLNotify.notify.$on('show', function(evt){
alert('show方法调用成功!');
});
NEKUI.KLNotify.show(content, state, duration);
}
});
Expand Down Expand Up @@ -223,7 +232,7 @@ var component = new NEKUI.Component({
NEKUI.KLNotify.close(msg);
}, 2000);
NEKUI.KLNotify.notify.$on('close', function(evt){
alert('evt对象的message属性：text【' + evt.message.text + '】;duration【' + evt.message.duration + '】;state【' + evt.message.state) + '】';
console.log(evt);
});

}
Expand All @@ -239,7 +248,7 @@ var component = new NEKUI.Component({
<div class="m-example"></div>

```xml
<kl-button type="tertiary" title="closeAll" on-click="{this.show('2s后调用close方法')}" />
<kl-button type="tertiary" title="closeAll" on-click="{this.show('2s后调用closeAll方法')}" />
```

```javascript
Expand Down
4 changes: 2 additions & 2 deletions src/js/components/notice/KLPopConfirm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const PopUp = Component.extend({
const $validation = this.$refs.validation;
if (!$validation || $validation.validate().success) {
/**
* @event ok 确定时触发
* @event KLPopConfirm#ok 确定时触发
* @property {object} sender 事件发送对象
* @property {object} data popConfirm组件的数据
*/
Expand All @@ -47,7 +47,7 @@ const PopUp = Component.extend({
},
cancel() {
/**
* @event cancel 取消时触发
* @event KLPopConfirm#cancel 取消时触发
* @property {object} sender 事件发送对象
* @property {object} data popConfirm组件的数据
*/
Expand Down
Loading

0 comments on commit 0e46771

Please sign in to comment.