theluyuan/xm-select
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复tree模式的节点显示异常

Browse Source
This commit is contained in:
maplemei
2020-11-27 19:19:22 +08:00
parent 1175612369
commit ca9453469e
13 changed files with 169 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/framework/index.js
View File

@@ -193,7 +193,7 @@ class Framework extends Component{
let child = parent[children];
child.filter(item => !(item[disabled] || item.__node.disabled)).forEach(item => {
if(item[optgroup]){
this.treeHandler(sels, item, change, type);
this.treeHandler(sels, item, change, type, changeStatus);
}else{
let index = sels.findIndex(sel => sel[value] == item[value])
if(type === 'del'){
@@ -255,9 +255,11 @@ class Framework extends Component{
}else{
handlerType = 'add';
}
if(handlerType != 'half'){
this.treeHandler(sels, item, change, handlerType);
}
if(this.checkMax(change, change)){
return ;
}

2
src/components/label/index.js
View File

@@ -117,6 +117,8 @@ class Label extends Component{
this.props.onReset(e, 'labelSearch')
}} compositionend={ e => {
this.props.onReset(e, 'labelSearch')
}} onClick={ e => {
e.stopPropagation();
}}></input>
)
}else{

98
src/components/plugin/general.js
View File

@@ -164,46 +164,48 @@ class General extends Component{
this.pageNextClick();
}
}
const { value, optgroup, disabled } = this.props.prop;
let data = this.tempData.filter(item => !item[optgroup] && !item[disabled]);
let len = data.length - 1;
if(len === -1){
return ;
}
let index = data.findIndex(item => item[value] === this.state.val);
//Up 键
if(keyCode === 38){
if(index <= 0){
index = len
}else if(index > 0){
index -= 1;
if(this.props.enableKeyboard){
const { value, optgroup, disabled } = this.props.prop;
let data = this.tempData.filter(item => !item[optgroup] && !item[disabled]);
let len = data.length - 1;
if(len === -1){
return ;
}
let val = data[index][value];
this.setState({ val })
//键盘选中时滚动到可视范围内
let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
opt && opt.scrollIntoView(false)
}else
//Down 键
if(keyCode === 40){
if(index === -1 || index === len){
index = 0
}else if(index < len){
index += 1;
}
let val = data[index][value];
this.setState({ val })
//键盘选中时滚动到可视范围内
let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
opt && opt.scrollIntoView(false)
}else
//Enter 键
if(keyCode === 13){
if(this.state.val != emptyVal){
let option = data[index];
this.optionClick(option, this.props.sels.findIndex(item => item[value] === this.state.val) != -1, option[disabled], e)
let index = data.findIndex(item => item[value] === this.state.val);
//Up 键
if(keyCode === 38){
if(index <= 0){
index = len
}else if(index > 0){
index -= 1;
}
let val = data[index][value];
this.setState({ val })
//键盘选中时滚动到可视范围内
let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
opt && opt.scrollIntoView(false)
}else
//Down 键
if(keyCode === 40){
if(index === -1 || index === len){
index = 0
}else if(index < len){
index += 1;
}
let val = data[index][value];
this.setState({ val })
//键盘选中时滚动到可视范围内
let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
opt && opt.scrollIntoView(false)
}else
//Enter 键
if(keyCode === 13){
if(this.state.val != emptyVal){
let option = data[index];
this.optionClick(option, this.props.sels.findIndex(item => item[value] === this.state.val) != -1, option[disabled], e)
}
}
}
@@ -237,7 +239,7 @@ class General extends Component{
}
render(config) {
let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create, pageRemote, max } = config
let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create, pageRemote, max, enableKeyboard } = config
const { name, value, disabled, children, optgroup } = prop;
@@ -451,7 +453,7 @@ class General extends Component{
const itemStyle = {}
//处理键盘的选择背景色
if(item[value] === this.state.val){
if(enableKeyboard && item[value] === this.state.val){
itemStyle.backgroundColor = theme.hover
}
//不显示图标时候的背景色处理
@@ -473,7 +475,19 @@ class General extends Component{
const hoverChange = e => {
if(e.type === 'mouseenter'){
if(!item[disabled]){
this.setState({ val: item[value] })
if(enableKeyboard){
this.setState({ val: item[value] })
}else{
e.target.style.backgroundColor = theme.hover;
}
}
}else if(e.type === 'mouseleave'){
if(!item[disabled]){
if(enableKeyboard){
}else{
e.target.style.backgroundColor = '';
}
}
}
}

77
src/components/plugin/tree.js
View File

@@ -58,31 +58,43 @@ class Tree extends Component{
}
const { tree, prop, sels } = this.props;
const { clickExpand, clickCheck } = tree;
//检测点击的是不是三角箭头
let isExpand = e.target && isFunction(e.target.getAttribute) && e.target.getAttribute('type') === 'expand'
//如果点击即展开
if(clickExpand || isExpand){
//不是父节点的不需要处理
if(!tree.lazy && !item[prop.optgroup]){
this.props.ck(item, selected, disabled);
return
}
//不是父节点的不需要处理
if(!tree.lazy && !item[prop.optgroup]){
this.props.ck(item, selected, disabled);
return
let val = item[this.props.prop.value];
let expandedKeys = this.state.expandedKeys;
let index = expandedKeys.findIndex(v => v === val);
index === -1 ? expandedKeys.push(val) : expandedKeys.splice(index, 1);
this.setState({ expandedKeys });
//是否需要懒加载
let child = item[prop.children];
if(tree.lazy && child && child.length === 0 && item.__node.loading !== false){
item.__node.loading = true;
tree.load(item, (result) => {
item.__node.loading = false;
item[prop.children] = this.handlerData(result, prop.children);
item[prop.selected] = sels.findIndex(i => i[prop.value] === item[prop.value]) != -1
this.props.onReset(sels, 'treeData');
});
}
}else{
if(clickCheck){
type = 'checkbox'
}
}
}
let val = item[this.props.prop.value];
let expandedKeys = this.state.expandedKeys;
let index = expandedKeys.findIndex(v => v === val);
index === -1 ? expandedKeys.push(val) : expandedKeys.splice(index, 1);
this.setState({ expandedKeys });
//是否需要懒加载
let child = item[prop.children];
if(tree.lazy && child && child.length === 0 && item.__node.loading !== false){
item.__node.loading = true;
tree.load(item, (result) => {
item.__node.loading = false;
item[prop.children] = this.handlerData(result, prop.children);
item[prop.selected] = sels.findIndex(i => i[prop.value] === item[prop.value]) != -1
this.props.onReset(sels, 'treeData');
});
}
}else if(type === 'checkbox'){
if(type === 'checkbox'){
this.props.ck(item, selected, disabled);
}
//阻止父组件上的事件冒泡
@@ -218,7 +230,7 @@ class Tree extends Component{
}
render(config, { expandedKeys }) {
let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips, iconfont } = config;
let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips, iconfont, enableKeyboard } = config;
let { name, value, disabled, children, optgroup } = prop;
let showIcon = config.model.icon != 'hidden';
@@ -246,7 +258,7 @@ class Tree extends Component{
const itemStyle = { paddingLeft: indent + 'px' }
//处理键盘的选择背景色
if(item[value] === this.state.val){
if(enableKeyboard && item[value] === this.state.val){
itemStyle.backgroundColor = theme.hover
}
@@ -279,7 +291,7 @@ class Tree extends Component{
const iconArray = [];
if(tree.showFolderIcon){
iconArray.push(<i class={ treeIconClass }></i>);
iconArray.push(<i class={ treeIconClass } type="expand"></i>);
if(tree.showLine){
if(expand){
iconArray.push(<i class='left-line' style={ {left: indent - tree.indent + 3 + 'px'} }></i>)
@@ -293,7 +305,19 @@ class Tree extends Component{
const hoverChange = e => {
if(e.type === 'mouseenter'){
if(!item[disabled]){
this.setState({ val: item[value] })
if(enableKeyboard){
this.setState({ val: item[value] })
}else{
e.target.style.backgroundColor = theme.hover;
}
}
}else if(e.type === 'mouseleave'){
if(!item[disabled]){
if(enableKeyboard){
}else{
e.target.style.backgroundColor = '';
}
}
}
}
@@ -349,7 +373,6 @@ class Tree extends Component{
//工具条操作
function flat(list, array){
//array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item))
array.forEach(item => {
if(item[optgroup]){
//非严格模式, 如果隐藏父节点, 证明不可选

10
src/config/options.js
View File

@@ -78,7 +78,9 @@ export default function (lan = 'zn') {
max: 0,
maxMethod: function(sels, item){},
//选项显示数量
showCount: 0,
showCount: 0,
//是否开启键盘操作
enableKeyboard: true,
//工具条
toolbar: {
show: false,
@@ -106,7 +108,11 @@ export default function (lan = 'zn') {
//是否开启极简模式
simple: false,
//标注节点类型的key
nodeType: '__node_type',
nodeType: '__node_type',
//点击节点是否展开
clickExpand: true,
//点击节点是否选中
clickCheck: true,
},
//级联结构
cascader: {