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

v1.0.7

Browse Source 
新增自动换行+隐藏图标
This commit is contained in:
maplemei 2019-10-16 12:21:46 +08:00
parent 9b55425ebb
commit eaa25889c3
20 changed files with 303 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -1,5 +1,15 @@
## 更新日志 ## 更新日志
### 1.0.7
*2019-10-16*
#### 新增
- 新增`autoRow`配置, 可以开启自动换行
- 新增是否显示icon配置, 隐藏图标后将变换背景色显示
### 1.0.6 ### 1.0.6
*2019-10-14* *2019-10-14*

2
dist/index.html vendored
View File

@ -1 +1 @@
<!DOCTYPE html><html><head><link rel="preload" href="./xm-select.js" as="script"><link rel="preload" href="./static/docs.js" as="script"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"> --><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> --><title>xm-select</title><link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"><script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"></div><script type="text/javascript" src="./xm-select.js"></script><script type="text/javascript" src="./static/docs.js"></script></body></html> <!DOCTYPE html><html><head><link rel="preload" href="./xm-select.js" as="script"><link rel="preload" href="./static/docs.js" as="script"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><title>xm-select</title><link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"><script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"></div><script type="text/javascript" src="./xm-select.js"></script><script type="text/javascript" src="./static/docs.js"></script></body></html>

2
dist/static/2.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/static/3.js vendored
View File

File diff suppressed because one or more lines are too long

8
dist/static/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/xm-select.js vendored
View File

File diff suppressed because one or more lines are too long

6
docs/assets/common.less
View File

@ -222,3 +222,9 @@ button, input, select, textarea {
} }
} }
} }
.ly-label-center.layui-form-pane .layui-form-label{
display: flex;
align-items: center;
justify-content: center;
}

3
docs/entry.js
View File

@ -1,6 +1,3 @@
//引入xm-select
import '@/index.js';
import Vue from 'vue'; import Vue from 'vue';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';

2
docs/index.ejs
View File

@ -9,8 +9,6 @@
<% } %> <% } %>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"> -->
<!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> -->
<title>xm-select</title> <title>xm-select</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
<script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script> <script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>

107
docs/mds/XM22.md Normal file
View File

@ -0,0 +1,107 @@
## 自动换行
:::tip
当需要选择很多选项时, 横向滚动满足不了你的需求, 可以开启自动换行
:::
### 开启换行
:::demo `autoRow` = `true`
```html
<div id="demo1" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
toolbar:{
show: true,
},
autoRow: true,
height: '500px',
data: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5, selected: true},
{name: '葡萄2', value: 6},
]
})
</script>
```
:::
### Layui风格
前面的label居中 需要 **自行** 加一段css, 这里就没有内置到插件中了, 避免样式污染, 当前或许你有更好的css解决方案 ^_^
```css
.layui-form-pane .layui-form-label{
display: flex;
align-items: center;
justify-content: center;
}
```
:::demo
```html
<form class="layui-form layui-form-pane xm-select-demo ly-label-center" action="">
<div class="layui-form-item" pane>
<label class="layui-form-label">居中风格</label>
<div class="layui-input-block">
<div id="demo2"></div>
</div>
</div>
</form>
<form class="layui-form layui-form-pane xm-select-demo" action="">
<div class="layui-form-item" pane>
<label class="layui-form-label">默认风格</label>
<div class="layui-input-block">
<div id="demo3"></div>
</div>
</div>
</form>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar:{
show: true,
},
filterable: true,
height: '500px',
autoRow: true,
data: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5, selected: true},
{name: '葡萄2', value: 6},
]
})
var demo3 = xmSelect.render({
el: '#demo3',
toolbar:{
show: true,
},
filterable: true,
height: '500px',
autoRow: true,
data: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5, selected: true},
{name: '葡萄2', value: 6},
]
})
</script>
```
:::

76
docs/mds/XM23.md Normal file
View File

@ -0,0 +1,76 @@
## 隐藏图标
### 隐藏单选图标
:::demo
```html
<div id="demo1" class="xm-select-demo"></div>
<div id="demo2" class="xm-select-demo"></div>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
radio: true,
clickClose: true,
model: {
icon: 'hidden',
label: {
type: 'text'
}
},
data: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2},
{name: '王五1', value: 3, disabled: true},
{name: '苹果2', value: 4},
]
})
var demo2 = xmSelect.render({
el: '#demo2',
radio: true,
clickClose: true,
theme: {
color: '#5FB878',
},
model: {
icon: 'hidden',
label: {
type: 'text'
}
},
data: [
{name: '张三1', value: 1, selected: true},
{name: '李四1', value: 2},
{name: '王五1', value: 3, disabled: true},
{name: '苹果2', value: 4},
]
})
</script>
```
:::
### 隐藏多选图标
:::demo
```html
<div id="demo3" class="xm-select-demo"></div>
<script>
var demo3 = xmSelect.render({
el: '#demo3',
model: {
icon: 'hidden',
},
data: [
{name: '张三1', value: 1, selected: true, disabled: true},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
{name: '苹果2', value: 4},
]
})
</script>
```
:::

4
docs/mds/ZTEST.md
View File

@ -14,6 +14,10 @@ var demo1 = xmSelect.render({
show: true show: true
}, },
height: '500px', height: '500px',
model: {
icon: 'hidden',
},
autoRow: true,
data: [ data: [
{name: '城市', optgroup: true}, {name: '城市', optgroup: true},
{name: '北京13', value: 1}, {name: '北京13', value: 1},

3
docs/mds/options.md
View File

@ -37,6 +37,7 @@
| name | 表单提交时的name | string | - | select | | name | 表单提交时的name | string | - | select |
| toolbar | 工具条, 具体看下表 | object | - | - | | toolbar | 工具条, 具体看下表 | object | - | - |
| showCount | 展示在下拉框中的最多选项数量 | int | - | 0 | | showCount | 展示在下拉框中的最多选项数量 | int | - | 0 |
| autoRow | 是否开启自动换行(选项过多时) | boolean | - | false |
### prop ### prop
@ -65,6 +66,8 @@
``` ```
model: { model: {
//是否展示复选框或者单选框图标 show, hidden:变换背景色
icon: 'show',
label: { label: {
//使用方式 //使用方式
type: 'block', type: 'block',

2
docs/router.js
View File

@ -67,6 +67,8 @@ export default [{
{ path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') }, { path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') },
{ path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') }, { path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') },
{ path: '/example/XM21', name: 'Optgroup 分组', component: importMd('/XM21') }, { 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', path: '/example-custom',

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "xm-select", "name": "xm-select",
"version": "1.0.6", "version": "1.0.7",
"description": "始于Layui的select多选解决方案", "description": "始于Layui的select多选解决方案",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

3
src/components/config/options.js
View File

@ -40,6 +40,8 @@ export default function (lan = 'zn') {
style: {}, style: {},
//默认多选的高度 //默认多选的高度
height: '200px', height: '200px',
//已选中数据是否自动换行显示
autoRow: false,
//是否开启分页 //是否开启分页
paging: false, paging: false,
//分页每页的条数 //分页每页的条数
@ -94,6 +96,7 @@ export default function (lan = 'zn') {
} }
}, },
}, },
icon: 'show',
}, },
// 展开下拉框 // 展开下拉框

59
src/components/element/framework.js
View File

@ -40,7 +40,6 @@ class Framework extends Component{
value(sels, show){ value(sels, show){
let data = this.state.data; let data = this.state.data;
let value = this.props.prop.value; let value = this.props.prop.value;
let direction = this.props.direction;
let list = []; let list = [];
filterGroupOption(list, data, this.props.prop); 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), sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a),
//下拉框是否展开 //下拉框是否展开
show, show,
//下拉方向
direction,
directionVal: '',
}) })
} }
@ -79,28 +75,6 @@ class Framework extends Component{
//事件互斥原则, 打开一个多选, 关闭其他所有多选 //事件互斥原则, 打开一个多选, 关闭其他所有多选
this.props.onClose(this.props.el); 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{ }else{
if(this.props.hide && this.props.hide() == false){ if(this.props.hide && this.props.hide() == false){
return; return;
@ -119,6 +93,37 @@ class Framework extends Component{
this.reset(props) 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 }) { render(config, { sels, show }) {
const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config; const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config;
const borderStyle = { borderColor: this.state.tmpColor || theme.color }; 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 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 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 ( return (
<xm-select { ...xmSelectProps } > <xm-select { ...xmSelectProps } >

8
src/components/element/label.js
View File

@ -41,8 +41,8 @@ class Label extends Component{
this.labelRef.onmousewheel = this.scrollFunc.bind(this); 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; const { name, disabled } = prop;
//获取配置项 //获取配置项
@ -92,9 +92,9 @@ class Label extends Component{
} }
} }
const className = ['xm-label', autoRow ? 'auto-row' : 'single-row'].join(' ');
return ( return (
<div class="xm-label"> <div class={ className }>
<div class="scroll" ref={ ref => this.labelRef = ref }> <div class="scroll" ref={ ref => this.labelRef = ref }>
{ innerHTML ? { innerHTML ?
<div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> : <div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :

12
src/components/element/model/general.js
View File

@ -269,6 +269,7 @@ class General extends Component{
</div> </div>
) )
const showIcon = config.model.icon != 'hidden';
const renderItem = item => { const renderItem = item => {
const selected = !!sels.find(sel => sel[value] == item[value]) const selected = !!sels.find(sel => sel[value] == item[value])
const iconStyle = selected ? { const iconStyle = selected ? {
@ -278,12 +279,17 @@ class General extends Component{
} : { } : {
borderColor: theme.color, 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(' '); const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
return ( return (
<div class={ className } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }> <div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
<i class={ iconClass } style={ iconStyle }></i> { showIcon && <i class={ iconClass } style={ iconStyle }></i> }
<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div> <div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
</div> </div>
) )

58
src/style/index.less
View File

@ -3,6 +3,7 @@
@disabledColor: #C2C2C2; @disabledColor: #C2C2C2;
@border: 1px solid @defaultBorderColor; @border: 1px solid @defaultBorderColor;
@height: 36px; @height: 36px;
@heightLabel: 30px;
@-webkit-keyframes xm-upbit { @-webkit-keyframes xm-upbit {
from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3} from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}
@ -53,8 +54,8 @@ xm-select{
position: relative; position: relative;
border: @border; border: @border;
border-radius: 2px; border-radius: 2px;
height: @height; min-height: @height;
line-height: @height; line-height: @height;
display: block; display: block;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
@ -93,22 +94,34 @@ xm-select{
} }
& > .xm-label{ & > .xm-label{
// padding: 0 30px 0 10px; &.single-row{
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0px; bottom: 0px;
left: 10px; left: 0px;
right: 30px; right: 30px;
overflow: auto hidden; overflow: auto hidden;
.scroll{
overflow-y: hidden;
}
.label-content{
flex-wrap: nowrap;
}
}
&.auto-row{
.label-content{
flex-wrap: wrap;
}
}
.scroll{ .scroll{
overflow-y: hidden;
.label-content{ .label-content{
line-height: @heightLabel;
height: calc(100% - 20px); height: calc(100% - 20px);
display: flex; display: flex;
align-items: baseline; align-items: baseline;
white-space: pre; white-space: pre;
padding: 3px 30px 3px 10px;
&:after{ &:after{
content: '-'; content: '-';
opacity: 0; opacity: 0;
@ -120,7 +133,7 @@ xm-select{
display: flex; display: flex;
position: relative; position: relative;
padding: 0px 5px; padding: 0px 5px;
margin-right: 5px; margin: 2px 5px 2px 0;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
border-radius: 3px; border-radius: 3px;
@ -208,7 +221,6 @@ xm-select{
&:hover{ &:hover{
background-color: #f2f2f2; background-color: #f2f2f2;
} }
&-icon{ &-icon{
color: transparent; color: transparent;
display: flex; display: flex;
@ -222,7 +234,6 @@ xm-select{
&-icon.xm-icon-danx{ &-icon.xm-icon-danx{
border-radius: 100%; border-radius: 100%;
} }
&-content{ &-content{
display: flex; display: flex;
position: relative; position: relative;
@ -233,6 +244,13 @@ xm-select{
color: @fontColor; color: @fontColor;
width: calc(100% - 20px); width: calc(100% - 20px);
} }
&.hide-icon .xm-option-content{
padding-left: 0;
}
&.selected.hide-icon .xm-option-content{
color: #FFF !important;
}
} }
.xm-select-empty{ .xm-select-empty{
@ -391,9 +409,9 @@ xm-select{
} }
// xm-select[ua='win']{ //layui的一些样式兼容
// .xm-option-icon{ .layui-form-pane{
// margin-top: 0px; xm-select{
// margin-bottom: -2px; margin: -1px -1px -1px 0;
// } }
// } }