Skip to content

Commit

Permalink
Merge pull request #250 from kaola-fed/feature_select_20170904
Browse files Browse the repository at this point in the history 
multi.select 多选时支持 showPath，增加新属性 showPathName 可以用 path 替代 name 显示；select 多选搜索时选择选项输入框默认不清空
  • Loading branch information
@nupthale
nupthale authored Sep 7, 2017
2 parents ef37631 + 22c3abd commit 454875d
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 9 deletions.
7 changes: 4 additions & 3 deletions src/js/components/form/KLMultiSelect/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@
{#list selected as item}
{#if showPath && placement}
<kl-tooltip tip={item.path} placement={placement}>
<span class="selected-tag" r-class={{selectedTagMore:item[nameKey].length >= 15}}>{item[nameKey]}
<span class="selected-tag" r-class={{selectedTagMore:item[nameKey].length >= 15}}>{showPathName ? item.path : item[nameKey]}
<i class="u-icon u-icon-remove" on-click={this.delete($event, item)}></i>
</span>
</kl-tooltip>
{#else}
<span class="selected-tag" r-class={{selectedTagMore:item[nameKey].length >= 15}}>{item[nameKey]}
<span class="selected-tag" r-class={{selectedTagMore:item[nameKey].length >= 15}}>{showPathName ? item.path : item[nameKey]}
<i class="u-icon u-icon-remove" on-click={this.delete($event, item)}></i>
</span>
{/if}
{/list}
<kl-icon fontSize=20 type="{open ? 'angle-up' : 'angle-down'}" class="f-fr"/>
<span r-hide={open || !placeholder || selected.length}>{placeholder}</span>
<kl-icon fontSize=20 type="angle-down" class="f-fr angle {open ? 'angle-transform' : ''}"/>
</div>
{#if open}
<div class="dropdown_bd" r-animation="on: enter; class: animated fadeInY fast; on: leave; class: animated fadeOutY fast;">
Expand Down
23 changes: 20 additions & 3 deletions src/js/components/form/KLMultiSelect/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ const _ = require('../../../ui-base/_');
* @param {string} [options.data.key=id] => 数据项的键
* @param {string} [options.data.nameKey=name] => 数据项的name键
* @param {string} [options.data.childKey=children] => 数据子项的键
* @param {string} [options.data.onlyChild=true] => 在单选模式下，是否只允许选中末级
* @param {boolean} [options.data.onlyChild=true] => 在单选模式下，是否只允许选中末级
* @param {string} [options.data.value=null] <=> 当前选择值
* @param {object} [options.data.selected=null] <=> 当前选择项
* @param {string} [options.data.placeholder=''] => 默认提示
* @param {string} [options.data.separator=,] => 多选时value分隔符
* @param {string} [options.data.showPath=false] => 单选时是否展示路径
* @param {boolean} [options.data.showPath=false] => 单选时是否展示路径
* @param {string} [options.data.placement=top] => 单选时展示路径的 tooltip 位置，只有在showPath=true的时候生效，如果填 false 则不展示 tooltip
* @param {string} [options.data.pathString='>'] => 链接每一级路径的字符串，避免名字中包含该字符串
* @param {boolean} [options.data.showPathName=false] => 是否用 path 代替原来的 namekey 显示
* @param {boolean} [options.data.readonly=false] => 是否只读
* @param {boolean} [options.data.multiple=false] => 是否多选
* @param {boolean} [options.data.disabled=false] => 是否禁用
Expand All @@ -44,13 +46,14 @@ const KLMultiSelect = Dropdown.extend({
value: null,
selected: [],
separator: ',',
placeholder: this.$trans('PLEASE_SELECT'),
placeholder: '',
key: 'id',
nameKey: 'name',
childKey: 'children',
checkKey: 'checked',
hierarchical: false,
updateAuto: false,
showPathName: false,
onlyChild: true,
pathString: '>',
placement: 'top',
Expand All @@ -66,6 +69,7 @@ const KLMultiSelect = Dropdown.extend({
throw new TypeError('`source` is not an Array!');
}
data._source = _.clone(data.source || []);
this.addPath();
data.tree[0] = data._source;
if (data._source && data._source.length) {
this.initSelected();
Expand Down Expand Up @@ -100,6 +104,19 @@ const KLMultiSelect = Dropdown.extend({
toggle(open) {
this.supr(open);
},
// 处理 source ，给每一项添加 path
addPath() {
const data = this.data;
const dealPath = function (array, path) {
array.forEach((item) => {
item.path = path ? path + data.pathString + item.name : item.name;
if (item[data.childKey] && item[data.childKey].length) {
dealPath(item[data.childKey], item.path);
}
});
};
dealPath(data._source, '');
},
// 以 value 为标准，对整个 source 数组的每一项进行检测，value 里面是否包含这一项，设置 checked 是 true 还是 false
initSelected() {
const data = this.data;
Expand Down
8 changes: 8 additions & 0 deletions src/js/components/form/KLMultiSelect/index.mcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@
text-overflow: ellipsis;
max-width: 150px;
}
.angle-transform {
transform: rotate(180deg);
}
i.angle {
transition: transform .5s;
line-height: 20px;
margin-top: 5px;
}
}
.cateWrap {
max-width: 412px;
Expand Down
74 changes: 72 additions & 2 deletions src/js/components/form/KLMultiSelect/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ masonry: true
source={source}
value={value}
on-select={this.selected($event)}
placeholder={placeholder}
/>
<p>选择的是：{value}</p>
```
Expand Down Expand Up @@ -43,7 +44,8 @@ var component = new NEKUI.Component({
{name: '男士箱包', id: 32}
]}
],
value: ''
value: '',
placeholder: '请选择'
},
selected: function(event) {
console.log(event);
Expand Down Expand Up @@ -175,7 +177,7 @@ var component = new NEKUI.Component({
<!-- demo_end -->

<!-- demo_start -->
### 展示路径
### 展示路径（单选）

`showPath`控制选择是否显示路径，若为`true`时selected.path 保存当前路径字符串，pathArray 是路径数组，具体看控制台。

Expand Down Expand Up @@ -289,4 +291,72 @@ var component = new NEKUI.Component({
}
});
```
<!-- demo_end -->

<!-- demo_start -->
### 展示路径（多选）

`showPath`控制选择是否显示路径，若为`true`时selected.path 保存当前路径字符串。

选择显示路径的情况下，路径可以提示文本的形式显示在所选项名称上，使用`placement`选择路径显示的方位，默认为`top`，此处设置为`bottom`。

`showPathName` 控制是否直接替代 `name` 来展示

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

```xml
<kl-multi-select
showPath={showPath}
placement={placement}
pathString={pathString}
showPathName={showPathName}
multiple={multiple}
source={source}
value={value}
on-select={this.selected($event)}
/>
<p>选择的是：{value}</p>
<p>路径是: {path}</p>
```

```javascript
var component = new NEKUI.Component({
template: template,
data: {
source: [
{name: '母婴儿童', id: 1, children: [
{name: '营养辅食', id: 11},
{name: '奶粉', id: 12, children: [
{name: '爱他美', id: 121, children: [
{name: '1段', id: 1211, children: [
{name: '0-6个月', id: 12111},
{name: '6-12个月', id: 12112}
]},
{name: '3段', id: 1212},
{name: '5段', id: 1213}
]},
{name: '美赞臣', id: 122}
]},
{name: '童装童鞋', id: 13},
{name: '宝宝用品', id: 14},
]},
{name: '美容彩妆', id: 2},
{name: '服饰鞋包', id: 3, children: [
{name: '女士箱包', id: 31},
{name: '男士箱包', id: 32}
]}
],
value: '',
showPath: true,
placement: 'bottom',
showPathName: true,
multiple: true,
pathString: '>'
},
selected: function(event) {
console.log(event);
this.data.path = event.selected.path;
}
});
```
<!-- demo_end -->
3 changes: 2 additions & 1 deletion src/js/components/form/KLSelect/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,8 @@ const KLSelect = Dropdown.extend({
if (multiple) {
this.searchInputFocus();
if (!data.selectedClose && item) {
data.canSearch && this.clearSearchValue();
// 选择之后不清空已输入的内容
// data.canSearch && this.clearSearchValue();
return;
}
}
Expand Down

0 comments on commit 454875d

Please sign in to comment.