diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f22309..b0e9cc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ ## 更新日志 +### 1.0.7 + +*2019-10-16* + +#### 新增 + +- 新增`autoRow`配置, 可以开启自动换行 +- 新增是否显示icon配置, 隐藏图标后将变换背景色显示 + + ### 1.0.6 *2019-10-14* diff --git a/dist/index.html b/dist/index.html index 3678f9b..bc4fa45 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1 +1 @@ -xm-select
\ No newline at end of file +xm-select
\ No newline at end of file diff --git a/dist/static/2.js b/dist/static/2.js index 5bbd34b..2d5063a 100644 --- a/dist/static/2.js +++ b/dist/static/2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{361:function(e,t,n){e.exports=n.p+"static/wx.f391ad4.jpg"},363:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),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"}},[e._v("
\n\n diff --git a/docs/mds/XM22.md b/docs/mds/XM22.md new file mode 100644 index 0000000..d7f4fe5 --- /dev/null +++ b/docs/mds/XM22.md @@ -0,0 +1,107 @@ +## 自动换行 + + + +:::tip +当需要选择很多选项时, 横向滚动满足不了你的需求, 可以开启自动换行 +::: + + +### 开启换行 + +:::demo `autoRow` = `true` +```html +
+ + +``` +::: + + +### Layui风格 + +前面的label居中 需要 **自行** 加一段css, 这里就没有内置到插件中了, 避免样式污染, 当前或许你有更好的css解决方案 ^_^ +```css +.layui-form-pane .layui-form-label{ + display: flex; + align-items: center; + justify-content: center; +} +``` + +:::demo +```html +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` +::: diff --git a/docs/mds/XM23.md b/docs/mds/XM23.md new file mode 100644 index 0000000..fbd10ad --- /dev/null +++ b/docs/mds/XM23.md @@ -0,0 +1,76 @@ +## 隐藏图标 + + +### 隐藏单选图标 + +:::demo +```html +
+
+ + +``` +::: + + +### 隐藏多选图标 + +:::demo +```html +
+ + +``` +::: diff --git a/docs/mds/ZTEST.md b/docs/mds/ZTEST.md index 3b35be9..8a02bf2 100644 --- a/docs/mds/ZTEST.md +++ b/docs/mds/ZTEST.md @@ -14,6 +14,10 @@ var demo1 = xmSelect.render({ show: true }, height: '500px', + model: { + icon: 'hidden', + }, + autoRow: true, data: [ {name: '城市', optgroup: true}, {name: '北京13', value: 1}, diff --git a/docs/mds/options.md b/docs/mds/options.md index d23584e..5605159 100644 --- a/docs/mds/options.md +++ b/docs/mds/options.md @@ -37,6 +37,7 @@ | name | 表单提交时的name | string | - | select | | toolbar | 工具条, 具体看下表 | object | - | - | | showCount | 展示在下拉框中的最多选项数量 | int | - | 0 | +| autoRow | 是否开启自动换行(选项过多时) | boolean | - | false | ### prop @@ -65,6 +66,8 @@ ``` model: { + //是否展示复选框或者单选框图标 show, hidden:变换背景色 + icon: 'show', label: { //使用方式 type: 'block', diff --git a/docs/router.js b/docs/router.js index 9d792f7..5d426d7 100644 --- a/docs/router.js +++ b/docs/router.js @@ -67,6 +67,8 @@ export default [{ { 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-custom', diff --git a/package.json b/package.json index 14fe7b6..8d52148 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xm-select", - "version": "1.0.6", + "version": "1.0.7", "description": "始于Layui的select多选解决方案", "main": "index.js", "scripts": { diff --git a/src/components/config/options.js b/src/components/config/options.js index 53e5569..3c32f05 100644 --- a/src/components/config/options.js +++ b/src/components/config/options.js @@ -40,6 +40,8 @@ export default function (lan = 'zn') { style: {}, //默认多选的高度 height: '200px', + //已选中数据是否自动换行显示 + autoRow: false, //是否开启分页 paging: false, //分页每页的条数 @@ -94,6 +96,7 @@ export default function (lan = 'zn') { } }, }, + icon: 'show', }, // 展开下拉框 diff --git a/src/components/element/framework.js b/src/components/element/framework.js index 28f519e..8f24fff 100644 --- a/src/components/element/framework.js +++ b/src/components/element/framework.js @@ -40,7 +40,6 @@ class Framework extends Component{ value(sels, show){ let data = this.state.data; let value = this.props.prop.value; - let direction = this.props.direction; let list = []; filterGroupOption(list, data, this.props.prop); @@ -48,9 +47,6 @@ class Framework extends Component{ sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a), //下拉框是否展开 show, - //下拉方向 - direction, - directionVal: '', }) } @@ -79,28 +75,6 @@ class Framework extends Component{ //事件互斥原则, 打开一个多选, 关闭其他所有多选 this.props.onClose(this.props.el); - let direction = this.state.direction; - if(direction === 'auto'){ - - //用于控制js获取下拉框的高度 - this.bodyView.style.display = 'block'; - this.bodyView.style.visibility = 'hidden'; - - //获取下拉元素的高度 - let bodyViewRect = this.bodyView.getBoundingClientRect(); - let bodyViewHeight = bodyViewRect.height; - - //还原控制效果 - this.bodyView.style.display = ''; - this.bodyView.style.visibility = ''; - - //确定下拉框是朝上还是朝下 - let clientHeight = document.documentElement.clientHeight; - let rect = this.base.getBoundingClientRect(); - let diff = clientHeight - (rect.y || rect.top) - rect.height - 20; - direction = diff > bodyViewHeight || (rect.y || rect.top) < diff ? 'down' : 'up'; - } - this.setState({ directionVal: direction }) }else{ if(this.props.hide && this.props.hide() == false){ return; @@ -119,6 +93,37 @@ class Framework extends Component{ this.reset(props) } + componentDidUpdate(){ + let direction = this.props.direction; + let rect = this.base.getBoundingClientRect(); + if(direction === 'auto'){ + //用于控制js获取下拉框的高度 + this.bodyView.style.display = 'block'; + this.bodyView.style.visibility = 'hidden'; + + //获取下拉元素的高度 + let bodyViewRect = this.bodyView.getBoundingClientRect(); + let bodyViewHeight = bodyViewRect.height; + + //还原控制效果 + this.bodyView.style.display = ''; + this.bodyView.style.visibility = ''; + + //确定下拉框是朝上还是朝下 + let clientHeight = document.documentElement.clientHeight; + let diff = clientHeight - (rect.y || rect.top) - rect.height - 20; + direction = diff > bodyViewHeight || (rect.y || rect.top) < diff ? 'down' : 'up'; + } + + if(direction == 'down'){ + this.bodyView.style.top = rect.height + 4 + 'px'; + this.bodyView.style.bottom = 'auto'; + }else{ + this.bodyView.style.top = 'auto'; + this.bodyView.style.bottom = rect.height + 4 + 'px'; + } + } + render(config, { sels, show }) { const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config; const borderStyle = { borderColor: this.state.tmpColor || theme.color }; @@ -187,7 +192,7 @@ class Framework extends Component{ const labelProps = { ...config, data: this.state.data, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') } const bodyProps = { ...config, data: this.state.data, sels, ck, show, onReset: this.onReset.bind(this) } //控制下拉框的显示于隐藏 - const bodyClass = ['xm-body', this.state.directionVal, show ? '' : 'dis'].join(' '); + const bodyClass = ['xm-body', show ? '' : 'dis'].join(' '); return ( diff --git a/src/components/element/label.js b/src/components/element/label.js index 649392a..5989de2 100644 --- a/src/components/element/label.js +++ b/src/components/element/label.js @@ -41,8 +41,8 @@ class Label extends Component{ this.labelRef.onmousewheel = this.scrollFunc.bind(this); } - render({ data, prop, theme, model, sels }) { - //获取变换属性 + render(config) { + const { data, prop, theme, model, sels, autoRow } = config; const { name, disabled } = prop; //获取配置项 @@ -92,9 +92,9 @@ class Label extends Component{ } } - + const className = ['xm-label', autoRow ? 'auto-row' : 'single-row'].join(' '); return ( -
+
this.labelRef = ref }> { innerHTML ?
: diff --git a/src/components/element/model/general.js b/src/components/element/model/general.js index b2b1530..cc999a2 100644 --- a/src/components/element/model/general.js +++ b/src/components/element/model/general.js @@ -269,6 +269,7 @@ class General extends Component{
) + const showIcon = config.model.icon != 'hidden'; const renderItem = item => { const selected = !!sels.find(sel => sel[value] == item[value]) const iconStyle = selected ? { @@ -278,12 +279,17 @@ class General extends Component{ } : { borderColor: theme.color, }; - const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' '); + const itemStyle = {} + if(!showIcon && selected){ + itemStyle.backgroundColor = theme.color; + item[disabled] && (itemStyle.backgroundColor = '#C2C2C2'); + } + 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(' '); return ( -
- +
+ { showIcon && }
) diff --git a/src/style/index.less b/src/style/index.less index f010450..d27686c 100644 --- a/src/style/index.less +++ b/src/style/index.less @@ -3,6 +3,7 @@ @disabledColor: #C2C2C2; @border: 1px solid @defaultBorderColor; @height: 36px; +@heightLabel: 30px; @-webkit-keyframes xm-upbit { from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3} @@ -53,8 +54,8 @@ xm-select{ position: relative; border: @border; border-radius: 2px; - height: @height; - line-height: @height; + min-height: @height; + line-height: @height; display: block; width: 100%; cursor: pointer; @@ -93,22 +94,34 @@ xm-select{ } & > .xm-label{ - // padding: 0 30px 0 10px; - position: absolute; - top: 0; - bottom: 0px; - left: 10px; - right: 30px; - overflow: auto hidden; + &.single-row{ + position: absolute; + top: 0; + bottom: 0px; + left: 0px; + right: 30px; + overflow: auto hidden; + .scroll{ + overflow-y: hidden; + } + .label-content{ + flex-wrap: nowrap; + } + } + &.auto-row{ + .label-content{ + flex-wrap: wrap; + } + } .scroll{ - overflow-y: hidden; - .label-content{ + line-height: @heightLabel; height: calc(100% - 20px); display: flex; align-items: baseline; white-space: pre; + padding: 3px 30px 3px 10px; &:after{ content: '-'; opacity: 0; @@ -120,7 +133,7 @@ xm-select{ display: flex; position: relative; padding: 0px 5px; - margin-right: 5px; + margin: 2px 5px 2px 0; height: 26px; line-height: 26px; border-radius: 3px; @@ -208,7 +221,6 @@ xm-select{ &:hover{ background-color: #f2f2f2; } - &-icon{ color: transparent; display: flex; @@ -222,7 +234,6 @@ xm-select{ &-icon.xm-icon-danx{ border-radius: 100%; } - &-content{ display: flex; position: relative; @@ -233,6 +244,13 @@ xm-select{ color: @fontColor; width: calc(100% - 20px); } + + &.hide-icon .xm-option-content{ + padding-left: 0; + } + &.selected.hide-icon .xm-option-content{ + color: #FFF !important; + } } .xm-select-empty{ @@ -391,9 +409,9 @@ xm-select{ } -// xm-select[ua='win']{ -// .xm-option-icon{ -// margin-top: 0px; -// margin-bottom: -2px; -// } -// } +//layui的一些样式兼容 +.layui-form-pane{ + xm-select{ + margin: -1px -1px -1px 0; + } +}