v1.0.7
新增自动换行+隐藏图标
This commit is contained in:
maplemei
parent
9b55425ebb
commit
eaa25889c3
10
CHANGELOG.md
10
CHANGELOG.md
@ -1,5 +1,15 @@
|
||||
## 更新日志
|
||||
|
||||
### 1.0.7
|
||||
|
||||
*2019-10-16*
|
||||
|
||||
#### 新增
|
||||
|
||||
- 新增`autoRow`配置, 可以开启自动换行
|
||||
- 新增是否显示icon配置, 隐藏图标后将变换背景色显示
|
||||
|
||||
|
||||
### 1.0.6
|
||||
|
||||
*2019-10-14*
|
||||
|
||||
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -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
2
dist/static/2.js
vendored
File diff suppressed because one or more lines are too long
2
dist/static/3.js
vendored
2
dist/static/3.js
vendored
File diff suppressed because one or more lines are too long
8
dist/static/docs.js
vendored
8
dist/static/docs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/xm-select.js
vendored
2
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
//引入xm-select
|
||||
import '@/index.js';
|
||||
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
@ -9,8 +9,6 @@
|
||||
<% } %>
|
||||
<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>
|
||||
|
||||
107
docs/mds/XM22.md
Normal file
107
docs/mds/XM22.md
Normal 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
76
docs/mds/XM23.md
Normal 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>
|
||||
```
|
||||
:::
|
||||
@ -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},
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "xm-select",
|
||||
"version": "1.0.6",
|
||||
"version": "1.0.7",
|
||||
"description": "始于Layui的select多选解决方案",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -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',
|
||||
},
|
||||
|
||||
// 展开下拉框
|
||||
|
||||
@ -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 (
|
||||
<xm-select { ...xmSelectProps } >
|
||||
|
||||
@ -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 (
|
||||
<div class="xm-label">
|
||||
<div class={ className }>
|
||||
<div class="scroll" ref={ ref => this.labelRef = ref }>
|
||||
{ innerHTML ?
|
||||
<div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :
|
||||
|
||||
@ -269,6 +269,7 @@ class General extends Component{
|
||||
</div>
|
||||
)
|
||||
|
||||
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 (
|
||||
<div class={ className } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
|
||||
<i class={ iconClass } style={ iconStyle }></i>
|
||||
<div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
|
||||
{ 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>
|
||||
)
|
||||
|
||||
@ -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,7 +54,7 @@ xm-select{
|
||||
position: relative;
|
||||
border: @border;
|
||||
border-radius: 2px;
|
||||
height: @height;
|
||||
min-height: @height;
|
||||
line-height: @height;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -93,22 +94,34 @@ xm-select{
|
||||
}
|
||||
|
||||
& > .xm-label{
|
||||
// padding: 0 30px 0 10px;
|
||||
&.single-row{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0px;
|
||||
left: 10px;
|
||||
left: 0px;
|
||||
right: 30px;
|
||||
overflow: auto hidden;
|
||||
|
||||
.scroll{
|
||||
overflow-y: hidden;
|
||||
|
||||
}
|
||||
.label-content{
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
&.auto-row{
|
||||
.label-content{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user