Skip to content

Commit

Permalink
Merge pull request #325 from kaola-fed/feature_KJDS-89874_20180307
Browse files Browse the repository at this point in the history 
klselect增加回车选择等键盘操作
  • Loading branch information
@nupthale
nupthale authored Mar 8, 2018
2 parents 6c5c91e + 688b83b commit 06b4450
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 30 deletions.
16 changes: 3 additions & 13 deletions doc/source/components/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,9 @@ import NEKUI from 'nek-ui'
import 'node_modules/nek-ui/dist/css/nek-ui.default.min.css'
```

或者直接在需要引入的页面上

```html
<link rel="stylesheet" href="//unpkg.com/nek-ui/dist/css/nek-ui.default.min.css">
<script type="text/javascript" src="//unpkg.com/nek-ui/dist/vendor/regular.min.js"></script>
<script type="text/javascript" src="//unpkg.com/nek-ui/dist/js/nek-ui.min.js"></script>
```

以这种内嵌 Script 方式引入的时候 NEKUI 会自动挂在 Window 上

### 使用 nek-ui

由于使用 NEIUI 的组件需要先注册，我们可以在工程里面的 BaseComponent 里面使用 NKEIUI 暴露出来的一个 install 方法来将组件注册到 BaseComponent 上，这样继承自 BaseComponent 的组件就可以直接在模板里面使用组件了
由于使用 NEKUI 的组件需要先注册，我们可以在工程里面的 BaseComponent 里面使用 NEKUI 暴露出来的一个 install 方法来将组件注册到 BaseComponent 上，这样继承自 BaseComponent 的组件就可以直接在模板里面使用组件了

```javascript
import { install } from 'nek-ui';
Expand All @@ -42,10 +32,10 @@ import Regular from 'regularjs';
const BaseComponent = Regular.extend({
//
});
install(Regular);
install(BaseComponent);
```

如果不想将 NEKUI 的组件全部注册到全局上，或者是自己已有的组件和 NEKUI 里面的组件命名冲突，也可以手动的注册想要使用的组件到 Regular 实例上
如果不想将 NEKUI 的组件全部注册到全局上，或者是自己已有的组件和 NEKUI 里面的组件命名冲突，也可以手动的注册想要使用的组件

```
var Component = BaseComponent.extend({}).component('kl-tooltip', NEKUI.KLTooltip)
Expand Down
2 changes: 1 addition & 1 deletion doc/source/doc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const doc = (isDev, callback) => {
// 组件文档
CATES.forEach((c) => {
const components = getComponents(c.cate).filter((comp) => {
if (isDev && !/^KL(Sidebar|Menu|Button|Table)$/.test(comp)) {
if (isDev && !/^KL(Sidebar|Menu|Button|Table|Select|MultiSelect)$/.test(comp)) {
return false;
}

Expand Down
10 changes: 5 additions & 5 deletions src/js/components/form/KLSelect/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,17 @@
{#if open}
<div class="dropdown_bd"
r-animation="on: enter; class: animated fadeInY fast; on: leave; class: animated fadeOutY fast;">
<ul class="m-listview">
<ul class="m-listview" ref="listview">
{#if placeholder}
<li z-sel={multiple?!selected.length:!selected} on-click={this.select(undefined)}>
<li z-hover={key_index == -1} z-sel={multiple?!selected.length:!selected} on-click={this.select(undefined)}>
{placeholder}
</li>
{/if}

{#list this.filterArray(source) as item}
{#if (!filter || (filter && filter(item)))}
{#if canSelectAll && multiple && item_index == 0 && (canSearch && !searchValue)}
<li on-click={this.selectAll(selected.length!==this.filterData(source).length)}>
<li z-hover={key_index == 'all'} on-click={this.selectAll(selected.length!==this.filterData(source).length)}>
<check disabled={disabled} checked={selected.length===this.filterData(source).length} />
{this.$trans('ALL')}
</li>
Expand All @@ -71,11 +71,11 @@
</li>
</kl-tooltip>
{#else}
<li z-dis={item.disabled} z-divider={item.divider} z-sel={multiple?false:selected===item}
<li z-hover={key_index == item_index} z-dis={item.disabled} z-divider={item.divider} z-sel={multiple?false:selected===item}
title={item[nameKey]} on-click={this.select(item)}>
{#if multiple && !item.divider}
<check disabled={item.disabled} checked={multiple?this.indexOf(selected,item)!==-1:selected===item} />
{/if}
{/if}
{#if @(itemTemplate)}
{#inc @(itemTemplate)}
{#else}
Expand Down
27 changes: 16 additions & 11 deletions src/js/components/form/KLSelect/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ const KLSelect = Dropdown.extend({
placeholder: this.$trans('PLEASE_SELECT'),
required: false,
clearable: false,
// 键盘事件当前对应的顺序
key_index: -1,
});
if (data.multiple && !Array.isArray(data.selected)) {
data.selected = data.selected ? [data.selected] : [];
Expand Down Expand Up @@ -262,20 +264,22 @@ const KLSelect = Dropdown.extend({
console.error(this.$trans('LIMIT_ERROR'));
}
});
if (this.service && this.service.getList) {
const $updateSource = _.throttle(
this.$updateSource.bind(this),
data.delaySearch,
);
this.$watch('searchValue', (newValue, oldValue) => {
if (oldValue === undefined) {
return;
}
const $updateSource = _.throttle(
this.$updateSource.bind(this),
data.delaySearch,
);
this.$watch('searchValue', (newValue, oldValue) => {
if (oldValue === undefined) {
return;
}
data.key_index = -1;
if (this.service && this.service.getList) {
$updateSource();
});
}
}
});

this.initValidation();
document.addEventListener('keydown', event => this.keyup(event));
},
select(item) {
const data = this.data;
Expand Down Expand Up @@ -332,6 +336,7 @@ const KLSelect = Dropdown.extend({
toggle(open) {
const data = this.data;
data.canSearch && this.clearSearchValue();
data.key_index = -1;
this.supr(open);
},
validate(on) {
Expand Down
4 changes: 4 additions & 0 deletions src/js/components/form/KLSelect/index.mcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
// ========================================================================

.u-select {
.z-hover {
background: #f1f1f1;
}

$user-select: none;
vertical-align: top;

Expand Down
92 changes: 92 additions & 0 deletions src/js/components/form/KLSelect/plugins/private.method.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,5 +100,97 @@ module.exports = function PrivateMethod(Component) {
searchValue: this.data.searchValue,
};
},
/**
* 键盘事件
*/
keyup(event) {
const data = this.data;
if (data.open && [13, 27, 38, 40].indexOf(event.keyCode) > -1) {
event.preventDefault();
event.stopPropagation();
switch (event.keyCode) {
case 38:
this.up();
break;
case 40:
this.down();
break;
case 13:
this.enter();
break;
case 27:
data.open = false;
this.$update();
break;
default:
}
}
},
/**
* 键盘 arrow up 事件
*/
up() {
const data = this.data;
const all = data.canSelectAll && data.multiple && (data.canSearch && !data.searchValue);
if (data.key_index > 0) {
data.key_index -= 1;
} else if (data.key_index === 0) {
data.key_index = all ? 'all' : -1;
} else if (data.key_index === 'all') {
data.key_index = -1;
}
let seeLength = Math.floor((this.$refs.listview.scrollTop + 4) / 38) - 1;
if (data.placeholder) {
seeLength -= 1;
}
if (all) {
seeLength -= 1;
}
if (seeLength + 1 > data.key_index) {
this.$refs.listview.scrollTop -= 38;
}
this.$update();
},
/**
* 键盘 arrow down 事件
*/
down() {
const data = this.data;
const length = this.filterArray(data.source).length;
const all = data.canSelectAll && data.multiple && (data.canSearch && !data.searchValue);
if (data.key_index >= 0 && data.key_index < length - 1) {
data.key_index += 1;
} else if (data.key_index === -1) {
data.key_index = all ? 'all' : 0;
} else if (data.key_index === 'all') {
data.key_index = 0;
}
let seeLength = Math.floor((this.$refs.listview.scrollTop + 4) / 38);
if (data.placeholder) {
seeLength -= 1;
}
if (all) {
seeLength -= 1;
}
if (seeLength + 4 < data.key_index) {
this.$refs.listview.scrollTop += 38;
}
this.$update();
},
/**
* 键盘 enter 事件
*/
enter() {
const data = this.data;
const list = this.filterArray(data.source);
if (data.key_index >= 0) {
this.select(list[data.key_index]);
} else if (data.key_index === -1) {
this.select(undefined);
} else {
this.selectAll(data.selected.length !== this.filterData(data.source).length);
}
this.$update();
},
});
};
1 change: 1 addition & 0 deletions src/js/ui-base/directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ rClassGenerator('z-sel');
rClassGenerator('z-chk');
rClassGenerator('z-act');
rClassGenerator('z-dis');
rClassGenerator('z-hover');
rClassGenerator('z-divider');

exports['r-show'] = function (elem, value) {
Expand Down

0 comments on commit 06b4450

Please sign in to comment.