From c604a398ff30ca62bb08be41961cd39d6f6ddc8f Mon Sep 17 00:00:00 2001 From: maplemei Date: Tue, 26 Nov 2019 12:20:02 +0800 Subject: [PATCH] v1.1.1 --- CHANGELOG.md | 18 +++++- dist/static/2.js | 2 +- dist/static/3.js | 2 +- dist/static/docs.js | 4 +- dist/xm-select.js | 2 +- docs/assets/common.less | 26 ++------- docs/mds/XM21.md | 18 ++++-- docs/mds/ZTEST.md | 21 ++++--- docs/router.js | 96 +++++++++++++++---------------- package.json | 2 +- src/components/framework/index.js | 15 +++-- src/components/plugin/general.js | 87 +++++++++++++++++++++++----- src/components/plugin/tree.js | 50 ++++++++++++++-- src/style/index.less | 9 +++ 14 files changed, 239 insertions(+), 113 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2bc742c..260a7be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ ## 更新日志 +### 1.1.1 + +*2019-11-26* + +#### 新增 + +- 键盘操作，up，down，enter + +#### Bug fixes + +- 修改分组模式下第一级数据中children为空数组报错 +- 修改tree模式+radio模式无法选中父节点的bug + + ### 1.1.0 *2019-11-25* @@ -132,7 +146,7 @@ #### 新增 - 新增`disabled`配置, 可以禁用多选 -- 新增`create`配置, 可以创建条目, 具体见 [创建条目](https://maplemei.gitee.io/xm-select/#/example/XM27) +- 新增`create`配置, 可以创建条目, 具体见 [创建条目](https://maplemei.gitee.io/xm-select/#/basic/create) - 方法`warning`新增参数`sustain`, 可以配置是否持续显示 - 新增全局`get`方法, 可以获取多选渲染后的对象 - 新增全局`batch`方法, 可以批量给渲染后的多选执行方法 @@ -149,7 +163,7 @@ #### 新增 -- 新增`content`配置, 可自定义下拉框HTML, 具体见 [下拉自定义](https://maplemei.gitee.io/xm-select/#/example-plugin/ZP01) +- 新增`content`配置, 可自定义下拉框HTML, 具体见 [下拉自定义](https://maplemei.gitee.io/xm-select/#/plugin/customer) - 方法`setValue`新增参数`listenOn`, 可以设置是否通过`on`监听 #### Bug fixes diff --git a/dist/static/2.js b/dist/static/2.js index de5752e..ebb7f4a 100644 --- a/dist/static/2.js +++ b/dist/static/2.js @@ -6,4 +6,4 @@ * @Author: maplemei * @License：Apache License 2.0 */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{696:function(t,e,n){t.exports=n.p+"static/wx.f391ad4.jpg"},697:function(t,e){t.exports="data:image/png;base64,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"},699:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),t._m(1),n("p",[t._v("默认配置")]),t._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v("\n
\n\n
\n
\n\t\n\t\n\t\n
\n\n
间距
\n
\n\n\n @@ -45,8 +45,10 @@ var demo4 = xmSelect.render({ toolbar:{ show: true, }, - height: '500px', - data: [ + height: '300px', + data: [ + {name: '开始无分组1', value: 11, children: []}, + {name: '开始无分组2', value: 12, children: []}, {name: '选中', optgroup: true, click: 'SELECT', children: [ {name: '张三', value: 1}, {name: '李四', value: 2, disabled: true}, @@ -58,11 +60,15 @@ var demo4 = xmSelect.render({ {name: '自动', optgroup: true, click: 'AUTO', children: [ {name: '香蕉', value: 5}, {name: '葡萄', value: 6}, - ]}, + ]}, + {name: '中间无分组1', value: 21, children: []}, + {name: '中间无分组2', value: 22, children: []}, {name: '自定义', optgroup: true, click: function(item){ alert('自定义的, 想干嘛干嘛') }, children: [ {name: '小米', value: 7}, {name: '华为', value: 8}, - ]}, + ]}, + {name: '结尾无分组1', value: 31, children: []}, + {name: '结尾无分组2', value: 32, children: []}, ] }) diff --git a/docs/mds/ZTEST.md b/docs/mds/ZTEST.md index 8d6e949..7b7d290 100644 --- a/docs/mds/ZTEST.md +++ b/docs/mds/ZTEST.md @@ -10,8 +10,8 @@ var demo1 = xmSelect.render({ autoRow: true, filterable: true, tree: { - strict: false, - show: true, + strict: true, + show: false, showFolderIcon: true, showLine: true, indent: 20, @@ -25,23 +25,26 @@ var demo1 = xmSelect.render({ {name: item.name + 2, value: item.value + '2' }, ]) }, 500) - } + }, + }, + toolbar: { + show: true }, height: 'auto', data(){ return [ - {name: '销售员', value: -1, children: [ - {name: '张三1', value: 100, selected: true, children: []}, - {name: '李四1', value: 2, selected: true}, - {name: '王五1', value: 3, disabled: true}, + {name: '销售员', value: -1, selected: true, children: [ + {name: '张三1', value: 100, selected: false, children: []}, + {name: '李四1', value: 2, selected: false}, + {name: '王五1', value: 3, disabled: false}, ]}, {name: '奖品', value: -2, children: [ {name: '奖品3', value: -3, children: [ - {name: '苹果3', value: 14, selected: true}, + {name: '苹果3', value: 14, selected: false}, {name: '香蕉3', value: 15}, {name: '葡萄3', value: 16}, ]}, - {name: '苹果2', value: 4, selected: true, disabled: true}, + {name: '苹果2', value: 4, selected: false, disabled: true}, {name: '香蕉2', value: 5}, {name: '葡萄2', value: 6}, ]}, diff --git a/docs/router.js b/docs/router.js index 2a55165..1818b6d 100644 --- a/docs/router.js +++ b/docs/router.js @@ -42,65 +42,65 @@ export default [{ component: importMd('/options'), }] }, { - path: '/example', + path: '/basic', name: '示例', - redirect: '/example/XM01', + redirect: '/basic/base', component: Component, children: [ - { path: '/example/XM01', name: 'Base 基础使用', component: importMd('/XM01') }, - { path: '/example/XM02', name: 'Language 国际化', component: importMd('/XM02') }, - { path: '/example/XM03', name: 'InitValue 默认选中', component: importMd('/XM03') }, - { path: '/example/XM04', name: 'Tips 修改提示', component: importMd('/XM04') }, - { path: '/example/XM05', name: 'Filterable 搜索模式', component: importMd('/XM05') }, - { path: '/example/XM06', name: 'Direction 下拉方向', component: importMd('/XM06') }, - { path: '/example/XM07', name: 'Style 自定义样式', component: importMd('/XM07') }, - { path: '/example/XM08', name: 'Paging 分页', component: importMd('/XM08') }, - { path: '/example/XM09', name: 'Radio 单选', component: importMd('/XM09') }, - { path: '/example/XM10', name: 'Repeat 重复选', component: importMd('/XM10') }, - { path: '/example/XM11', name: 'Prop 自定义属性', component: importMd('/XM11') }, - { path: '/example/XM12', name: 'Theme 主题', component: importMd('/XM12') }, - { path: '/example/XM13', name: 'Show 显示与隐藏', component: importMd('/XM13') }, - { path: '/example/XM14', name: 'Model 显示方式', component: importMd('/XM14') }, - { path: '/example/XM15', name: 'Template 构建选项', component: importMd('/XM15') }, - { path: '/example/XM16', name: 'On 监听选择', component: importMd('/XM16') }, - { path: '/example/XM17', name: 'Test 性能测试', component: importMd('/XM17') }, - { path: '/example/XM18', name: 'Max 多选上限', component: importMd('/XM18') }, - { path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') }, - { path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') }, - { path: '/example/XM21', name: 'Optgroup 分组', component: importMd('/XM21') }, - { path: '/example/XM22', name: 'AutoRow 自动换行', component: importMd('/XM22') }, - { path: '/example/XM23', name: 'HiddenIcon 隐藏图标', component: importMd('/XM23') }, - { path: '/example/XM24', name: 'Size 尺寸', component: importMd('/XM24') }, - { path: '/example/XM25', name: 'Warning 警告', component: importMd('/XM25') }, - { path: '/example/XM26', name: 'Disabled 禁用', component: importMd('/XM26') }, - { path: '/example/XM27', name: 'Create 创建条目', component: importMd('/XM27') }, + { path: '/basic/use', name: 'Base 基础使用', component: importMd('/XM01') }, + { path: '/basic/language', name: 'Language 国际化', component: importMd('/XM02') }, + { path: '/basic/initValue', name: 'InitValue 默认选中', component: importMd('/XM03') }, + { path: '/basic/tips', name: 'Tips 修改提示', component: importMd('/XM04') }, + { path: '/basic/filter', name: 'Filterable 搜索模式', component: importMd('/XM05') }, + { path: '/basic/direction', name: 'Direction 下拉方向', component: importMd('/XM06') }, + { path: '/basic/style', name: 'Style 自定义样式', component: importMd('/XM07') }, + { path: '/basic/paging', name: 'Paging 分页', component: importMd('/XM08') }, + { path: '/basic/radio', name: 'Radio 单选', component: importMd('/XM09') }, + { path: '/basic/repeat', name: 'Repeat 重复选', component: importMd('/XM10') }, + { path: '/basic/prop', name: 'Prop 自定义属性', component: importMd('/XM11') }, + { path: '/basic/theme', name: 'Theme 主题', component: importMd('/XM12') }, + { path: '/basic/show', name: 'Show 显示与隐藏', component: importMd('/XM13') }, + { path: '/basic/model', name: 'Model 显示方式', component: importMd('/XM14') }, + { path: '/basic/template', name: 'Template 构建选项', component: importMd('/XM15') }, + { path: '/basic/on', name: 'On 监听选择', component: importMd('/XM16') }, + { path: '/basic/test', name: 'Test 性能测试', component: importMd('/XM17') }, + { path: '/basic/max', name: 'Max 多选上限', component: importMd('/XM18') }, + { path: '/basic/toolbar', name: 'Toolbar 工具条', component: importMd('/XM19') }, + { path: '/basic/showCount', name: 'ShowCount 选项数量', component: importMd('/XM20') }, + { path: '/basic/optgroup', name: 'Optgroup 分组', component: importMd('/XM21') }, + { path: '/basic/autoRow', name: 'AutoRow 自动换行', component: importMd('/XM22') }, + { path: '/basic/hiddenIcon',name: 'HiddenIcon 隐藏图标', component: importMd('/XM23') }, + { path: '/basic/size', name: 'Size 尺寸', component: importMd('/XM24') }, + { path: '/basic/warning', name: 'Warning 警告', component: importMd('/XM25') }, + { path: '/basic/disabled', name: 'Disabled 禁用', component: importMd('/XM26') }, + { path: '/basic/create', name: 'Create 创建条目', component: importMd('/XM27') }, ] }, { - path: '/example-custom', + path: '/c', name: '进阶示例', - redirect: '/example-custom/ZM01', + redirect: '/senior/getValue', component: Component, children: [ - { path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') }, - { path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') }, - { path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') }, - { path: '/example-custom/ZM04', name: '远程搜索', component: importMd('/ZM04') }, - { path: '/example-custom/ZM05', name: '动态数据', component: importMd('/ZM05') }, - { path: '/example-custom/ZM06', name: '弹框中的多选', component: importMd('/ZM06') }, - { path: '/example-custom/ZM07', name: '获取实例对象', component: importMd('/ZM07') }, - { path: '/example-custom/ZM08', name: '批量操作', component: importMd('/ZM08') }, + { path: '/senior/getValue', name: '赋值与取值', component: importMd('/ZM01') }, + { path: '/senior/form', name: '表单提交', component: importMd('/ZM02') }, + { path: '/senior/table', name: '表格中多选', component: importMd('/ZM03') }, + { path: '/senior/remoteSearch', name: '远程搜索', component: importMd('/ZM04') }, + { path: '/senior/update', name: '动态数据', component: importMd('/ZM05') }, + { path: '/senior/alert', name: '弹框中的多选', component: importMd('/ZM06') }, + { path: '/senior/get', name: '获取实例对象', component: importMd('/ZM07') }, + { path: '/senior/batch', name: '批量操作', component: importMd('/ZM08') }, ] }, { - path: '/example-plugin', + path: '/plugin', name: '拓展中心', - redirect: '/example-plugin/ZP01', + redirect: '/plugin/customer', component: Component, children: [ - { path: '/example-plugin/ZP01', name: '下拉自定义', component: importMd('/ZP01') }, - { path: '/example-plugin/ZP02', name: '下拉树 Tree', component: importMd('/ZP02') }, - { path: '/example-plugin/ZP03', name: '下拉日期多选', component: importMd('/ZP03') }, - { path: '/example-plugin/ZP04', name: '下拉折叠面板', component: importMd('/ZP04') }, - { path: '/example-plugin/ZP05', name: '下拉穿梭框', component: importMd('/ZP05') }, + { path: '/plugin/customer', name: '下拉自定义', component: importMd('/ZP01') }, + { path: '/plugin/tree', name: '下拉树 Tree', component: importMd('/ZP02') }, + { path: '/plugin/laydate', name: '下拉日期多选', component: importMd('/ZP03') }, + { path: '/plugin/panel', name: '下拉折叠面板', component: importMd('/ZP04') }, + { path: '/plugin/transfer', name: '下拉穿梭框', component: importMd('/ZP05') }, ] }, { path: '/question', @@ -113,8 +113,8 @@ export default [{ }, { path: '/test', name: '测试', - // hidden: true, - hidden: false, + hidden: true, + // hidden: false, component: importMd('/ZTEST'), }, diff --git a/package.json b/package.json index 89707c3..cd8f5cd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xm-select", - "version": "1.1.0", + "version": "1.1.1", "description": "始于Layui的select多选解决方案", "main": "index.js", "scripts": { diff --git a/src/components/framework/index.js b/src/components/framework/index.js index c1e3cc2..9e89cb5 100644 --- a/src/components/framework/index.js +++ b/src/components/framework/index.js @@ -33,13 +33,16 @@ class Framework extends Component{ } init(props, refresh){ - let { data, prop, initValue } = props, sels; + let { data, prop, initValue, radio } = props, sels; //如果新数据和旧数据不同 或者 强制刷新 才进行数据处理 if(refresh){ let dataObj = {}; let flatData = []; this.load(data, dataObj, flatData); - sels = initValue ? this.exchangeValue(initValue, true, dataObj) : Object.values(dataObj).filter(item => item[prop.selected] === true).filter(item => item[prop.optgroup] !== true) + sels = this.exchangeValue(initValue ? initValue : Object.values(dataObj).filter(item => item[prop.selected] === true), dataObj) + if(radio && sels.length > 1){ + sels = sels.slice(0, 1) + } this.setState({ sels, dataObj, flatData }); } @@ -48,8 +51,12 @@ class Framework extends Component{ return sels; } - exchangeValue(arr, filterGroup = true, dataObj = this.state.dataObj){ + exchangeValue(arr, dataObj = this.state.dataObj){ let list = arr.map(sel => typeof sel === 'object' ? sel : dataObj[sel]).filter(a => a) + let filterGroup = true, { tree } = this.props; + if(tree.show && tree.strict === false){ + filterGroup = false; + } filterGroup && (list = list.filter(item => item[this.props.prop.optgroup] !== true)) return list; } @@ -60,7 +67,7 @@ class Framework extends Component{ } const { prop, tree } = this.props; - let changeData = this.exchangeValue(sels, !tree.show); + let changeData = this.exchangeValue(sels); if(tree.show && tree.strict){ let data = this.state.data; this.clearAndReset(data, changeData); diff --git a/src/components/plugin/general.js b/src/components/plugin/general.js index 866863c..e5c22be 100644 --- a/src/components/plugin/general.js +++ b/src/components/plugin/general.js @@ -1,5 +1,7 @@ import { h, Component, render } from 'preact' import { isFunction, isArray, safety, deepMerge, mergeArr, IEVersion } from '@/common/util' + +const emptyVal = {}; /** * 普通的多选渲染 @@ -14,16 +16,19 @@ class General extends Component{ remote: true, loading: false, pageIndex: 1, - totalSize: 0, + totalSize: 0, + val: emptyVal, }); this.searchCid = 0; this.inputOver = true; - this.__value = ''; + this.__value = ''; + this.tempData = []; } optionClick(item, selected, disabled, e){ - this.props.ck(item, selected, disabled); + this.props.ck(item, selected, disabled); + this.focus(); //阻止父组件上的事件冒泡 this.blockClick(e); } @@ -129,12 +134,54 @@ class General extends Component{ } } + //键盘事件 + keydown(e){ + let keyCode = e.keyCode; + + 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; + } + let val = data[index][value]; + this.setState({ val }) + }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 }) + }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) + } + } + + } + //组件将要接收新属性 componentWillReceiveProps(props){ if(this.props.show != props.show){ if(!props.show){ //清空输入框的值 - this.setState({ filterValue: '' }); + this.setState({ filterValue: '', val: emptyVal }); this.__value = ''; this.searchInputRef && (this.searchInputRef.value = ''); }else{ @@ -149,7 +196,8 @@ class General extends Component{ const { name, value, disabled, children, optgroup } = prop; - let arr = deepMerge([], flatData), creator; + let arr = deepMerge([], flatData), creator; + //是否开启了搜索 if(filterable){ if(remoteSearch){//是否进行远程搜索 @@ -194,8 +242,8 @@ class General extends Component{ ); //如果是分组模式, 要分页先去除分组, 然后在计算分页, 最后再加上分组 - let groups = [], groupInfo = {}; - groups = arr.filter(item => item[optgroup]).forEach(g => { + let groupInfo = {}; + arr.filter(item => item[optgroup]).forEach(g => { g[children].forEach(item => groupInfo[item[value]] = g); }); arr = arr.filter(item => !item[optgroup]); @@ -247,16 +295,20 @@ class General extends Component{ } } - let newArr = [], group; + let newArr = [], group, tmpGroup = { __tmp: true }; + tmpGroup[optgroup] = true; arr.forEach(item => { let g = groupInfo[item[value]]; - if(g != group){ + if(group && !g){ + g = tmpGroup + } + if(g != group){ group = g; - newArr.push(group); + g && newArr.push(group); } newArr.push(item); }); - arr = newArr; + arr = newArr; //查看是否创建了条目 if(creator){ @@ -333,6 +385,9 @@ class General extends Component{ if(!showIcon && selected){ itemStyle.backgroundColor = theme.color; item[disabled] && (itemStyle.backgroundColor = '#C2C2C2'); + } + if(item[value] === this.state.val){ + itemStyle.backgroundColor = '#f2f2f2' } const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' '); @@ -347,9 +402,12 @@ class General extends Component{ const renderGroup = item => { const isGroup = item[optgroup]; - if(isGroup){//分组模式 - return ( -
+ if(isGroup){//分组模式 + if(item.__tmp){ + return
+ } + return ( +
{ item[name] }
) @@ -388,6 +446,7 @@ class General extends Component{ input.addEventListener('compositionupdate', this.handleComposition.bind(this)); input.addEventListener('compositionend', this.handleComposition.bind(this)); input.addEventListener('input', this.searchInput.bind(this)); + input.addEventListener('keydown', this.keydown.bind(this)); this.searchInputRef = input; } } diff --git a/src/components/plugin/tree.js b/src/components/plugin/tree.js index 4e2ae7e..8922554 100644 --- a/src/components/plugin/tree.js +++ b/src/components/plugin/tree.js @@ -1,4 +1,5 @@ import { h, Component, render } from 'preact' +import { deepMerge, isFunction } from '@/common/util' class Tree extends Component{ @@ -242,11 +243,46 @@ class Tree extends Component{ } let arr = data.map(item => renderGroup(item, 10 - tree.indent)).filter(a => a); + let safetyArr = deepMerge([], arr); + let safetySels = deepMerge([], sels); - if(!arr.length){ - //查看无数据情况下是否显示分页 - arr.push(
{ empty }
) - } + //工具条操作 + const toolbar = ( +
+ { config.toolbar.list.map(tool => { + const toolClass = 'toolbar-tag'; + + let info, name = config.languageProp.toolbar[tool]; + if(tool === 'ALL'){ + info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => { + + } }; + }else if(tool === 'CLEAR'){ + info = { icon: 'xm-iconfont xm-icon-qingkong', name, method: (pageData) => { + + } }; + }else if(tool === 'REVERSE'){ + info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => { + + } }; + }else { + info = tool + } + + const hoverChange = e => { + if(e.type === 'mouseenter') e.target.style.color = theme.color; + if(e.type === 'mouseleave') e.target.style.color = ''; + } + + return (
{ + isFunction(info.method) && info.method(safetyArr, safetySels) + } } onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }> + { config.toolbar.showIcon && } + { info.name } +
) + }).filter(a => a) } +
+ ) const search = (
@@ -255,8 +291,14 @@ class Tree extends Component{
); + if(!arr.length){ + //查看无数据情况下是否显示分页 + arr.push(
{ empty }
) + } + return (
+ { config.toolbar.show && toolbar } { filterable && search }
{ arr }
diff --git a/src/style/index.less b/src/style/index.less index 47ca340..a023855 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -475,6 +475,12 @@ xm-select{ background-color: #FFF; } + .item--divided{ + border-top: 1px solid #ebeef5; + width: calc(100% - 20px); + cursor: initial; + } + } //不同尺寸下的数据调整 @@ -519,6 +525,9 @@ xm-select{ top: @size / 2 - 1px; } } + .item--divided{ + margin: @size / 4; + } } xm-select[size='large']{ .mixin(40px)