From 27f86e678ca00ea990897721c7d9148a1e86cef6 Mon Sep 17 00:00:00 2001 From: maplemei Date: Mon, 10 Feb 2020 14:39:38 +0800 Subject: [PATCH] v1.1.8 --- CHANGELOG.md | 15 +++++ dist/static/2.js | 4 +- dist/static/3.js | 4 +- dist/static/docs.js | 4 +- dist/xm-select.js | 4 +- docs/mds/ZP06.md | 93 +++++++++++++++++++++++++++++++ docs/mds/ZTEST.md | 33 +++-------- docs/mds/options.md | 10 ++++ docs/router.js | 1 + package.json | 2 +- src/components/framework/index.js | 5 +- src/components/plugin/cascader.js | 82 +++++++++++++++++---------- src/components/plugin/general.js | 2 +- src/components/plugin/tree.js | 6 +- src/config/options.js | 4 +- src/style/index.less | 74 +++++++++++++++++------- 16 files changed, 253 insertions(+), 90 deletions(-) create mode 100644 docs/mds/ZP06.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b47f73..51c8dbe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ ## 更新日志 +### 1.1.8 + +*2020-02-10* + +#### 新增 + +- 新增级联模式(第一版, 欢迎测试Bug) + +#### Bug fixes + +- 修改class .hidden为.xm-hidden 避免冲突 +- 修改tree模式下只有一个子节点是的虚线样式错误 +- 修改tree非严格模式下的工具条操作数据错误 + + ### 1.1.7 *2020-01-02* diff --git a/dist/static/2.js b/dist/static/2.js index fe1ef26..49432c4 100644 --- a/dist/static/2.js +++ b/dist/static/2.js @@ -1,9 +1,9 @@ /*! * @Title: xm-select - * @Version: 1.1.7 + * @Version: 1.1.8 * @Description：基于layui的多选解决方案 * @Site: https://gitee.com/maplemei/xm-select * @Author: maplemei * @License：Apache License 2.0 */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{692:function(t,e,n){t.exports=n.p+"static/wx.b556b2e.jpg"},693:function(t,e){t.exports="data:image/png;base64,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"},695: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),t._m(2),n("demo-block",[n("div",[n("p",[n("code",[t._v("el")]),t._v("绑定的不一定是id, 也可以是其他css选择器")])]),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 +``` +::: diff --git a/docs/mds/ZTEST.md b/docs/mds/ZTEST.md index 8411cc8..952766f 100644 --- a/docs/mds/ZTEST.md +++ b/docs/mds/ZTEST.md @@ -7,43 +7,27 @@ ``` ::: diff --git a/docs/mds/options.md b/docs/mds/options.md index 35a2b99..74cd70b 100644 --- a/docs/mds/options.md +++ b/docs/mds/options.md @@ -48,6 +48,7 @@ | disabled | 是否禁用多选 | boolean | true / false | false | | create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null | | tree | 树形结构, 具体看下表 | object | - | - | +| cascader | 级联结构, 具体看下表 | object | - | - | ### prop @@ -173,6 +174,15 @@ list: [ "ALL", "CLEAR", | indent | 间距 | int | - | 20 | | expandedKeys | 默认展开的节点数组, 为true时展开所有节点 | array / boolean | - | [ ] | | strict | 是否遵循严格父子结构 | boolean | true / false | true | + + +### cascader + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | --------------------- | ------------- | ------------- | ------ | +| show | 是否展示为级联结构 | boolean | true / false | false | +| indent | 每一级的宽度 | int | - | 100 | +| strict | 是否遵循严格父子结构 | boolean | true / false | true | ### 全局方法 diff --git a/docs/router.js b/docs/router.js index 1818b6d..ac55927 100644 --- a/docs/router.js +++ b/docs/router.js @@ -101,6 +101,7 @@ export default [{ { path: '/plugin/laydate', name: '下拉日期多选', component: importMd('/ZP03') }, { path: '/plugin/panel', name: '下拉折叠面板', component: importMd('/ZP04') }, { path: '/plugin/transfer', name: '下拉穿梭框', component: importMd('/ZP05') }, + { path: '/plugin/cascader', name: '级联模式 Cascader', component: importMd('/ZP06') }, ] }, { path: '/question', diff --git a/package.json b/package.json index c44f20b..41e1c42 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xm-select", - "version": "1.1.7", + "version": "1.1.8", "description": "始于Layui的select多选解决方案", "main": "index.js", "scripts": { diff --git a/src/components/framework/index.js b/src/components/framework/index.js index fc3f3e1..05e455e 100644 --- a/src/components/framework/index.js +++ b/src/components/framework/index.js @@ -6,7 +6,7 @@ import Label from '../label'; import General from '../plugin/general'; import Custom from '../plugin/custom'; import Tree from '../plugin/tree'; -// import Cascader from '../plugin/cascader'; +import Cascader from '../plugin/cascader'; /** * 框架渲染类, 渲染基础的外边框 + 属性变化监听 @@ -384,8 +384,7 @@ class Framework extends Component{ const bodyProps = { ...config, data, dataObj, flatData, sels, ck: this.itemClick.bind(this), show, onReset: this.onReset.bind(this) } //渲染组件 - // let Body = content ? : tree.show ? : config.cascader.show ? : ; - let Body = content ? : tree.show ? : ; + let Body = content ? : tree.show ? : config.cascader.show ? : ; return ( diff --git a/src/components/plugin/cascader.js b/src/components/plugin/cascader.js index 1c38c8c..7cb7822 100644 --- a/src/components/plugin/cascader.js +++ b/src/components/plugin/cascader.js @@ -16,17 +16,30 @@ class Cascader extends Component{ e.stopPropagation(); } - optionClick(item, selected, disabled, index, e){ - - console.log(item, index); - - this.props.ck(item, selected, disabled); - - let expand = this.state.expand.slice(0, index + 1); - expand[index] = item[this.props.prop.value]; - - this.setState({ expand }); + optionClick(item, selected, disabled, type, index, e){ + if(type === 'line'){ + if(disabled){ + return ; + } + //加载中的不需要进行处理 + if(item.__node.loading === true){ + return; + } + + const { cascader, prop, sels } = this.props; + + //不是父节点的不需要处理 + if(!cascader.lazy && !item[prop.optgroup]){ + this.props.ck(item, selected, disabled); + return + } + let expand = this.state.expand.slice(0, index + 1); + expand[index] = item[this.props.prop.value]; + this.setState({ expand }); + }else if(type === 'checkbox'){ + this.props.ck(item, selected, disabled); + } //阻止父组件上的事件冒泡 this.blockClick(e); } @@ -47,7 +60,7 @@ class Cascader extends Component{ let { name, value, disabled, children } = prop; const showIcon = config.model.icon != 'hidden'; - const renderItem = (item, indent, index) => { + const renderItem = (item, indent, index, checked) => { //是否被选中 let selected = !!sels.find(sel => sel[value] == item[value]); //是否禁用 @@ -55,8 +68,11 @@ class Cascader extends Component{ // 是否半选 let half = item.__node.half === true; - selected = selected || half || item.__node.selected - dis = dis || item.__node.disabled; + //是否遵义严格父子结构 + if(cascader.strict){ + selected = selected || half || item.__node.selected + dis = dis || item.__node.disabled; + } const iconStyle = selected ? { color: theme.color, @@ -67,8 +83,19 @@ class Cascader extends Component{ const itemStyle = { backgroundColor: 'transparent' } const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); - const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : half ? 'xm-icon-banxuan' : 'xm-icon-duox'].join(' '); + const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'].join(' '); + if(item[value] === this.state.val){ + itemStyle.backgroundColor = theme.hover + } + + const contentStyle = {}, checkedStyle = {}; + if(checked){ + contentStyle.color = theme.color + contentStyle.fontWeight = 700 + checkedStyle.color = theme.color + } + let checkedClass = 'xm-right-arrow'; //处理鼠标选择的背景色 const hoverChange = e => { @@ -83,31 +110,30 @@ class Cascader extends Component{ return (
- { showIcon && } -
+ { showIcon && } +
+ { item[children] &&
}
) } + let boxArr = []; const renderGroup = (item, indent, index) => { - const child = item[children]; + indent = indent + cascader.indent + 6 - indent = cascader.indent + 10 - - return ( -
- { renderItem(item, indent, index) } - { child && this.state.expand[index] === item[value] && -
{ child.map(c => renderGroup(c, indent, index + 1)) }
- } + const checked = child && this.state.expand[index] === item[value]; + checked && boxArr.push( +
+
{ child.map(c => renderGroup(c, indent, index + 1)) }
) + return renderItem(item, indent, index, checked) } - let arr = data.map(item => renderGroup(item, 0, 0)).filter(a => a); + let arr = data.map(item => renderGroup(item, 2, 0)).concat(boxArr).filter(a => a); // let safetyArr = deepMerge([], arr); // let safetySels = deepMerge([], sels); @@ -116,7 +142,7 @@ class Cascader extends Component{ } return ( -
+
{ arr }
) diff --git a/src/components/plugin/general.js b/src/components/plugin/general.js index 09182d7..4527cd9 100644 --- a/src/components/plugin/general.js +++ b/src/components/plugin/general.js @@ -194,7 +194,7 @@ class General extends Component{ } //组件将要接收新属性 - componentWillReceiveProps(props){ + componentWillReceiveProps(props){ if(this.props.show != props.show){ if(!props.show){ //清空输入框的值 diff --git a/src/components/plugin/tree.js b/src/components/plugin/tree.js index 197f224..9bedad8 100644 --- a/src/components/plugin/tree.js +++ b/src/components/plugin/tree.js @@ -237,7 +237,7 @@ class Tree extends Component{ } const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' '); const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'].join(' '); - const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'visible':'hidden'].join(' '); + const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'xm-visible':'xm-hidden'].join(' '); const iconArray = []; if(tree.showFolderIcon){ @@ -284,7 +284,7 @@ class Tree extends Component{ child.length === 0 && (expand = false) return (
- { tree.showFolderIcon && tree.showLine && expand && child.length > 1 && } + { tree.showFolderIcon && tree.showLine && expand && child.length > 0 && } { renderItem(item, indent, child.length === 0 && (!tree.lazy || tree.lazy && item.__node.loading === false) ? 0 : expand) } { expand &&
{ child.map(c => renderGroup(c, indent)) }
}
@@ -311,7 +311,7 @@ class Tree extends Component{ //工具条操作 function flat(list, array){ - array.forEach(item => item[optgroup] ? flat(list, item[children]) : list.push(item)) + array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item)) } const toolbar = (
diff --git a/src/config/options.js b/src/config/options.js index 832a501..90fd17f 100644 --- a/src/config/options.js +++ b/src/config/options.js @@ -107,7 +107,9 @@ export default function (lan = 'zn') { //是否展示级联 show: false, //间距 - indent: 200, + indent: 100, + //是否严格遵守父子模式 + strict: true, }, //自定义属性名称 prop: { diff --git a/src/style/index.less b/src/style/index.less index 97fca11..e225f00 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -401,7 +401,7 @@ xm-select{ margin-left: -2px; transform: rotate(90deg); } - &.visible{ + &.xm-visible{ visibility: visible; } } @@ -429,36 +429,57 @@ xm-select{ .xm-cascader{ // position: relative; - &-box{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; + padding: 5px 0; + border: @border; + background-color: #fff; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, .12); + margin: -1px; + + &::before{ + content: ' '; + position: absolute; + width: 0; + height: 0; + border: 6px solid transparent; + border-right-color: @defaultBorderColor; + top: 10px; + left: -12px; + } + &::after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + border: 6px solid transparent; + border-right-color: #fff; + top: 10px; + left: -11px; + } + } + &-scroll{ + height: 100%; overflow-x: hidden; overflow-y: auto; - padding: 5px 0; - - } - &-box[index="0"]{ - background-color: #F5F5F5; - } - &-box[index="1"]{ - background-color: #FAFAFA; - } - &-box[index="2"]{ - background-color: #FFFFFF; - } - &-box[index="3"]{ - background-color: #EFEFEF; } } - + &.cascader{ - background-color: #EFEFEF; + width: unset; + min-width: unset; + .xm-option-content{ + padding-left: 8px; + } + .disabled .xm-right-arrow{ + color: #C2C2C2 !important; + } } - } .xm-input{ @@ -533,6 +554,19 @@ xm-select{ cursor: initial; } + .xm-right-arrow{ + position: absolute; + color: #666; + right: 5px; + top: -1px; + font-weight: 700; + transform: scale(0.6, 1); + + &::after{ + content: '>'; + } + } + } //不同尺寸下的数据调整 @@ -573,7 +607,7 @@ xm-select{ .left-line-group{ height: calc(100% - @size); } - .xm-tree-icon.hidden+.top-line{ + .xm-tree-icon.xm-hidden+.top-line{ top: @size / 2 - 1px; } }