v1.0.7
新增自动换行+隐藏图标
This commit is contained in:
maplemei
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user