v1.1.0
This commit is contained in:
maplemei
parent
e02db53b89
commit
1e9d58f0e6
@ -2,7 +2,7 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_style = tab
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
|
||||
17
CHANGELOG.md
17
CHANGELOG.md
@ -1,5 +1,22 @@
|
||||
## 更新日志
|
||||
|
||||
### 1.1.0.Beta
|
||||
|
||||
*2019-11-19*
|
||||
|
||||
- 历时半个月, 也算是一次大的版本更新, 此版本仅为测试版本, 升级需谨慎
|
||||
|
||||
#### 新增
|
||||
|
||||
- 树形组件
|
||||
|
||||
#### 调整
|
||||
|
||||
- 移除分组中的optgroup模式
|
||||
- 调整代码文件夹结构
|
||||
- 调整preact版本
|
||||
|
||||
|
||||
### 1.0.13
|
||||
|
||||
*2019-11-07*
|
||||
|
||||
49
README.md
49
README.md
@ -3,13 +3,26 @@
|
||||
#### 介绍
|
||||
始于Layui, 下拉选择框的多选解决方案
|
||||
|
||||
前身`formSelectes`, 移除了对`jquery`的依赖, 提高渲染速度
|
||||
前身[前往formSelectes](https://github.com/hnzzmsf/layui-formSelects), 由于渲染速度慢, 代码冗余, 被放弃了
|
||||
|
||||
`xm-select`使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展
|
||||
|
||||
[xm-select演示站点](https://maplemei.gitee.io/xm-select/)
|
||||
|
||||
> 历史版本
|
||||
> 支持功能
|
||||
|
||||
[前往formSelectes](https://github.com/hnzzmsf/layui-formSelects)
|
||||
- [x] 国际化 - 中文/英文
|
||||
- [x] 多选
|
||||
- [x] 单选
|
||||
- [x] 重复选
|
||||
- [x] 分组
|
||||
- [x] 工具条
|
||||
- [x] 创建条目
|
||||
- [x] 显示模式
|
||||
- [x] 搜索模式 (本地数据过滤, 远程搜索)
|
||||
- [x] 分页模式
|
||||
- [x] 下拉树
|
||||
- [x] 下拉任意 - 可以自己写html
|
||||
|
||||
> 联系方式
|
||||
|
||||
@ -94,3 +107,33 @@ QQ群: 660408068
|
||||
// ...
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 相关
|
||||
|
||||
> 支持IE吗
|
||||
|
||||
简单适配IE10以上的版本, 如有其它兼容性问题, 请加群反馈
|
||||
|
||||
> 为什么没有css文件
|
||||
|
||||
已经内置到js代码中了, 直接引入`xm-select.js`即可使用
|
||||
|
||||
> 开源 != 无私
|
||||
|
||||
有问题请自己多动手尝试^_^
|
||||
|
||||
> 成长之路
|
||||
|
||||
```
|
||||
maplemei, 一个90后, 热爱前端的程序猿
|
||||
|
||||
16年接触了 贤心大大 的 layui, 开始走向了前端的不归之路
|
||||
17年尝试自己写了一个基于layui的省市区联动插件, 同年底开发了layui select多选第一版
|
||||
18年6月发布了formSelects
|
||||
19年6月发布了xm-select
|
||||
|
||||
其实每个版本的更新都是自己对前端的一个新的认知, 也是一个新的学习之路
|
||||
|
||||
目前作者几乎不怎么使用layui, 已经走向了vue, react的新途 , xm-select的维护是对layui的一种情怀 ^_^
|
||||
```
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ const isProd = process.env.NODE_ENV === 'prod';
|
||||
|
||||
const webpackConfig = {
|
||||
entry: {
|
||||
'xm-select': "./src/index.js",
|
||||
'xm-select': "./src/main.js",
|
||||
'static/docs': "./docs/entry.js",
|
||||
},
|
||||
output: {
|
||||
|
||||
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
10
dist/static/docs.js
vendored
10
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
26
docs/App.vue
26
docs/App.vue
@ -177,12 +177,23 @@
|
||||
.content {
|
||||
padding-top: 50px;
|
||||
|
||||
&> {
|
||||
h3 {
|
||||
pre{
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
&>h3 {
|
||||
margin: 55px 0 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
&>ul:not(.timeline) {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
&>table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
@ -217,15 +228,6 @@
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul:not(.timeline) {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -240,6 +240,15 @@ button, input, select, textarea {
|
||||
padding: 0 10px;
|
||||
}
|
||||
table{
|
||||
margin-bottom: 10px !important;
|
||||
margin-bottom: -1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-ZP03{
|
||||
.layui-laydate-footer{
|
||||
padding: 0;
|
||||
}
|
||||
xm-select .scroll-body{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ const router = new VueRouter({
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.path) {
|
||||
_hmt.push(['_trackPageview', to.fullPath]);
|
||||
_hmt.push(['_trackPageview', '/#' + to.fullPath]);
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
@ -52,11 +52,16 @@ var demo2 = xmSelect.render({
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
on({ arr, change, isAdd }){
|
||||
on: function(data){
|
||||
//arr: 当前多选已选中的数据
|
||||
var arr = data.arr;
|
||||
//change, 此次选择变化的数据,数组
|
||||
var change = data.change;
|
||||
//isAdd, 此次操作是新增还是删除
|
||||
var isAdd = data.isAdd;
|
||||
|
||||
console.log(arr);
|
||||
|
||||
if(isAdd){
|
||||
var item = change[0];
|
||||
var index = arr.findIndex(i => i.mutex == item.mutex && i.value != item.value);
|
||||
|
||||
@ -1,35 +1,6 @@
|
||||
## 分组
|
||||
|
||||
|
||||
### optgroup模式
|
||||
|
||||
:::demo 指定选项中的`optgroup`为`true`
|
||||
```html
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
toolbar:{
|
||||
show: true,
|
||||
},
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '销售员', optgroup: true},
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
{name: '奖品', optgroup: true},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5},
|
||||
{name: '葡萄2', value: 6},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### children模式
|
||||
|
||||
:::demo 选项中的`children`为数组
|
||||
@ -62,39 +33,6 @@ var demo2 = xmSelect.render({
|
||||
:::
|
||||
|
||||
|
||||
### 混合模式
|
||||
|
||||
如果自己感觉舒服的话, 也可以这么用...
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
||||
<div id="demo3" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo3 = xmSelect.render({
|
||||
el: '#demo3',
|
||||
filterable: true,
|
||||
toolbar: {
|
||||
show: true
|
||||
},
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '城市', optgroup: true},
|
||||
{name: '北京13', value: 1},
|
||||
{name: '天津1', value: 2, selected: true, disabled: true},
|
||||
{name: '上海1', value: 3},
|
||||
{name: '销售员', children: [
|
||||
{name: '李四23', value: 4, selected: true},
|
||||
{name: '王五2', value: 5},
|
||||
]},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 分组的单击事件
|
||||
|
||||
:::demo
|
||||
@ -109,20 +47,22 @@ var demo4 = xmSelect.render({
|
||||
},
|
||||
height: '500px',
|
||||
data: [
|
||||
{name: '选中', optgroup: true, click: 'SELECT'},
|
||||
{name: '选中', optgroup: true, click: 'SELECT', children: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2, disabled: true},
|
||||
{name: '清空', optgroup: true, click: 'CLEAR'},
|
||||
]},
|
||||
{name: '清空', optgroup: true, click: 'CLEAR', children: [
|
||||
{name: '王五', value: 3, disabled: true},
|
||||
{name: '苹果', value: 4, selected: true},
|
||||
{name: '自动', optgroup: true, click: 'AUTO'},
|
||||
]},
|
||||
{name: '自动', optgroup: true, click: 'AUTO', children: [
|
||||
{name: '香蕉', value: 5},
|
||||
{name: '葡萄', value: 6},
|
||||
{name: '自定义', optgroup: true, click: function(item){
|
||||
alert('自定义的, 想干嘛干嘛');
|
||||
}},
|
||||
]},
|
||||
{name: '自定义', optgroup: true, click: function(item){ alert('自定义的, 想干嘛干嘛') }, children: [
|
||||
{name: '小米', value: 7},
|
||||
{name: '华为', value: 8},
|
||||
]},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -15,36 +15,58 @@
|
||||
//先渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
prop: {
|
||||
name: 'username',
|
||||
value: 'username',
|
||||
},
|
||||
content: `
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="200">
|
||||
<col>
|
||||
</colgroup>
|
||||
<table class="layui-table" lay-filter="demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>昵称</th>
|
||||
<th>加入时间</th>
|
||||
<th>签名</th>
|
||||
<th lay-data="{field:'username', width:80}">昵称</th>
|
||||
<th lay-data="{field:'experience', width:50, sort:true}">积分</th>
|
||||
<th lay-data="{field:'sign', width: 200}">签名</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>贤心</td>
|
||||
<td>2016-11-29</td>
|
||||
<td>人生就像是一场修行</td>
|
||||
<td>贤心1</td>
|
||||
<td>66</td>
|
||||
<td>人生就像是一场修行a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>许闲心</td>
|
||||
<td>2016-11-28</td>
|
||||
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||
<td>贤心2</td>
|
||||
<td>88</td>
|
||||
<td>人生就像是一场修行b</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>贤心3</td>
|
||||
<td>33</td>
|
||||
<td>人生就像是一场修行c</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`,
|
||||
height: 'auto',
|
||||
})
|
||||
|
||||
layui.table.init('demo', {
|
||||
done: function(res){
|
||||
demo1.update({ data: res.data })
|
||||
}
|
||||
}).on('row(demo)', function(obj){
|
||||
var values = demo1.getValue();
|
||||
var item = obj.data;
|
||||
var has = values.find(function(i){
|
||||
return i.username === item.username
|
||||
})
|
||||
if(has){
|
||||
demo1.delete([ item ]);
|
||||
}else{
|
||||
demo1.append([ item ]);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
134
docs/mds/ZP02.md
134
docs/mds/ZP02.md
@ -1,8 +1,23 @@
|
||||
## 下拉树
|
||||
|
||||
### eleTree
|
||||
### tree
|
||||
|
||||
结合 `layui` 插件中心的 `eleTree`, <a href='https://fly.layui.com/extend/eleTree/' target='_blank'>传送门</a>
|
||||
默认配置
|
||||
|
||||
```
|
||||
tree: {
|
||||
//是否显示树状结构
|
||||
show: false,
|
||||
//是否展示三角图标
|
||||
showFolderIcon: true,
|
||||
//是否显示虚线
|
||||
showLine: false,
|
||||
//间距
|
||||
indent: 20,
|
||||
//默认展开节点的数组
|
||||
expandedKeys: [],
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
:::demo
|
||||
@ -10,60 +25,81 @@
|
||||
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<br/>
|
||||
<div class="layui-form">
|
||||
<input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
|
||||
<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">间距</div>
|
||||
<div id="slideTest1"></div>
|
||||
|
||||
|
||||
<script>
|
||||
//先渲染多选
|
||||
layui.form.render();
|
||||
|
||||
layui.form.on('checkbox(showFolderIcon)', function(data){
|
||||
demo1.update({
|
||||
tree: {
|
||||
showFolderIcon: data.elem.checked
|
||||
}
|
||||
})
|
||||
});
|
||||
layui.form.on('checkbox(showLine)', function(data){
|
||||
demo1.update({
|
||||
tree: {
|
||||
showLine: data.elem.checked
|
||||
}
|
||||
})
|
||||
});
|
||||
layui.slider.render({
|
||||
elem: '#slideTest1',
|
||||
min: 10,
|
||||
max: 100,
|
||||
showstep: true,
|
||||
input: true,
|
||||
tips: true,
|
||||
value: 20,
|
||||
change: function(value){
|
||||
demo1.update({
|
||||
tree: {
|
||||
indent: value
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
theme: {
|
||||
color: '#5FB878',
|
||||
autoRow: true,
|
||||
tree: {
|
||||
show: true,
|
||||
showFolderIcon: true,
|
||||
showLine: true,
|
||||
indent: 20,
|
||||
expandedKeys: [ -3 ],
|
||||
},
|
||||
content: '<div id="ele1" lay-filter="ele1"></div>',
|
||||
})
|
||||
|
||||
//渲染自定义内容
|
||||
var ele = layui.eleTree.render({
|
||||
elem: '#ele1',
|
||||
data: [
|
||||
{ id: 1, label: "安徽省", children: [
|
||||
{ id: 2, label: "马鞍山市", disabled: true, children: [
|
||||
{ id: 3, label: "和县" },
|
||||
{ id: 4, label: "花山区" }
|
||||
]}
|
||||
height: 'auto',
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
]},
|
||||
{ id: 5, label: "河南省", children: [
|
||||
{ id: 6, label: "郑州市" },
|
||||
{ id: 7, label: "开封市" },
|
||||
{ id: 8, label: "焦作市" },
|
||||
{ id: 9, label: "洛阳市" },
|
||||
]}
|
||||
],
|
||||
showCheckbox: true,
|
||||
defaultExpandAll: true,
|
||||
});
|
||||
|
||||
//监听下拉多选的选择
|
||||
demo1.update({
|
||||
on({ arr, change, isAdd }){
|
||||
if(isAdd === false){//监听取消
|
||||
ele.setChecked(arr.map(item => item.id), true);
|
||||
{name: '奖品', value: -2, children: [
|
||||
{name: '奖品3', value: -3, children: [
|
||||
{name: '苹果3', value: 14, selected: true},
|
||||
{name: '香蕉3', value: 15},
|
||||
{name: '葡萄3', value: 16},
|
||||
]},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5},
|
||||
{name: '葡萄2', value: 6},
|
||||
]},
|
||||
]
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
//监听树的选择
|
||||
layui.eleTree.on("nodeChecked(ele1)", function(d) {
|
||||
var arr = ele.getChecked(true, false)
|
||||
demo1.update({
|
||||
prop: {
|
||||
name: 'label',
|
||||
value: 'id',
|
||||
},
|
||||
data: arr,
|
||||
}).setValue(arr)
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
112
docs/mds/ZP03.md
112
docs/mds/ZP03.md
@ -1,8 +1,14 @@
|
||||
## 下拉树
|
||||
## 下拉日期多选
|
||||
|
||||
### layuiTree
|
||||
### laydate
|
||||
|
||||
结合 `layui` 的 `tree`, <a href='https://www.layui.com/doc/modules/tree.html' target='_blank'>传送门</a>
|
||||
```
|
||||
//css调整部分
|
||||
xm-select .scroll-body{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -10,55 +16,69 @@
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var data = [
|
||||
{ id: 1, title: "安徽省", children: [
|
||||
{ id: 2, title: "马鞍山市", disabled: true, children: [
|
||||
{ id: 3, title: "和县" },
|
||||
{ id: 4, title: "花山区" }
|
||||
]}
|
||||
]},
|
||||
{ id: 5, title: "河南省", children: [
|
||||
{ id: 6, title: "郑州市" },
|
||||
{ id: 7, title: "开封市" },
|
||||
{ id: 8, title: "焦作市" },
|
||||
{ id: 9, title: "洛阳市" },
|
||||
]}
|
||||
]
|
||||
|
||||
|
||||
//先渲染多选
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
theme: {
|
||||
color: '#5FB878',
|
||||
},
|
||||
content: '<div id="layuiTree"></div>',
|
||||
data: data,
|
||||
prop: {
|
||||
name: 'title',
|
||||
value: 'id',
|
||||
content: '<div id="laydate" />',
|
||||
height: 'auto',
|
||||
autoRow: true,
|
||||
on: function(data){
|
||||
if(!data.isAdd){
|
||||
dateSelect(demo1.getValue('value'));
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//渲染自定义内容
|
||||
var ele = layui.tree.render({
|
||||
id: 'demoId',
|
||||
elem: '#layuiTree',
|
||||
data: data,
|
||||
showCheckbox: true,
|
||||
oncheck: function(obj){
|
||||
var checkData = layui.tree.getChecked('demoId');
|
||||
}
|
||||
});
|
||||
|
||||
//监听下拉多选的选择
|
||||
demo1.update({
|
||||
on({ arr, change, isAdd }){
|
||||
if(isAdd === false){//监听取消
|
||||
ele.setChecked(arr.map(item => item.id), true);
|
||||
}
|
||||
layui.laydate.render({
|
||||
elem: '#laydate',
|
||||
position: 'static',
|
||||
showBottom: false,
|
||||
format: 'yyyy-M-dd',
|
||||
change: function(){
|
||||
dateSelect(demo1.getValue('value'));
|
||||
},
|
||||
});
|
||||
done: function(value){
|
||||
console.log(value)
|
||||
var values = demo1.getValue('value');
|
||||
var index = values.findIndex(function(val){
|
||||
return val === value
|
||||
});
|
||||
|
||||
if(index != -1){
|
||||
values.splice(index, 1);
|
||||
}else{
|
||||
values.push(value);
|
||||
}
|
||||
|
||||
dateSelect(values);
|
||||
|
||||
demo1.update({
|
||||
data: values.map(function(val){
|
||||
return {
|
||||
name: val,
|
||||
value: val,
|
||||
selected: true,
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
ready: removeAll,
|
||||
})
|
||||
|
||||
function removeAll(){
|
||||
document.querySelectorAll('#laydate td[lay-ymd].layui-this').forEach(function(dom){
|
||||
dom.classList.remove('layui-this');
|
||||
});
|
||||
}
|
||||
|
||||
function dateSelect(values){
|
||||
removeAll();
|
||||
values.forEach(function(val){
|
||||
var dom = document.querySelector('#laydate td[lay-ymd="'+val.replace(/-0([1-9])/g, '-$1')+'"]');
|
||||
dom && dom.classList.add('layui-this');
|
||||
});
|
||||
}
|
||||
|
||||
//这里仅仅提供一个演示, 更多的想法由你自己来创造
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -11,24 +11,27 @@
|
||||
var demo1 = xmSelect.render({
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
filterable: true,
|
||||
toolbar: {show: true},
|
||||
paging: true,
|
||||
create: (val, data) => {
|
||||
console.log(val, data)
|
||||
return {
|
||||
name: val,
|
||||
value: val,
|
||||
}
|
||||
tree: {
|
||||
show: true,
|
||||
expandedKeys: [-3],
|
||||
},
|
||||
height: 'auto',
|
||||
on({ arr, change, isAdd }){
|
||||
console.log(arr, change, isAdd)
|
||||
},
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', children: [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
]},
|
||||
{name: '奖品', children: [
|
||||
{name: '奖品', value: -2, children: [
|
||||
{name: '奖品3', value: -3, children: [
|
||||
{name: '苹果3', value: 14, selected: true, disabled: true},
|
||||
{name: '香蕉3', value: 15},
|
||||
{name: '葡萄3', value: 16},
|
||||
]},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5},
|
||||
{name: '葡萄2', value: 6},
|
||||
@ -36,9 +39,6 @@ var demo1 = xmSelect.render({
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
| size | 尺寸 | string | large / medium / small / mini | medium |
|
||||
| disabled | 是否禁用多选 | boolean | true / false | false |
|
||||
| create | 创建条目 | function(val, data), val: 搜索的数据, data: 当前下拉数据 | - | null |
|
||||
| tree | 树形结构, 具体看下表 | object | - | - |
|
||||
|
||||
|
||||
### prop
|
||||
@ -60,24 +61,19 @@
|
||||
|
||||
### 分组说明
|
||||
|
||||
如果children属性为数组, 或者optgroup=true的时候开启分组模式
|
||||
如果children属性为数组的时候开启分组模式
|
||||
|
||||
```
|
||||
//平级结构下面的数据为一组
|
||||
{name: '城市', optgroup: true},
|
||||
|
||||
//children下的数组为一组
|
||||
{name: '销售员', children: [
|
||||
{name: '李四', value: 4, selected: true},
|
||||
{name: '王五', value: 5},
|
||||
]},
|
||||
|
||||
//可在分组上定义click属性, 来定义点击事件
|
||||
//这里以optgroup模式为例, children模式同理
|
||||
{name: '选中', optgroup: true, click: 'SELECT'},
|
||||
{name: '清空', optgroup: true, click: 'CLEAR'},
|
||||
{name: '自动', optgroup: true, click: 'AUTO'},
|
||||
{name: '自定义', optgroup: true, click: function(item){
|
||||
{name: '选中', children: [...], click: 'SELECT'},
|
||||
{name: '清空', children: [...], click: 'CLEAR'},
|
||||
{name: '自动', children: [...], click: 'AUTO'},
|
||||
{name: '自定义', children: [...], click: function(item){
|
||||
alert('自定义的, 想干嘛干嘛');
|
||||
}},
|
||||
|
||||
@ -165,6 +161,16 @@ list: [ "ALL", "CLEAR",
|
||||
|
||||
```
|
||||
|
||||
### tree
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------------ | --------- | --------------- | ------ | ------ |
|
||||
| show | 是否展示为树状结构 | boolean | true / false | false |
|
||||
| showFolderIcon | 是否显示节点前的三角图标 | boolean | true / false | true |
|
||||
| showLine | 是否显示虚线 | boolean | true / false | true |
|
||||
| indent | 间距 | int | - | 20 |
|
||||
| expandedKeys | 默认展开的节点数组 | array | - | [ ] |
|
||||
|
||||
|
||||
### 全局方法
|
||||
|
||||
|
||||
@ -97,8 +97,8 @@ export default [{
|
||||
component: Component,
|
||||
children: [
|
||||
{ path: '/example-plugin/ZP01', name: '下拉自定义', component: importMd('/ZP01') },
|
||||
{ path: '/example-plugin/ZP02', name: '下拉树 EleTree', component: importMd('/ZP02') },
|
||||
// { path: '/example-plugin/ZP03', name: '下拉树 LayuiTree', component: importMd('/ZP03') },
|
||||
{ path: '/example-plugin/ZP02', name: '下拉树 Tree', component: importMd('/ZP02') },
|
||||
{ path: '/example-plugin/ZP03', name: '下拉日期多选', component: importMd('/ZP03') },
|
||||
]
|
||||
}, {
|
||||
path: '/question',
|
||||
@ -112,6 +112,7 @@ export default [{
|
||||
path: '/test',
|
||||
name: '测试',
|
||||
hidden: true,
|
||||
// hidden: false,
|
||||
component: importMd('/ZTEST'),
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "xm-select",
|
||||
"version": "1.0.13",
|
||||
"version": "1.1.0",
|
||||
"description": "始于Layui的select多选解决方案",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
@ -27,6 +27,7 @@
|
||||
"markdown-it-anchor": "^5.2.4",
|
||||
"markdown-it-chain": "^1.3.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"preact": "^10.0.5",
|
||||
"style-loader": "^0.23.1",
|
||||
"transliteration": "^2.1.7",
|
||||
"url-loader": "^2.1.0",
|
||||
|
||||
166
src/common/util.js
Normal file
166
src/common/util.js
Normal file
@ -0,0 +1,166 @@
|
||||
/**
|
||||
* 选中dom元素
|
||||
*/
|
||||
export function selector(el) {
|
||||
return document.querySelector(el);
|
||||
}
|
||||
|
||||
/**
|
||||
* 警告提示
|
||||
*/
|
||||
export function warn() {
|
||||
let arr = [];
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
arr.push(`${i + 1}. ${arguments[i]}`);
|
||||
}
|
||||
console.warn(arr.join('\n'));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 安全拷贝数据
|
||||
*/
|
||||
export function safety(data) {
|
||||
return JSON.parse(JSON.stringify(data));
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测对象是否为数组
|
||||
*/
|
||||
export function isArray(obj) {
|
||||
return Object.prototype.toString.call(obj) == "[object Array]";
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测对象是否为函数
|
||||
*/
|
||||
export function isFunction(obj) {
|
||||
return Object.prototype.toString.call(obj) == "[object Function]";
|
||||
}
|
||||
|
||||
/**
|
||||
* 转化为数字
|
||||
*/
|
||||
export function toNum(obj) {
|
||||
obj -= 0;
|
||||
isNaN(obj) && (obj = 0);
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单的深度合并
|
||||
*/
|
||||
export function deepMerge(obj1, obj2) {
|
||||
let key;
|
||||
for (key in obj2) {
|
||||
// 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
|
||||
// 如果obj2[key]没有值或者值不是对象，此时直接替换obj1[key]
|
||||
obj1[key] =
|
||||
obj1[key] &&
|
||||
obj1[key].toString() === "[object Object]" &&
|
||||
(obj2[key] && obj2[key].toString() === "[object Object]") ?
|
||||
deepMerge(obj1[key], obj2[key]) :
|
||||
(obj1[key] = obj2[key]);
|
||||
}
|
||||
return obj1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数组合并
|
||||
*/
|
||||
export function mergeArr(arr1, arr2, prop) {
|
||||
let value = prop.value;
|
||||
let result = [...arr2];
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
let item = arr1[i];
|
||||
if (!arr2.find(a => a[value] == item[value])) {
|
||||
result.push(item);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function watch(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
for (let key in data) {
|
||||
let value = data[key];
|
||||
Object.defineProperty(data, key, {
|
||||
configurable: false, // 该状态下的属性描述符不能被修改和删除
|
||||
enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
|
||||
get() {
|
||||
return value;
|
||||
},
|
||||
set(newVal) {
|
||||
if (newVal !== value) {
|
||||
resolve(key, newVal, value);
|
||||
value = newVal;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function checkUserAgent() {
|
||||
const ua = navigator.userAgent;
|
||||
if (ua.indexOf('Mac OS') != -1) {
|
||||
return 'mac';
|
||||
}
|
||||
return 'win';
|
||||
}
|
||||
|
||||
export function IEVersion() {
|
||||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
|
||||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
|
||||
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||||
if (isIE) {
|
||||
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
||||
reIE.test(userAgent);
|
||||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||||
if (fIEVersion == 7) {
|
||||
return 7;
|
||||
} else if (fIEVersion == 8) {
|
||||
return 8;
|
||||
} else if (fIEVersion == 9) {
|
||||
return 9;
|
||||
} else if (fIEVersion == 10) {
|
||||
return 10;
|
||||
} else {
|
||||
return 6; //IE版本<=7
|
||||
}
|
||||
} else if (isEdge) {
|
||||
return 'edge'; //edge
|
||||
} else if (isIE11) {
|
||||
return 11; //IE11
|
||||
} else {
|
||||
return -1; //不是ie浏览器
|
||||
}
|
||||
}
|
||||
|
||||
export function exchangeOptionsData(arr, { prop }){
|
||||
let { disabled, children, optgroup, value } = prop;
|
||||
let newArr = [], group;
|
||||
for(let i = 0; i < arr.length; i++){
|
||||
let item = arr[i];
|
||||
newArr.push(item);
|
||||
if(item[optgroup]){
|
||||
group = item;
|
||||
item[children] = [];
|
||||
continue;
|
||||
}
|
||||
let child = item[children];
|
||||
if(isArray(child)){
|
||||
group = null;
|
||||
item[optgroup] = true;
|
||||
child.forEach(c => newArr.push(c));
|
||||
continue;
|
||||
}
|
||||
if(group){
|
||||
group[children].push(item);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
@ -1,172 +0,0 @@
|
||||
/**
|
||||
* 选中dom元素
|
||||
*/
|
||||
export function selector(el) {
|
||||
return document.querySelector(el);
|
||||
}
|
||||
|
||||
/**
|
||||
* 警告提示
|
||||
*/
|
||||
export function warn() {
|
||||
let arr = [];
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
arr.push(`${i + 1}. ${arguments[i]}`);
|
||||
}
|
||||
console.warn(arr.join('\n'));
|
||||
}
|
||||
|
||||
/**
|
||||
* 全局监听点击事件
|
||||
*/
|
||||
export function listenerClose(data, handler) {
|
||||
window.addEventListener('click', (e) => handler(e));
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全拷贝数据
|
||||
*/
|
||||
export function safety(data) {
|
||||
return JSON.parse(JSON.stringify(data));
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测对象是否为数组
|
||||
*/
|
||||
export function isArray(obj) {
|
||||
return Object.prototype.toString.call(obj) == "[object Array]";
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测对象是否为函数
|
||||
*/
|
||||
export function isFunction(obj) {
|
||||
return Object.prototype.toString.call(obj) == "[object Function]";
|
||||
}
|
||||
|
||||
/**
|
||||
* 转化为数字
|
||||
*/
|
||||
export function toNum(obj) {
|
||||
obj -= 0;
|
||||
isNaN(obj) && (obj = 0);
|
||||
return obj;
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单的深度合并
|
||||
*/
|
||||
export function deepMerge(obj1, obj2) {
|
||||
let key;
|
||||
for (key in obj2) {
|
||||
// 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
|
||||
// 如果obj2[key]没有值或者值不是对象，此时直接替换obj1[key]
|
||||
obj1[key] =
|
||||
obj1[key] &&
|
||||
obj1[key].toString() === "[object Object]" &&
|
||||
(obj2[key] && obj2[key].toString() === "[object Object]") ?
|
||||
deepMerge(obj1[key], obj2[key]) :
|
||||
(obj1[key] = obj2[key]);
|
||||
}
|
||||
return obj1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数组合并
|
||||
*/
|
||||
export function mergeArr(arr1, arr2, prop) {
|
||||
let value = prop.value;
|
||||
let result = [...arr2];
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
let item = arr1[i];
|
||||
if (!arr2.find(a => a[value] == item[value])) {
|
||||
result.push(item);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function watch(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
for (let key in data) {
|
||||
let value = data[key];
|
||||
Object.defineProperty(data, key, {
|
||||
configurable: false, // 该状态下的属性描述符不能被修改和删除
|
||||
enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
|
||||
get() {
|
||||
return value;
|
||||
},
|
||||
set(newVal) {
|
||||
if (newVal !== value) {
|
||||
resolve(key, newVal, value);
|
||||
value = newVal;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function checkUserAgent() {
|
||||
const ua = navigator.userAgent;
|
||||
if (ua.indexOf('Mac OS') != -1) {
|
||||
return 'mac';
|
||||
}
|
||||
return 'win';
|
||||
}
|
||||
|
||||
export function IEVersion() {
|
||||
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
||||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
|
||||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
|
||||
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||||
if (isIE) {
|
||||
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
||||
reIE.test(userAgent);
|
||||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||||
if (fIEVersion == 7) {
|
||||
return 7;
|
||||
} else if (fIEVersion == 8) {
|
||||
return 8;
|
||||
} else if (fIEVersion == 9) {
|
||||
return 9;
|
||||
} else if (fIEVersion == 10) {
|
||||
return 10;
|
||||
} else {
|
||||
return 6; //IE版本<=7
|
||||
}
|
||||
} else if (isEdge) {
|
||||
return 'edge'; //edge
|
||||
} else if (isIE11) {
|
||||
return 11; //IE11
|
||||
} else {
|
||||
return -1; //不是ie浏览器
|
||||
}
|
||||
}
|
||||
|
||||
export function exchangeOptionsData(arr, { prop }){
|
||||
let { disabled, children, optgroup, value } = prop;
|
||||
let newArr = [], group;
|
||||
for(let i = 0; i < arr.length; i++){
|
||||
let item = arr[i];
|
||||
newArr.push(item);
|
||||
if(item[optgroup]){
|
||||
group = item;
|
||||
item[children] = [];
|
||||
continue;
|
||||
}
|
||||
let child = item[children];
|
||||
if(isArray(child)){
|
||||
group = null;
|
||||
item[optgroup] = true;
|
||||
child.forEach(c => newArr.push(c));
|
||||
continue;
|
||||
}
|
||||
if(group){
|
||||
group[children].push(item);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
export default {
|
||||
tips: 'please selected',
|
||||
empty: 'no data',
|
||||
searchTips: 'please search',
|
||||
toolbar: {
|
||||
ALL: 'select all',
|
||||
CLEAR: 'clear',
|
||||
REVERSE: 'invert select',
|
||||
SEARCH: 'search',
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
export default {
|
||||
tips: '请选择',
|
||||
empty: '暂无数据',
|
||||
searchTips: '请选择',
|
||||
toolbar: {
|
||||
ALL: '全选',
|
||||
CLEAR: '清空',
|
||||
REVERSE: '反选',
|
||||
SEARCH: '搜索',
|
||||
}
|
||||
}
|
||||
@ -1,179 +0,0 @@
|
||||
import { h, Component, render } from '@/components/preact'
|
||||
import Framework from '@/components/element/framework'
|
||||
import { selector, warn, listenerClose, isArray, deepMerge, exchangeOptionsData } from '@/components/common/util'
|
||||
import defaultOptions from '@/components/config/options'
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 保留初始化的数据
|
||||
*/
|
||||
const initData = {};
|
||||
const data = {};
|
||||
const onClose = (el) => Object.keys(data).filter(a => a != el).forEach(el => data[el].closed());
|
||||
listenerClose(data, onClose);
|
||||
|
||||
/**
|
||||
* 子组件集合
|
||||
*/
|
||||
const childs = {};
|
||||
|
||||
|
||||
/**
|
||||
* 对外提供的处理方法
|
||||
*/
|
||||
class xmOptions {
|
||||
|
||||
constructor(options) {
|
||||
//保留初始化时的数据
|
||||
initData[options.el] = options;
|
||||
//定义默认值
|
||||
this.options = defaultOptions(options.language);
|
||||
//开始渲染数据
|
||||
this.update(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新数据 + 重新渲染
|
||||
*/
|
||||
update(options = {}){
|
||||
//记录最新的配置项
|
||||
this.options = deepMerge(this.options, options);
|
||||
|
||||
//如果dom不存在, 则不进行渲染事项
|
||||
let dom = selector(this.options.el);
|
||||
if(!dom){
|
||||
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
||||
return ;
|
||||
}
|
||||
//判断data的数据类型
|
||||
let optionsData = this.options.data || [];
|
||||
if(typeof(optionsData) === 'function'){
|
||||
optionsData = optionsData();
|
||||
this.options.data = optionsData;
|
||||
}
|
||||
if(!isArray(optionsData)){
|
||||
warn(`data数据必须为数组类型, 不能是${ typeof(data) }类型`)
|
||||
return ;
|
||||
}
|
||||
//调整数据结构
|
||||
this.options.data = exchangeOptionsData(optionsData, this.options);
|
||||
|
||||
const onRef = (ref) => childs[this.options.el] = ref;
|
||||
|
||||
render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
|
||||
|
||||
//记录数据
|
||||
data[this.options.el] = this;
|
||||
//返回多选对象
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置多选, 回到初始化的状态
|
||||
*/
|
||||
reset(){
|
||||
let initVal = this.options;
|
||||
//设置options的默认数据
|
||||
this.options = defaultOptions(initVal.language);
|
||||
//更新渲染
|
||||
this.update({ ...initData[initVal.el]});
|
||||
//子组件初始化
|
||||
childs[this.options.el].reset(this.options, true);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主动打开多选
|
||||
*/
|
||||
opened(){
|
||||
let ref = childs[this.options.el];
|
||||
!ref.state.show && ref.onClick();
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主动关闭多选
|
||||
*/
|
||||
closed(){
|
||||
let ref = childs[this.options.el];
|
||||
ref.state.show && ref.onClick();
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选选中的数据
|
||||
*/
|
||||
getValue(type){
|
||||
let arr = deepMerge([], childs[this.options.el].state.sels);
|
||||
|
||||
if(type === 'name'){
|
||||
return arr.map(item => item[this.options.prop.name]);
|
||||
}else
|
||||
if(type === 'nameStr'){
|
||||
return arr.map(item => item[this.options.prop.name]).join(',');
|
||||
}else
|
||||
if(type === 'value'){
|
||||
return arr.map(item => item[this.options.prop.value]);
|
||||
}else
|
||||
if(type === 'valueStr'){
|
||||
return arr.map(item => item[this.options.prop.value]).join(',');
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置多选数据
|
||||
*/
|
||||
setValue(sels, show, listenOn = false){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
childs[this.options.el].value(sels, show, listenOn);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 追加赋值
|
||||
*/
|
||||
append(sels){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
childs[this.options.el].append(sels);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除赋值
|
||||
*/
|
||||
delete(sels){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
childs[this.options.el].del(sels);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 闪烁警告边框
|
||||
*/
|
||||
warning(color, sustain = false){
|
||||
let showColor = color || this.options.theme.maxColor;
|
||||
|
||||
sustain === true ? (
|
||||
childs[this.options.el].base.style.borderColor = showColor
|
||||
) : (
|
||||
childs[this.options.el].updateBorderColor(showColor)
|
||||
)
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default xmOptions;
|
||||
@ -1,283 +0,0 @@
|
||||
import { h, Component, render } from '@/components/preact'
|
||||
import { checkUserAgent, isFunction, toNum, mergeArr } from '@/components/common/util'
|
||||
|
||||
//渲染类
|
||||
import Tips from './tips';
|
||||
import Label from './label';
|
||||
import General from './model/general';
|
||||
import Custom from './model/custom';
|
||||
|
||||
/**
|
||||
* 框架渲染类, 渲染基础的外边框 + 属性变化监听
|
||||
*/
|
||||
class Framework extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
//初始化多选数据
|
||||
this.reset(this.props);
|
||||
//回传子组件
|
||||
this.props.onRef(this);
|
||||
this.bodyView = null;
|
||||
}
|
||||
|
||||
reset(props, refresh = false){
|
||||
//用于多选上限的边框颜色变化
|
||||
this.updateBorderColor('');
|
||||
let old = this.state.data;
|
||||
this.resetDate(props.data);
|
||||
(JSON.stringify(props.data) !== JSON.stringify(old) || refresh) && this.value(props.initValue ? props.initValue : this.findValue(this.state.data), !!this.state.show);
|
||||
}
|
||||
|
||||
findValue(data){
|
||||
const { selected } = this.props.prop;
|
||||
return data.filter(item => item[selected] === true);
|
||||
}
|
||||
|
||||
resetSelectValue(sels = [], change = [], isAdd, listenOn = true){
|
||||
let on = this.props.on;
|
||||
if(isFunction(on) && this.prepare && listenOn){
|
||||
on({ arr: sels, change, isAdd });
|
||||
}
|
||||
this.setState({ sels });
|
||||
}
|
||||
|
||||
resetDate(data = []){
|
||||
this.setState({ data });
|
||||
}
|
||||
|
||||
value(sels, show, listenOn){
|
||||
if(show !== false && show !== true){
|
||||
show = this.state.show;
|
||||
}
|
||||
let changeData = this.exchangeValue(sels);
|
||||
this.resetSelectValue(changeData, changeData, true, listenOn);
|
||||
this.setState({ show })
|
||||
}
|
||||
|
||||
exchangeValue(sels){
|
||||
const { optgroup, value } = this.props.prop;
|
||||
let data = this.state.data;
|
||||
let list = data.filter(item => !item[optgroup]);
|
||||
return sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a);
|
||||
}
|
||||
|
||||
append(arr){
|
||||
let changeData = this.exchangeValue(arr);
|
||||
this.resetSelectValue(mergeArr(changeData, this.state.sels, this.props.prop), changeData, true);
|
||||
}
|
||||
|
||||
del(arr){
|
||||
let value = this.props.prop.value;
|
||||
let sels = this.state.sels;
|
||||
arr = this.exchangeValue(arr);
|
||||
arr.forEach(v => {
|
||||
let index = sels.findIndex(item => item[value] === v[value]);
|
||||
if(index != -1){
|
||||
sels.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.resetSelectValue(sels, arr, false);
|
||||
}
|
||||
|
||||
auto(arr){
|
||||
let value = this.props.prop.value;
|
||||
let sels = arr.filter(v => this.state.sels.findIndex(item => item[value] === v[value]) != -1);
|
||||
sels.length == arr.length ? this.del(arr) : this.append(arr);
|
||||
}
|
||||
|
||||
updateBorderColor(tmpColor){
|
||||
this.setState({ tmpColor });
|
||||
}
|
||||
|
||||
onReset(data, type){
|
||||
//重置数据
|
||||
if(type === 'data'){
|
||||
let changeData = this.findValue(data);
|
||||
this.resetSelectValue(mergeArr(changeData, this.state.sels, this.props.prop), changeData, true);
|
||||
this.setState({ data });
|
||||
}else
|
||||
//重置选中数据
|
||||
if(type === 'sels'){
|
||||
this.resetSelectValue(data, data, true);
|
||||
}else
|
||||
//追加数据
|
||||
if(type === 'append'){
|
||||
this.append(data);
|
||||
}else
|
||||
//清理数据
|
||||
if(type === 'delete'){
|
||||
this.del(data);
|
||||
}else
|
||||
//自动判断模式
|
||||
if(type === 'auto'){
|
||||
this.auto(data);
|
||||
}
|
||||
}
|
||||
|
||||
onClick(e){
|
||||
if(this.props.disabled){
|
||||
this.state.show !== false && this.setState({ show: false });
|
||||
return ;
|
||||
}
|
||||
|
||||
let show = !this.state.show;
|
||||
|
||||
if(show){
|
||||
if(this.props.show && this.props.show() == false){
|
||||
return;
|
||||
}
|
||||
//事件互斥原则, 打开一个多选, 关闭其他所有多选
|
||||
this.props.onClose(this.props.el);
|
||||
|
||||
}else{
|
||||
if(this.props.hide && this.props.hide() == false){
|
||||
return;
|
||||
}
|
||||
//如果产生滚动条, 关闭下拉后回到顶部
|
||||
this.bodyView.scroll && this.bodyView.scroll(0, 0);
|
||||
}
|
||||
|
||||
this.setState({ show });
|
||||
|
||||
//阻止其他绑定事件的冒泡
|
||||
e && e.stopPropagation();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(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';
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.prepare = true;
|
||||
}
|
||||
|
||||
render(config, { sels, show }) {
|
||||
const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config;
|
||||
const borderStyle = { borderColor: theme.color };
|
||||
//最外层边框的属性
|
||||
const xmSelectProps = {
|
||||
style: {
|
||||
...style,
|
||||
...(show ? borderStyle : {})
|
||||
},
|
||||
onClick: this.onClick.bind(this),
|
||||
ua: checkUserAgent(),
|
||||
size: config.size,
|
||||
}
|
||||
if(this.state.tmpColor){
|
||||
xmSelectProps.style.borderColor = this.state.tmpColor;
|
||||
setTimeout(() => {
|
||||
xmSelectProps.style.borderColor = '';
|
||||
this.updateBorderColor('')
|
||||
}, 300);
|
||||
}
|
||||
if(config.disabled){
|
||||
show = false;
|
||||
}
|
||||
|
||||
//右边下拉箭头的变化class
|
||||
const iconClass = show ? 'xm-icon xm-icon-expand' : 'xm-icon';
|
||||
//提示信息的属性
|
||||
const tipsProps = {
|
||||
tips,
|
||||
//没有已选择数据, 则显示提示
|
||||
show: !sels.length
|
||||
}
|
||||
//普通多选数据
|
||||
const valueProp = prop.value;
|
||||
|
||||
//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
|
||||
const ck = (item, selected, disabled, mandatoryDelete) => {
|
||||
//如果是禁用状态, 不能进行操作
|
||||
if(disabled) return;
|
||||
|
||||
//如果现在是选中状态
|
||||
if(selected && (!repeat || mandatoryDelete)){
|
||||
let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
|
||||
if(index != -1){
|
||||
sels.splice(index, 1);
|
||||
this.resetSelectValue(sels, [item], !selected);
|
||||
}
|
||||
}else{
|
||||
//查看是否设置了多选上限
|
||||
let maxCount = toNum(max);
|
||||
if(maxCount > 0 && sels.length >= maxCount){
|
||||
this.updateBorderColor(theme.maxColor);
|
||||
//查看是否需要回调
|
||||
maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
|
||||
return ;
|
||||
}
|
||||
|
||||
//如果是单选模式
|
||||
if(radio){
|
||||
this.resetSelectValue([item], [item], !selected);
|
||||
}else{
|
||||
this.resetSelectValue([...sels, item], [item], !selected);
|
||||
}
|
||||
}
|
||||
|
||||
//检查是否为选择即关闭状态, 强制删除情况下不做处理
|
||||
clickClose && !mandatoryDelete && this.onClick();
|
||||
};
|
||||
|
||||
const select = (
|
||||
<input class="xm-select-default" name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
|
||||
)
|
||||
|
||||
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', show ? '' : 'dis'].join(' ');
|
||||
|
||||
return (
|
||||
<xm-select { ...xmSelectProps } >
|
||||
{ select }
|
||||
<i class={ iconClass } />
|
||||
<Tips { ...tipsProps } />
|
||||
<Label { ...labelProps } />
|
||||
<div class={ bodyClass } ref={ ref => this.bodyView = ref}>
|
||||
{ config.content ? (
|
||||
<Custom content={ config.content } height={ config.height } />
|
||||
) : (
|
||||
<General { ...bodyProps } />
|
||||
) }
|
||||
</div>
|
||||
{ config.disabled && <div class="xm-select-disabled"></div> }
|
||||
</xm-select>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Framework;
|
||||
@ -1,32 +0,0 @@
|
||||
import { h, Component, render } from '@/components/preact'
|
||||
|
||||
/**
|
||||
* 默认提示
|
||||
*/
|
||||
class Custom extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
}
|
||||
|
||||
blockClick(e){
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
shouldComponentUpdate(){
|
||||
return !this.prepare;
|
||||
}
|
||||
|
||||
render(config) {
|
||||
this.prepare = true;
|
||||
return (
|
||||
<div onClick={ this.blockClick } class="xm-body-custom" >
|
||||
<div class="scroll-body" style={ {maxHeight: config.height} }>
|
||||
<div style="margin: 5px 0" dangerouslySetInnerHTML={{ __html: config.content }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Custom;
|
||||
@ -1,412 +0,0 @@
|
||||
import { h, Component, render } from '@/components/preact'
|
||||
import { isFunction, isArray, safety, deepMerge, mergeArr, IEVersion } from '@/components/common/util'
|
||||
|
||||
/**
|
||||
* 普通的多选渲染
|
||||
*/
|
||||
class General extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
|
||||
this.setState({
|
||||
filterValue: '',
|
||||
remote: true,
|
||||
loading: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
this.searchCid = 0;
|
||||
this.inputOver = true;
|
||||
this.__value = '';
|
||||
this.dynamicInput = false;
|
||||
}
|
||||
|
||||
optionClick(item, selected, disabled, e){
|
||||
this.props.ck(item, selected, disabled);
|
||||
//阻止父组件上的事件冒泡
|
||||
this.blockClick(e);
|
||||
}
|
||||
|
||||
groupClick(item, e){
|
||||
const { click, children, disabled } = this.props.prop;
|
||||
let m = item[click], arr = item[children].filter(opt => !opt[disabled]);
|
||||
|
||||
if(m === 'SELECT'){
|
||||
this.props.onReset(arr, 'append');
|
||||
}else if(m === 'CLEAR'){
|
||||
this.props.onReset(arr, 'delete');
|
||||
}else if(m === 'AUTO'){
|
||||
this.props.onReset(arr, 'auto');
|
||||
}else if(isFunction(m)){
|
||||
m(item);
|
||||
}
|
||||
//阻止父组件上的事件冒泡
|
||||
this.blockClick(e);
|
||||
}
|
||||
|
||||
blockClick(e){
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
pagePrevClick(e){
|
||||
let index = this.state.pageIndex;
|
||||
if(index <= 1){
|
||||
return ;
|
||||
}
|
||||
this.changePageIndex(index - 1);
|
||||
}
|
||||
pageNextClick(e, size){
|
||||
let index = this.state.pageIndex;
|
||||
if(index >= size){
|
||||
return ;
|
||||
}
|
||||
this.changePageIndex(index + 1);
|
||||
}
|
||||
|
||||
changePageIndex(index){
|
||||
this.setState({
|
||||
pageIndex: index
|
||||
})
|
||||
}
|
||||
|
||||
searchInput(e){
|
||||
let v = e.target.value;
|
||||
|
||||
if(v === this.__value){
|
||||
return ;
|
||||
}
|
||||
|
||||
clearTimeout(this.searchCid);
|
||||
if(this.inputOver){
|
||||
//保证输入框内的值是实时的
|
||||
this.__value = v;
|
||||
|
||||
//让搜索变成异步的
|
||||
this.searchCid = setTimeout(() => {
|
||||
this.callback = true;
|
||||
this.setState({ filterValue: this.__value, remote: true })
|
||||
}, this.props.delay);
|
||||
}
|
||||
}
|
||||
|
||||
focus(){
|
||||
this.searchInputRef && this.searchInputRef.focus();
|
||||
}
|
||||
|
||||
blur(){
|
||||
this.searchInputRef && this.searchInputRef.blur();
|
||||
}
|
||||
|
||||
handleComposition(e){
|
||||
let type = e.type;
|
||||
|
||||
if(type === 'compositionstart'){
|
||||
this.inputOver = false;
|
||||
clearTimeout(this.searchCid);
|
||||
}else if(type === 'compositionend'){
|
||||
this.inputOver = true;
|
||||
this.searchInput(e);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props){
|
||||
if(this.props.show != props.show){
|
||||
if(!props.show){
|
||||
//清空输入框的值
|
||||
this.setState({ filterValue: '' });
|
||||
this.__value = '';
|
||||
this.searchInputRef && (this.searchInputRef.value = '');
|
||||
}else{
|
||||
//聚焦输入框
|
||||
setTimeout(() => this.focus(), 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
if(this.callback){
|
||||
this.callback = false;
|
||||
|
||||
let done = this.props.filterDone;
|
||||
if(isFunction(done)){
|
||||
done(this.state.filterValue, this.tempData || []);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(config) {
|
||||
|
||||
let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create } = config
|
||||
|
||||
const { name, value, disabled, children, optgroup } = prop;
|
||||
|
||||
let arr = deepMerge([], data), creator;
|
||||
//是否开启了搜索
|
||||
if(filterable){
|
||||
if(remoteSearch){//是否进行远程搜索
|
||||
if(this.state.remote){
|
||||
this.callback = false;
|
||||
this.setState({ loading: true, remote: false });
|
||||
//让输入框失去焦点
|
||||
this.blur();
|
||||
remoteMethod(this.state.filterValue, result => {
|
||||
//回调后可以重新聚焦
|
||||
this.focus();
|
||||
|
||||
this.callback = true;
|
||||
this.setState({ loading: false });
|
||||
this.props.onReset(result, 'data');
|
||||
}, this.props.show);
|
||||
}
|
||||
}else{
|
||||
const filterData = (item, index) => {
|
||||
const isGroup = item[optgroup];
|
||||
if(isGroup){
|
||||
delete item.__del;
|
||||
return true;
|
||||
}
|
||||
return filterMethod(this.state.filterValue, item, index, prop);
|
||||
}
|
||||
arr = arr.filter(filterData);
|
||||
|
||||
for(let i = 0; i < arr.length - 1; i++){
|
||||
let a = arr[i];
|
||||
let b = arr[i + 1];
|
||||
if(a[optgroup] && b[optgroup]){
|
||||
arr[i].__del = true;
|
||||
}
|
||||
}
|
||||
if(arr.length && arr[arr.length - 1][optgroup]){
|
||||
arr[arr.length - 1].__del = true;
|
||||
}
|
||||
arr = arr.filter(item => !item.__del);
|
||||
//创建条目
|
||||
creator = this.state.filterValue && isFunction(create);
|
||||
}
|
||||
}
|
||||
|
||||
const search = (
|
||||
<div class='xm-search'>
|
||||
<i class="xm-iconfont xm-icon-sousuo"></i>
|
||||
<input type="text" class="xm-input xm-search-input" placeholder={ searchTips }
|
||||
ref={ input => this.searchInputRef = input }
|
||||
onClick={ this.blockClick.bind(this) }
|
||||
onInput={ this.searchInput.bind(this) }
|
||||
onCompositionStart={ this.handleComposition.bind(this) }
|
||||
onCompositionUpdate={ this.handleComposition.bind(this) }
|
||||
onCompositionEnd={ this.handleComposition.bind(this) }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
//如果是分组模式, 要分页先去除分组, 然后在计算分页, 最后再加上分组
|
||||
let groups = [], groupInfo = {};
|
||||
groups = arr.filter(item => item[optgroup]).forEach(g => {
|
||||
g[children].forEach(item => groupInfo[item[value]] = g);
|
||||
});
|
||||
arr = arr.filter(item => !item[optgroup]);
|
||||
|
||||
let paging = '';
|
||||
if(config.paging){
|
||||
//计算当前分页的总页码
|
||||
let size = Math.floor((arr.length - 1) / config.pageSize) + 1;
|
||||
size <= 0 && (size = 1);
|
||||
|
||||
let pageIndex = this.state.pageIndex;
|
||||
|
||||
//如果当前页码大于总页码, 重置一下
|
||||
if(pageIndex > size){
|
||||
pageIndex = size;
|
||||
}
|
||||
|
||||
//如有总页码>1, 但是因为搜索造成的页码=0的情况
|
||||
if(size > 0 && pageIndex <= 0){
|
||||
pageIndex = 1;
|
||||
}
|
||||
|
||||
//实现简单的物理分页
|
||||
let start = (pageIndex - 1) * config.pageSize;
|
||||
let end = start + config.pageSize;
|
||||
arr = arr.slice(start, end);
|
||||
|
||||
const disabledStyle = {cursor: 'no-drop', color: '#d2d2d2'};
|
||||
|
||||
let prevStyle = {}, nextStyle = {};
|
||||
pageIndex <= 1 && (prevStyle = disabledStyle);
|
||||
pageIndex == size && (nextStyle = disabledStyle);
|
||||
|
||||
// const defaultCurrClass = {
|
||||
// position: 'relative',
|
||||
// borderRadius: '1px',
|
||||
// }
|
||||
// {
|
||||
// ''.padEnd(size, ' ').split('').map((s, i) => (
|
||||
// <span style={
|
||||
// this.state.pageIndex == i + 1 ? {
|
||||
// ...defaultCurrClass,
|
||||
// backgroundColor: theme.color,
|
||||
// borderColor: theme.color,
|
||||
// color: '#FFF',
|
||||
// } : defaultCurrClass
|
||||
// }>{ i + 1 }</span>
|
||||
// ))
|
||||
// }
|
||||
|
||||
this.state.pageIndex !== pageIndex && this.changePageIndex(pageIndex);
|
||||
|
||||
paging = (
|
||||
<div class='xm-paging'>
|
||||
<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this) }>上一页</span>
|
||||
<span>{ this.state.pageIndex } / { size }</span>
|
||||
<span style={ nextStyle } onClick={ e => this.pageNextClick.bind(this, e, size)() }>下一页</span>
|
||||
</div>
|
||||
)
|
||||
}else{
|
||||
//检查是否设置了显示数量上限
|
||||
if(config.showCount > 0){
|
||||
arr = arr.slice(0, config.showCount);
|
||||
}
|
||||
}
|
||||
|
||||
let newArr = [], group;
|
||||
arr.forEach(item => {
|
||||
let g = groupInfo[item[value]];
|
||||
if(g != group){
|
||||
group = g;
|
||||
newArr.push(group);
|
||||
}
|
||||
newArr.push(item);
|
||||
});
|
||||
arr = newArr;
|
||||
|
||||
//查看是否创建了条目
|
||||
if(creator){
|
||||
creator = create(this.state.filterValue, deepMerge([], arr));
|
||||
creator && arr.splice(0, 0, creator);
|
||||
}
|
||||
|
||||
let safetyArr = deepMerge([], arr);
|
||||
this.tempData = safetyArr;
|
||||
|
||||
//工具条操作
|
||||
const toolbar = (
|
||||
<div class='xm-toolbar'>
|
||||
{ config.toolbar.list.map(tool => {
|
||||
const toolClass = 'toolbar-tag';
|
||||
const toolStyle = {};
|
||||
|
||||
let info, name = config.languageProp.toolbar[tool];
|
||||
if(tool === 'ALL'){
|
||||
info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
|
||||
const { optgroup, disabled } = prop;
|
||||
const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
|
||||
this.props.onReset(mergeArr(list, sels, prop), 'sels');
|
||||
} };
|
||||
}else if(tool === 'CLEAR'){
|
||||
info = { icon: 'xm-iconfont xm-icon-qingkong', name, method: (pageData) => {
|
||||
this.props.onReset(sels.filter(item => item[prop.disabled]), 'sels');
|
||||
} };
|
||||
}else if(tool === 'REVERSE'){
|
||||
info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => {
|
||||
const { optgroup, disabled } = prop;
|
||||
const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
|
||||
|
||||
let selectedList = [];
|
||||
sels.forEach(item => {
|
||||
let index = list.findIndex(pageItem => pageItem[value] === item[value]);
|
||||
if(index == -1){
|
||||
selectedList.push(item);
|
||||
}else{
|
||||
list.splice(index, 1);
|
||||
}
|
||||
})
|
||||
this.props.onReset(mergeArr(list, selectedList, prop), 'sels');
|
||||
} };
|
||||
}else if(tool === 'SEARCH'){
|
||||
toolStyle.color = theme.color;
|
||||
info = { icon: 'xm-iconfont xm-icon-sousuo', name, method: (pageData) => {
|
||||
|
||||
} };
|
||||
}else {
|
||||
info = tool
|
||||
}
|
||||
|
||||
const hoverChange = e => {
|
||||
if(e.type === 'mouseenter') e.target.style.color = theme.color;
|
||||
if(e.type === 'mouseleave') e.target.style.color = '';
|
||||
}
|
||||
|
||||
return (<div class={ toolClass } style={ toolStyle } onClick={ () => {
|
||||
isFunction(info.method) && info.method(safetyArr)
|
||||
} } onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }>
|
||||
{ config.toolbar.showIcon && <i class={ info.icon }></i> }
|
||||
<span>{ info.name }</span>
|
||||
</div>)
|
||||
}).filter(a => a) }
|
||||
</div>
|
||||
)
|
||||
|
||||
const showIcon = config.model.icon != 'hidden';
|
||||
const renderItem = item => {
|
||||
const selected = !!sels.find(sel => sel[value] == item[value])
|
||||
const iconStyle = selected ? {
|
||||
color: theme.color,
|
||||
border: 'none'
|
||||
} : {
|
||||
borderColor: theme.color,
|
||||
};
|
||||
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 } 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>
|
||||
)
|
||||
}
|
||||
|
||||
const renderGroup = item => {
|
||||
const isGroup = item[optgroup];
|
||||
if(isGroup){//分组模式
|
||||
return (
|
||||
<div class="xm-group">
|
||||
<div class="xm-group-item" onClick={ this.groupClick.bind(this, item) }>{ item[name] }</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return renderItem(item);
|
||||
}
|
||||
|
||||
arr = arr.map(renderGroup);
|
||||
|
||||
if(!arr.length){
|
||||
//查看无数据情况下是否显示分页
|
||||
!config.pageEmptyShow && (paging = '');
|
||||
arr.push(<div class="xm-select-empty">{ empty }</div>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div onClick={ this.blockClick }>
|
||||
<div>
|
||||
{ config.toolbar.show && toolbar }
|
||||
{ filterable && search }
|
||||
<div class="scroll-body" style={ {maxHeight: config.height} }>{ arr }</div>
|
||||
{ config.paging && paging }
|
||||
</div>
|
||||
{ this.state.loading && <div class="loading" >
|
||||
<span class="loader"></span>
|
||||
</div> }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default General;
|
||||
@ -1,20 +0,0 @@
|
||||
import { h, Component, render } from '@/components/preact'
|
||||
|
||||
/**
|
||||
* 默认提示
|
||||
*/
|
||||
class Tips extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
}
|
||||
|
||||
render({ tips, show }) {
|
||||
const tipsClass = show ? 'xm-tips' : 'xm-tips dis';
|
||||
return (
|
||||
<div class={ tipsClass }>{ tips }</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Tips;
|
||||
384
src/components/framework/index.js
Normal file
384
src/components/framework/index.js
Normal file
@ -0,0 +1,384 @@
|
||||
import { h, Component, render } from 'preact'
|
||||
import { datas, childData } from '@/index.js';
|
||||
import { checkUserAgent, isFunction, isArray, toNum, mergeArr } from '@/common/util'
|
||||
|
||||
import Label from '../label';
|
||||
import General from '../plugin/general';
|
||||
import Custom from '../plugin/custom';
|
||||
import Tree from '../plugin/tree';
|
||||
|
||||
/**
|
||||
* 框架渲染类, 渲染基础的外边框 + 属性变化监听
|
||||
*/
|
||||
class Framework extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
//保留对象引用
|
||||
childData[options.el] = this;
|
||||
//初始化state数据
|
||||
this.state = this.initState();
|
||||
this.bodyView = null;
|
||||
}
|
||||
|
||||
initState(){
|
||||
return {
|
||||
data: [],
|
||||
dataObj: {},
|
||||
flatData: [],
|
||||
sels: [],
|
||||
show: false,
|
||||
tmpColor: '',
|
||||
}
|
||||
}
|
||||
|
||||
init(props, refresh){
|
||||
let { data } = props;
|
||||
|
||||
//如果新数据和旧数据不同 或者 强制刷新 才进行数据处理
|
||||
if(refresh){
|
||||
let dataObj = {};
|
||||
let flatData = [];
|
||||
this.load(data, dataObj, flatData);
|
||||
let sels = props.initValue ? this.exchangeValue(props.initValue) : Object.values(dataObj).filter(item => item[props.prop.selected] === true).filter(item => item[this.props.prop.optgroup] !== true)
|
||||
this.setState({ sels, dataObj, flatData });
|
||||
}
|
||||
|
||||
this.setState({ data });
|
||||
}
|
||||
|
||||
exchangeValue(arr){
|
||||
return arr.map(sel => typeof sel === 'object' ? sel : this.state.dataObj[sel]).filter(a => a).filter(item => item[this.props.prop.optgroup] !== true)
|
||||
}
|
||||
|
||||
value(sels, show, listenOn){
|
||||
if(show !== false && show !== true){
|
||||
show = this.state.show;
|
||||
}
|
||||
let changeData = this.exchangeValue(sels);
|
||||
this.resetSelectValue(changeData, changeData, true, listenOn);
|
||||
this.setState({ show })
|
||||
}
|
||||
|
||||
load(data, dataObj, flatData, parent){
|
||||
const { children, optgroup, value, selected, disabled } = this.props.prop;
|
||||
data.forEach(item => {
|
||||
//数据提取/处理
|
||||
item.__node = { parent }
|
||||
dataObj[item[value]] = item;
|
||||
flatData.push(item);
|
||||
//遍历子级数据
|
||||
let child = item[children];
|
||||
if(child && isArray(child)){
|
||||
item[optgroup] = true;
|
||||
this.load(child, dataObj, flatData, item);
|
||||
|
||||
if(item[selected] === true){
|
||||
delete item[selected]
|
||||
child.forEach(c => c[selected] = true)
|
||||
}
|
||||
if(item[disabled] === true){
|
||||
delete item[disabled]
|
||||
child.forEach(c => c[disabled] = true)
|
||||
}
|
||||
|
||||
let len = child.length;
|
||||
if(len > 0){
|
||||
//检查子节点的数据是否都被选中
|
||||
let slen = child.filter(i => i[selected] === true || i.__node.selected === true).length;
|
||||
item.__node.selected = slen === len;
|
||||
item.__node.half = slen > 0 && slen < len;
|
||||
item.__node.disabled = child.filter(i => i[disabled] === true || i.__node.disabled === true).length === len;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//重置已选择数据
|
||||
resetSelectValue(sels = [], change = [], isAdd, listenOn = true){
|
||||
let on = this.props.on;
|
||||
if(isFunction(on) && this.prepare && listenOn){
|
||||
on({ arr: sels, change, isAdd });
|
||||
}
|
||||
this.setState({ sels });
|
||||
}
|
||||
|
||||
updateBorderColor(tmpColor){
|
||||
this.setState({ tmpColor });
|
||||
}
|
||||
|
||||
treeHandler(sels, parent, change, type){
|
||||
const { value, selected, disabled, children, optgroup } = this.props.prop;
|
||||
let child = parent[children];
|
||||
child.filter(item => !(item[disabled] || item.__node.disabled)).forEach(item => {
|
||||
if(item[optgroup]){
|
||||
this.treeHandler(sels, item, change, type);
|
||||
}else{
|
||||
let index = sels.findIndex(sel => sel[value] == item[value])
|
||||
if(type === 'del'){
|
||||
if(index != -1){
|
||||
sels.splice(index, 1);
|
||||
change.push(item);
|
||||
}
|
||||
}else if(type === 'half' || type === 'add'){
|
||||
if(index == -1){
|
||||
sels.push(item);
|
||||
change.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
let len = child.length;
|
||||
let slen = child.filter(i => sels.findIndex(sel => sel[value] === i[value]) !== -1 || i.__node.selected === true).length;
|
||||
parent.__node.selected = slen === len;
|
||||
parent.__node.half = slen > 0 && slen < len;
|
||||
}
|
||||
|
||||
//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
|
||||
itemClick(item, itemSelected, itemDisabled, mandatoryDelete){
|
||||
|
||||
const { theme, prop, radio, repeat, clickClose, max, maxMethod } = this.props
|
||||
let { sels } = this.state
|
||||
const { value, selected, disabled, children, optgroup } = prop
|
||||
|
||||
//如果是禁用状态, 不能进行操作
|
||||
if(itemDisabled) return;
|
||||
|
||||
if(item[optgroup]){
|
||||
let child = item[children], change = [], isAdd = true;
|
||||
if(item.__node.selected){
|
||||
this.treeHandler(sels, item, change, 'del');
|
||||
isAdd = false;
|
||||
}else if(item.__node.half){
|
||||
this.treeHandler(sels, item, change, 'half');
|
||||
}else{
|
||||
this.treeHandler(sels, item, change, 'add');
|
||||
}
|
||||
this.resetSelectValue(sels, change, isAdd);
|
||||
this.setState({ data: this.state.data })
|
||||
}else{
|
||||
//如果现在是选中状态
|
||||
if(itemSelected && (!repeat || mandatoryDelete)){
|
||||
let index = sels.findIndex(sel => sel[value] == item[value])
|
||||
if(index != -1){
|
||||
sels.splice(index, 1);
|
||||
this.resetSelectValue(sels, [item], !itemSelected);
|
||||
}
|
||||
}else{
|
||||
//查看是否设置了多选上限
|
||||
let maxCount = toNum(max);
|
||||
if(maxCount > 0 && sels.length >= maxCount){
|
||||
this.updateBorderColor(theme.maxColor);
|
||||
//查看是否需要回调
|
||||
maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
|
||||
return ;
|
||||
}
|
||||
|
||||
//如果是单选模式
|
||||
if(radio){
|
||||
sels = [item];
|
||||
}else{
|
||||
sels = [...sels, item]
|
||||
}
|
||||
this.resetSelectValue(sels, [item], !itemSelected);
|
||||
}
|
||||
let parent = item.__node.parent;
|
||||
if(parent){
|
||||
while(parent){
|
||||
let child = parent[children], len = child.length;
|
||||
let slen = child.filter(i => sels.findIndex(sel => sel[value] === i[value]) !== -1 || i.__node.selected === true).length;
|
||||
parent.__node.selected = slen === len;
|
||||
parent.__node.half = slen > 0 && slen < len;
|
||||
parent = parent.__node.parent;
|
||||
}
|
||||
this.setState({ data: this.state.data })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//检查是否为选择即关闭状态, 强制删除情况下不做处理
|
||||
clickClose && !mandatoryDelete && this.onClick();
|
||||
};
|
||||
|
||||
//select框被点击
|
||||
onClick(e){
|
||||
if(this.props.disabled){
|
||||
this.state.show !== false && this.setState({ show: false });
|
||||
return ;
|
||||
}
|
||||
|
||||
let show = !this.state.show;
|
||||
if(show){
|
||||
if(this.props.show && this.props.show() == false){
|
||||
return;
|
||||
}
|
||||
//事件互斥原则, 打开一个多选, 关闭其他所有多选
|
||||
Object.keys(datas).filter(key => key != this.props.el).forEach(el => datas[el].closed())
|
||||
}else{
|
||||
if(this.props.hide && this.props.hide() == false){
|
||||
return;
|
||||
}
|
||||
//如果产生滚动条, 关闭下拉后回到顶部
|
||||
this.bodyView.scroll && this.bodyView.scroll(0, 0);
|
||||
}
|
||||
|
||||
this.setState({ show });
|
||||
|
||||
//阻止其他绑定事件的冒泡
|
||||
e && e.stopPropagation();
|
||||
}
|
||||
|
||||
onReset(data, type){
|
||||
//重置数据
|
||||
if(type === 'data'){
|
||||
let changeData = data.filter(item => item[this.props.prop.selected] === true);
|
||||
this.resetSelectValue(mergeArr(changeData, this.state.sels, this.props.prop), changeData, true);
|
||||
|
||||
let dataObj = {};
|
||||
let flatData = [];
|
||||
this.load(data, dataObj, flatData);
|
||||
this.setState({ data, flatData });
|
||||
}else
|
||||
//重置选中数据
|
||||
if(type === 'sels'){
|
||||
this.resetSelectValue(data, data, true);
|
||||
}else
|
||||
//追加数据
|
||||
if(type === 'append'){
|
||||
this.append(data);
|
||||
}else
|
||||
//清理数据
|
||||
if(type === 'delete'){
|
||||
this.del(data);
|
||||
}else
|
||||
//自动判断模式
|
||||
if(type === 'auto'){
|
||||
this.auto(data);
|
||||
}
|
||||
}
|
||||
|
||||
append(arr){
|
||||
let changeData = this.exchangeValue(arr);
|
||||
this.resetSelectValue(mergeArr(changeData, this.state.sels, this.props.prop), changeData, true);
|
||||
}
|
||||
|
||||
del(arr){
|
||||
let value = this.props.prop.value;
|
||||
let sels = this.state.sels;
|
||||
arr = this.exchangeValue(arr);
|
||||
arr.forEach(v => {
|
||||
let index = sels.findIndex(item => item[value] === v[value]);
|
||||
if(index != -1){
|
||||
sels.splice(index, 1);
|
||||
}
|
||||
});
|
||||
this.resetSelectValue(sels, arr, false);
|
||||
}
|
||||
|
||||
auto(arr){
|
||||
let value = this.props.prop.value;
|
||||
let sels = arr.filter(v => this.state.sels.findIndex(item => item[value] === v[value]) != -1);
|
||||
sels.length == arr.length ? this.del(arr) : this.append(arr);
|
||||
}
|
||||
|
||||
//组件将要接收新属性
|
||||
componentWillReceiveProps(props){
|
||||
this.init(props, props.updateData);
|
||||
}
|
||||
|
||||
//组件将要被挂载
|
||||
componentWillMount(){
|
||||
this.init(this.props, true);
|
||||
}
|
||||
|
||||
render(config, state) {
|
||||
|
||||
const { theme, prop, radio, repeat, clickClose, on, max, maxMethod, content, disabled, tree } = config;
|
||||
const borderStyle = { borderColor: theme.color };
|
||||
let { data, dataObj, flatData, sels, show, tmpColor } = state;
|
||||
|
||||
//组件为禁用状态
|
||||
if(disabled){
|
||||
show = false;
|
||||
}
|
||||
|
||||
//最外层边框的属性
|
||||
const xmSelectProps = {
|
||||
style: { ...config.style, ...(show ? borderStyle : {}) },
|
||||
onClick: this.onClick.bind(this),
|
||||
ua: checkUserAgent(),
|
||||
size: config.size,
|
||||
}
|
||||
if(tmpColor){
|
||||
xmSelectProps.style.borderColor = tmpColor;
|
||||
setTimeout(() => {
|
||||
xmSelectProps.style.borderColor = '';
|
||||
this.updateBorderColor('');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
//普通多选数据
|
||||
const valueProp = prop.value;
|
||||
const labelProps = { ...config, data, sels, ck: this.itemClick.bind(this), title: sels.map(sel => sel[prop.name]).join(',') }
|
||||
const bodyProps = { ...config, data, dataObj, flatData, sels, ck: this.itemClick.bind(this), show, onReset: this.onReset.bind(this) }
|
||||
|
||||
//渲染组件
|
||||
let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } /> : <General { ...bodyProps } />;
|
||||
|
||||
|
||||
return (
|
||||
<xm-select { ...xmSelectProps } >
|
||||
<input class="xm-select-default" name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
|
||||
<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
|
||||
{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
|
||||
<Label { ...labelProps } />
|
||||
<div class={ show ? 'xm-body' : 'xm-body dis' } ref={ ref => this.bodyView = ref}>
|
||||
{ Body }
|
||||
</div>
|
||||
{ disabled && <div class="xm-select-disabled"></div> }
|
||||
</xm-select>
|
||||
);
|
||||
}
|
||||
|
||||
//组件完成挂载
|
||||
componentDidMount(){
|
||||
this.prepare = true;
|
||||
}
|
||||
|
||||
//此时页面又被重新渲染了
|
||||
componentDidUpdate(){
|
||||
let { direction } = this.props;
|
||||
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 y = rect.y || rect.top || 0;
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let diff = clientHeight - y - rect.height - 20;
|
||||
direction = diff > bodyViewHeight || y < 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';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Framework;
|
||||
@ -1,4 +1,4 @@
|
||||
import { h, Component, render } from '@/components/preact'
|
||||
import { h, Component, render } from 'preact'
|
||||
|
||||
/**
|
||||
* 标签的渲染
|
||||
32
src/components/plugin/custom.js
Normal file
32
src/components/plugin/custom.js
Normal file
@ -0,0 +1,32 @@
|
||||
import { h, Component, render } from 'preact'
|
||||
|
||||
/**
|
||||
* 默认提示
|
||||
*/
|
||||
class Custom extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
}
|
||||
|
||||
blockClick(e){
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
shouldComponentUpdate(){
|
||||
return !this.prepare;
|
||||
}
|
||||
|
||||
render(config) {
|
||||
this.prepare = true;
|
||||
return (
|
||||
<div onClick={ this.blockClick } class="xm-body-custom" >
|
||||
<div class="scroll-body" style={ {maxHeight: config.height} }>
|
||||
<div style="margin: 5px 0" dangerouslySetInnerHTML={{ __html: config.content }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Custom;
|
||||
412
src/components/plugin/general.js
Normal file
412
src/components/plugin/general.js
Normal file
@ -0,0 +1,412 @@
|
||||
import { h, Component, render } from 'preact'
|
||||
import { isFunction, isArray, safety, deepMerge, mergeArr, IEVersion } from '@/common/util'
|
||||
|
||||
/**
|
||||
* 普通的多选渲染
|
||||
*/
|
||||
class General extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
|
||||
this.setState({
|
||||
filterValue: '',
|
||||
remote: true,
|
||||
loading: false,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
this.searchCid = 0;
|
||||
this.inputOver = true;
|
||||
this.__value = '';
|
||||
this.dynamicInput = false;
|
||||
}
|
||||
|
||||
optionClick(item, selected, disabled, e){
|
||||
this.props.ck(item, selected, disabled);
|
||||
//阻止父组件上的事件冒泡
|
||||
this.blockClick(e);
|
||||
}
|
||||
|
||||
groupClick(item, e){
|
||||
const { click, children, disabled } = this.props.prop;
|
||||
let m = item[click], arr = item[children].filter(opt => !opt[disabled]);
|
||||
|
||||
if(m === 'SELECT'){
|
||||
this.props.onReset(arr, 'append');
|
||||
}else if(m === 'CLEAR'){
|
||||
this.props.onReset(arr, 'delete');
|
||||
}else if(m === 'AUTO'){
|
||||
this.props.onReset(arr, 'auto');
|
||||
}else if(isFunction(m)){
|
||||
m(item);
|
||||
}
|
||||
//阻止父组件上的事件冒泡
|
||||
this.blockClick(e);
|
||||
}
|
||||
|
||||
blockClick(e){
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
pagePrevClick(e){
|
||||
let index = this.state.pageIndex;
|
||||
if(index <= 1){
|
||||
return ;
|
||||
}
|
||||
this.changePageIndex(index - 1);
|
||||
}
|
||||
pageNextClick(e, size){
|
||||
let index = this.state.pageIndex;
|
||||
if(index >= size){
|
||||
return ;
|
||||
}
|
||||
this.changePageIndex(index + 1);
|
||||
}
|
||||
|
||||
changePageIndex(index){
|
||||
this.setState({
|
||||
pageIndex: index
|
||||
})
|
||||
}
|
||||
|
||||
searchInput(e){
|
||||
let v = e.target.value;
|
||||
|
||||
if(v === this.__value){
|
||||
return ;
|
||||
}
|
||||
|
||||
clearTimeout(this.searchCid);
|
||||
if(this.inputOver){
|
||||
//保证输入框内的值是实时的
|
||||
this.__value = v;
|
||||
|
||||
//让搜索变成异步的
|
||||
this.searchCid = setTimeout(() => {
|
||||
this.callback = true;
|
||||
this.setState({ filterValue: this.__value, remote: true })
|
||||
}, this.props.delay);
|
||||
}
|
||||
}
|
||||
|
||||
focus(){
|
||||
this.searchInputRef && this.searchInputRef.focus();
|
||||
}
|
||||
|
||||
blur(){
|
||||
this.searchInputRef && this.searchInputRef.blur();
|
||||
}
|
||||
|
||||
handleComposition(e){
|
||||
let type = e.type;
|
||||
|
||||
if(type === 'compositionstart'){
|
||||
this.inputOver = false;
|
||||
clearTimeout(this.searchCid);
|
||||
}else if(type === 'compositionend'){
|
||||
this.inputOver = true;
|
||||
this.searchInput(e);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props){
|
||||
if(this.props.show != props.show){
|
||||
if(!props.show){
|
||||
//清空输入框的值
|
||||
this.setState({ filterValue: '' });
|
||||
this.__value = '';
|
||||
this.searchInputRef && (this.searchInputRef.value = '');
|
||||
}else{
|
||||
//聚焦输入框
|
||||
setTimeout(() => this.focus(), 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
if(this.callback){
|
||||
this.callback = false;
|
||||
|
||||
let done = this.props.filterDone;
|
||||
if(isFunction(done)){
|
||||
done(this.state.filterValue, this.tempData || []);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(config) {
|
||||
|
||||
let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create } = config
|
||||
|
||||
const { name, value, disabled, children, optgroup } = prop;
|
||||
|
||||
let arr = deepMerge([], flatData), creator;
|
||||
//是否开启了搜索
|
||||
if(filterable){
|
||||
if(remoteSearch){//是否进行远程搜索
|
||||
if(this.state.remote){
|
||||
this.callback = false;
|
||||
this.setState({ loading: true, remote: false });
|
||||
//让输入框失去焦点
|
||||
this.blur();
|
||||
remoteMethod(this.state.filterValue, result => {
|
||||
//回调后可以重新聚焦
|
||||
this.focus();
|
||||
|
||||
this.callback = true;
|
||||
this.setState({ loading: false });
|
||||
this.props.onReset(result, 'data');
|
||||
}, this.props.show);
|
||||
}
|
||||
}else{
|
||||
const filterData = (item, index) => {
|
||||
const isGroup = item[optgroup];
|
||||
if(isGroup){
|
||||
delete item.__del;
|
||||
return true;
|
||||
}
|
||||
return filterMethod(this.state.filterValue, item, index, prop);
|
||||
}
|
||||
arr = arr.filter(filterData);
|
||||
|
||||
for(let i = 0; i < arr.length - 1; i++){
|
||||
let a = arr[i];
|
||||
let b = arr[i + 1];
|
||||
if(a[optgroup] && b[optgroup]){
|
||||
arr[i].__del = true;
|
||||
}
|
||||
}
|
||||
if(arr.length && arr[arr.length - 1][optgroup]){
|
||||
arr[arr.length - 1].__del = true;
|
||||
}
|
||||
arr = arr.filter(item => !item.__del);
|
||||
//创建条目
|
||||
creator = this.state.filterValue && isFunction(create);
|
||||
}
|
||||
}
|
||||
|
||||
const search = (
|
||||
<div class='xm-search'>
|
||||
<i class="xm-iconfont xm-icon-sousuo"></i>
|
||||
<input type="text" class="xm-input xm-search-input" placeholder={ searchTips }
|
||||
ref={ input => this.searchInputRef = input }
|
||||
onClick={ this.blockClick.bind(this) }
|
||||
onInput={ this.searchInput.bind(this) }
|
||||
onCompositionStart={ this.handleComposition.bind(this) }
|
||||
onCompositionUpdate={ this.handleComposition.bind(this) }
|
||||
onCompositionEnd={ this.handleComposition.bind(this) }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
//如果是分组模式, 要分页先去除分组, 然后在计算分页, 最后再加上分组
|
||||
let groups = [], groupInfo = {};
|
||||
groups = arr.filter(item => item[optgroup]).forEach(g => {
|
||||
g[children].forEach(item => groupInfo[item[value]] = g);
|
||||
});
|
||||
arr = arr.filter(item => !item[optgroup]);
|
||||
|
||||
let paging = '';
|
||||
if(config.paging){
|
||||
//计算当前分页的总页码
|
||||
let size = Math.floor((arr.length - 1) / config.pageSize) + 1;
|
||||
size <= 0 && (size = 1);
|
||||
|
||||
let pageIndex = this.state.pageIndex;
|
||||
|
||||
//如果当前页码大于总页码, 重置一下
|
||||
if(pageIndex > size){
|
||||
pageIndex = size;
|
||||
}
|
||||
|
||||
//如有总页码>1, 但是因为搜索造成的页码=0的情况
|
||||
if(size > 0 && pageIndex <= 0){
|
||||
pageIndex = 1;
|
||||
}
|
||||
|
||||
//实现简单的物理分页
|
||||
let start = (pageIndex - 1) * config.pageSize;
|
||||
let end = start + config.pageSize;
|
||||
arr = arr.slice(start, end);
|
||||
|
||||
const disabledStyle = {cursor: 'no-drop', color: '#d2d2d2'};
|
||||
|
||||
let prevStyle = {}, nextStyle = {};
|
||||
pageIndex <= 1 && (prevStyle = disabledStyle);
|
||||
pageIndex == size && (nextStyle = disabledStyle);
|
||||
|
||||
// const defaultCurrClass = {
|
||||
// position: 'relative',
|
||||
// borderRadius: '1px',
|
||||
// }
|
||||
// {
|
||||
// ''.padEnd(size, ' ').split('').map((s, i) => (
|
||||
// <span style={
|
||||
// this.state.pageIndex == i + 1 ? {
|
||||
// ...defaultCurrClass,
|
||||
// backgroundColor: theme.color,
|
||||
// borderColor: theme.color,
|
||||
// color: '#FFF',
|
||||
// } : defaultCurrClass
|
||||
// }>{ i + 1 }</span>
|
||||
// ))
|
||||
// }
|
||||
|
||||
this.state.pageIndex !== pageIndex && this.changePageIndex(pageIndex);
|
||||
|
||||
paging = (
|
||||
<div class='xm-paging'>
|
||||
<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this) }>上一页</span>
|
||||
<span>{ this.state.pageIndex } / { size }</span>
|
||||
<span style={ nextStyle } onClick={ e => this.pageNextClick.bind(this, e, size)() }>下一页</span>
|
||||
</div>
|
||||
)
|
||||
}else{
|
||||
//检查是否设置了显示数量上限
|
||||
if(config.showCount > 0){
|
||||
arr = arr.slice(0, config.showCount);
|
||||
}
|
||||
}
|
||||
|
||||
let newArr = [], group;
|
||||
arr.forEach(item => {
|
||||
let g = groupInfo[item[value]];
|
||||
if(g != group){
|
||||
group = g;
|
||||
newArr.push(group);
|
||||
}
|
||||
newArr.push(item);
|
||||
});
|
||||
arr = newArr;
|
||||
|
||||
//查看是否创建了条目
|
||||
if(creator){
|
||||
creator = create(this.state.filterValue, deepMerge([], arr));
|
||||
creator && arr.splice(0, 0, creator);
|
||||
}
|
||||
|
||||
let safetyArr = deepMerge([], arr);
|
||||
this.tempData = safetyArr;
|
||||
|
||||
//工具条操作
|
||||
const toolbar = (
|
||||
<div class='xm-toolbar'>
|
||||
{ config.toolbar.list.map(tool => {
|
||||
const toolClass = 'toolbar-tag';
|
||||
const toolStyle = {};
|
||||
|
||||
let info, name = config.languageProp.toolbar[tool];
|
||||
if(tool === 'ALL'){
|
||||
info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
|
||||
const { optgroup, disabled } = prop;
|
||||
const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
|
||||
this.props.onReset(mergeArr(list, sels, prop), 'sels');
|
||||
} };
|
||||
}else if(tool === 'CLEAR'){
|
||||
info = { icon: 'xm-iconfont xm-icon-qingkong', name, method: (pageData) => {
|
||||
this.props.onReset(sels.filter(item => item[prop.disabled]), 'sels');
|
||||
} };
|
||||
}else if(tool === 'REVERSE'){
|
||||
info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => {
|
||||
const { optgroup, disabled } = prop;
|
||||
const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
|
||||
|
||||
let selectedList = [];
|
||||
sels.forEach(item => {
|
||||
let index = list.findIndex(pageItem => pageItem[value] === item[value]);
|
||||
if(index == -1){
|
||||
selectedList.push(item);
|
||||
}else{
|
||||
list.splice(index, 1);
|
||||
}
|
||||
})
|
||||
this.props.onReset(mergeArr(list, selectedList, prop), 'sels');
|
||||
} };
|
||||
}else if(tool === 'SEARCH'){
|
||||
toolStyle.color = theme.color;
|
||||
info = { icon: 'xm-iconfont xm-icon-sousuo', name, method: (pageData) => {
|
||||
|
||||
} };
|
||||
}else {
|
||||
info = tool
|
||||
}
|
||||
|
||||
const hoverChange = e => {
|
||||
if(e.type === 'mouseenter') e.target.style.color = theme.color;
|
||||
if(e.type === 'mouseleave') e.target.style.color = '';
|
||||
}
|
||||
|
||||
return (<div class={ toolClass } style={ toolStyle } onClick={ () => {
|
||||
isFunction(info.method) && info.method(safetyArr)
|
||||
} } onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }>
|
||||
{ config.toolbar.showIcon && <i class={ info.icon }></i> }
|
||||
<span>{ info.name }</span>
|
||||
</div>)
|
||||
}).filter(a => a) }
|
||||
</div>
|
||||
)
|
||||
|
||||
const showIcon = config.model.icon != 'hidden';
|
||||
const renderItem = item => {
|
||||
const selected = !!sels.find(sel => sel[value] == item[value])
|
||||
const iconStyle = selected ? {
|
||||
color: theme.color,
|
||||
border: 'none'
|
||||
} : {
|
||||
borderColor: theme.color,
|
||||
};
|
||||
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 } 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>
|
||||
)
|
||||
}
|
||||
|
||||
const renderGroup = item => {
|
||||
const isGroup = item[optgroup];
|
||||
if(isGroup){//分组模式
|
||||
return (
|
||||
<div class="xm-group">
|
||||
<div class="xm-group-item" onClick={ this.groupClick.bind(this, item) }>{ item[name] }</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return renderItem(item);
|
||||
}
|
||||
|
||||
arr = arr.map(renderGroup);
|
||||
|
||||
if(!arr.length){
|
||||
//查看无数据情况下是否显示分页
|
||||
!config.pageEmptyShow && (paging = '');
|
||||
arr.push(<div class="xm-select-empty">{ empty }</div>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div onClick={ this.blockClick }>
|
||||
<div>
|
||||
{ config.toolbar.show && toolbar }
|
||||
{ filterable && search }
|
||||
<div class="scroll-body" style={ {maxHeight: config.height} }>{ arr }</div>
|
||||
{ config.paging && paging }
|
||||
</div>
|
||||
{ this.state.loading && <div class="loading" >
|
||||
<span class="loader"></span>
|
||||
</div> }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default General;
|
||||
124
src/components/plugin/tree.js
Normal file
124
src/components/plugin/tree.js
Normal file
@ -0,0 +1,124 @@
|
||||
import { h, Component, render } from 'preact'
|
||||
|
||||
class Tree extends Component{
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
|
||||
this.state = {
|
||||
expandedKeys: [],
|
||||
}
|
||||
}
|
||||
|
||||
init(props){
|
||||
const { tree, dataObj, prop } = props;
|
||||
const { value } = prop
|
||||
|
||||
let keys = [];
|
||||
tree.expandedKeys.forEach(key => {
|
||||
keys.push(key);
|
||||
|
||||
let item = dataObj[key];
|
||||
while(item){
|
||||
let pkey = item[value];
|
||||
keys.findIndex(k => k === pkey) === -1 && (keys.push(pkey))
|
||||
item = item.__node.parent
|
||||
}
|
||||
});
|
||||
this.setState({ expandedKeys: keys })
|
||||
}
|
||||
|
||||
blockClick(e){
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
optionClick(item, selected, disabled, type, e){
|
||||
if(type === 'line'){
|
||||
let val = item[this.props.prop.value];
|
||||
let expandedKeys = this.state.expandedKeys;
|
||||
let index = expandedKeys.findIndex(v => v === val);
|
||||
index === -1 ? expandedKeys.push(val) : expandedKeys.splice(index, 1);
|
||||
this.setState({ expandedKeys });
|
||||
}else if(type === 'checkbox'){
|
||||
this.props.ck(item, selected, disabled);
|
||||
}
|
||||
//阻止父组件上的事件冒泡
|
||||
this.blockClick(e);
|
||||
}
|
||||
|
||||
//组件将要接收新属性
|
||||
componentWillReceiveProps(props){
|
||||
// this.init(props);
|
||||
}
|
||||
|
||||
//组件将要被挂载
|
||||
componentWillMount(){
|
||||
this.init(this.props);
|
||||
}
|
||||
|
||||
render(config, { expandedKeys }) {
|
||||
let { prop, empty, sels, theme, radio, template, data, tree } = config;
|
||||
let { name, value, disabled, children } = prop;
|
||||
|
||||
const showIcon = config.model.icon != 'hidden';
|
||||
const renderItem = (item, indent, expand) => {
|
||||
const half = item.__node.half === true;
|
||||
const selected = !!sels.find(sel => sel[value] == item[value]) || half || item.__node.selected
|
||||
const dis = item[disabled] || item.__node.disabled;
|
||||
const iconStyle = selected || half ? {
|
||||
color: theme.color,
|
||||
border: 'none'
|
||||
} : {
|
||||
borderColor: theme.color,
|
||||
};
|
||||
const itemStyle = { paddingLeft: indent + 'px' }
|
||||
if(!showIcon && selected){
|
||||
itemStyle.backgroundColor = theme.color;
|
||||
dis && (itemStyle.backgroundColor = '#C2C2C2');
|
||||
}
|
||||
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 treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && item[children].length > 0 ? 'visible':'hidden'].join(' ');
|
||||
|
||||
return (
|
||||
<div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled], 'line') }>
|
||||
{ tree.showFolderIcon && <i class={ treeIconClass }></i> }
|
||||
{ tree.showFolderIcon && tree.showLine && <i class={ expand ? 'top-line expand' : 'top-line' } style={ { left: indent - tree.indent + 3 + 'px', width: tree.indent + (expand === 0 ? 10 : -2) + 'px' } }></i> }
|
||||
{ showIcon && <i class={ iconClass } style={ iconStyle } onClick={ this.optionClick.bind(this, item, selected, item[disabled], 'checkbox') }></i> }
|
||||
<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderGroup = (item, indent) => {
|
||||
const child = item[children];
|
||||
indent = indent + tree.indent
|
||||
if(child && child.length > 0){//分组模式
|
||||
let expand = this.state.expandedKeys.findIndex(k => item[value] === k) !== -1;
|
||||
return (
|
||||
<div class="xm-tree">
|
||||
{ tree.showFolderIcon && tree.showLine && <i class={ expand ? 'left-line expand' : 'left-line' } style={ {left: indent + 3 + 'px'} }></i> }
|
||||
{ renderItem(item, indent, expand) }
|
||||
{ expand && <div class="xm-tree-box">{ child.map(c => renderGroup(c, indent)) }</div> }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return renderItem(item, indent, 0);
|
||||
}
|
||||
|
||||
let arr = data.map(item => renderGroup(item, 10 - tree.indent));
|
||||
|
||||
if(!arr.length){
|
||||
//查看无数据情况下是否显示分页
|
||||
arr.push(<div class="xm-select-empty">{ empty }</div>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div onClick={ this.blockClick } class="xm-body-tree" >
|
||||
<div class="scroll-body" style={ {maxHeight: config.height} }>{ arr }</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Tree;
|
||||
@ -1,311 +0,0 @@
|
||||
var e = function() {},
|
||||
t = {},
|
||||
n = [],
|
||||
o = [];
|
||||
|
||||
function r(t, r) {
|
||||
var i, l, a, s, p = arguments,
|
||||
u = o;
|
||||
for (s = arguments.length; s-- > 2;) n.push(p[s]);
|
||||
for (r && null != r.children && (n.length || n.push(r.children), delete r.children); n.length;)
|
||||
if ((l = n.pop()) && void 0 !== l.pop)
|
||||
for (s = l.length; s--;) n.push(l[s]);
|
||||
else "boolean" == typeof l && (l = null), (a = "function" != typeof t) && (null == l ? l = "" : "number" == typeof l ?
|
||||
l = String(l) : "string" != typeof l && (a = !1)), a && i ? u[u.length - 1] += l : u === o ? u = [l] : u.push(l), i =
|
||||
a;
|
||||
var c = new e;
|
||||
return c.nodeName = t, c.children = u, c.attributes = null == r ? void 0 : r, c.key = null == r ? void 0 : r.key, c
|
||||
}
|
||||
|
||||
function i(e, t) {
|
||||
for (var n in t) e[n] = t[n];
|
||||
return e
|
||||
}
|
||||
|
||||
function l(e, t) {
|
||||
null != e && ("function" == typeof e ? e(t) : e.current = t)
|
||||
}
|
||||
var a = "function" == typeof Promise ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout,
|
||||
s = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,
|
||||
p = [];
|
||||
|
||||
function u(e) {
|
||||
!e._dirty && (e._dirty = !0) && 1 == p.push(e) && a(c)
|
||||
}
|
||||
|
||||
function c() {
|
||||
for (var e; e = p.pop();) e._dirty && U(e)
|
||||
}
|
||||
|
||||
function f(e, t) {
|
||||
return e.normalizedNodeName === t || e.nodeName.toLowerCase() === t.toLowerCase()
|
||||
}
|
||||
|
||||
function d(e) {
|
||||
var t = i({}, e.attributes);
|
||||
t.children = e.children;
|
||||
var n = e.nodeName.defaultProps;
|
||||
if (void 0 !== n)
|
||||
for (var o in n) void 0 === t[o] && (t[o] = n[o]);
|
||||
return t
|
||||
}
|
||||
|
||||
function v(e) {
|
||||
var t = e.parentNode;
|
||||
t && t.removeChild(e)
|
||||
}
|
||||
|
||||
function h(e, t, n, o, r) {
|
||||
if ("className" === t && (t = "class"), "key" === t);
|
||||
else if ("ref" === t) l(n, null), l(o, e);
|
||||
else if ("class" !== t || r)
|
||||
if ("style" === t) {
|
||||
if (o && "string" != typeof o && "string" != typeof n || (e.style.cssText = o || ""), o && "object" == typeof o) {
|
||||
if ("string" != typeof n)
|
||||
for (var i in n) i in o || (e.style[i] = "");
|
||||
for (var i in o) e.style[i] = "number" == typeof o[i] && !1 === s.test(i) ? o[i] + "px" : o[i]
|
||||
}
|
||||
} else if ("dangerouslySetInnerHTML" === t) o && (e.innerHTML = o.__html || "");
|
||||
else if ("o" == t[0] && "n" == t[1]) {
|
||||
var a = t !== (t = t.replace(/Capture$/, ""));
|
||||
t = t.toLowerCase().substring(2), o ? n || e.addEventListener(t, m, a) : e.removeEventListener(t, m, a), (e._listeners ||
|
||||
(e._listeners = {}))[t] = o
|
||||
} else if ("list" !== t && "type" !== t && !r && t in e) {
|
||||
try {
|
||||
e[t] = null == o ? "" : o
|
||||
} catch (e) {}
|
||||
null != o && !1 !== o || "spellcheck" == t || e.removeAttribute(t)
|
||||
} else {
|
||||
var p = r && t !== (t = t.replace(/^xlink:?/, ""));
|
||||
null == o || !1 === o ? p ? e.removeAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase()) : e.removeAttribute(
|
||||
t) : "function" != typeof o && (p ? e.setAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase(), o) : e.setAttribute(
|
||||
t, o))
|
||||
} else e.className = o || ""
|
||||
}
|
||||
|
||||
function m(e) {
|
||||
return this._listeners[e.type](e)
|
||||
}
|
||||
var _ = [],
|
||||
y = 0,
|
||||
g = !1,
|
||||
b = !1;
|
||||
|
||||
function C() {
|
||||
for (var e; e = _.shift();) e.componentDidMount && e.componentDidMount()
|
||||
}
|
||||
|
||||
function x(e, t, n, o, r, i) {
|
||||
y++ || (g = null != r && void 0 !== r.ownerSVGElement, b = null != e && !("__preactattr_" in e));
|
||||
var l = function e(t, n, o, r, i) {
|
||||
var l = t,
|
||||
a = g;
|
||||
if (null != n && "boolean" != typeof n || (n = ""), "string" == typeof n || "number" == typeof n) return t && void 0 !==
|
||||
t.splitText && t.parentNode && (!t._component || i) ? t.nodeValue != n && (t.nodeValue = n) : (l = document.createTextNode(
|
||||
n), t && (t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0))), l.__preactattr_ = !0, l;
|
||||
var s, p, u = n.nodeName;
|
||||
if ("function" == typeof u) return function(e, t, n, o) {
|
||||
for (var r = e && e._component, i = r, l = e, a = r && e._componentConstructor === t.nodeName, s = a, p = d(t); r &&
|
||||
!s && (r = r._parentComponent);) s = r.constructor === t.nodeName;
|
||||
return r && s && (!o || r._component) ? (B(r, p, 3, n, o), e = r.base) : (i && !a && (L(i), e = l = null), r = S(
|
||||
t.nodeName, p, n), e && !r.nextBase && (r.nextBase = e, l = null), B(r, p, 1, n, o), e = r.base, l && e !== l &&
|
||||
(l._component = null, N(l, !1))), e
|
||||
}(t, n, o, r);
|
||||
if (g = "svg" === u || "foreignObject" !== u && g, u = String(u), (!t || !f(t, u)) && (s = u, (p = g ? document.createElementNS(
|
||||
"http://www.w3.org/2000/svg", s) : document.createElement(s)).normalizedNodeName = s, l = p, t)) {
|
||||
for (; t.firstChild;) l.appendChild(t.firstChild);
|
||||
t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0)
|
||||
}
|
||||
var c = l.firstChild,
|
||||
m = l.__preactattr_,
|
||||
_ = n.children;
|
||||
if (null == m) {
|
||||
m = l.__preactattr_ = {};
|
||||
for (var y = l.attributes, C = y.length; C--;) m[y[C].name] = y[C].value
|
||||
}
|
||||
return !b && _ && 1 === _.length && "string" == typeof _[0] && null != c && void 0 !== c.splitText && null == c.nextSibling ?
|
||||
c.nodeValue != _[0] && (c.nodeValue = _[0]) : (_ && _.length || null != c) && function(t, n, o, r, i) {
|
||||
var l, a, s, p, u, c, d, h, m = t.childNodes,
|
||||
_ = [],
|
||||
y = {},
|
||||
g = 0,
|
||||
b = 0,
|
||||
C = m.length,
|
||||
x = 0,
|
||||
w = n ? n.length : 0;
|
||||
if (0 !== C)
|
||||
for (var k = 0; k < C; k++) {
|
||||
var S = m[k],
|
||||
P = S.__preactattr_;
|
||||
null != (B = w && P ? S._component ? S._component.__key : P.key : null) ? (g++, y[B] = S) : (P || (void 0 !== S.splitText ?
|
||||
!i || S.nodeValue.trim() : i)) && (_[x++] = S)
|
||||
}
|
||||
if (0 !== w)
|
||||
for (k = 0; k < w; k++) {
|
||||
var B;
|
||||
if (u = null, null != (B = (p = n[k]).key)) g && void 0 !== y[B] && (u = y[B], y[B] = void 0, g--);
|
||||
else if (b < x)
|
||||
for (l = b; l < x; l++)
|
||||
if (void 0 !== _[l] && (c = a = _[l], h = i, "string" == typeof(d = p) || "number" == typeof d ? void 0 !== c.splitText :
|
||||
"string" == typeof d.nodeName ? !c._componentConstructor && f(c, d.nodeName) : h || c._componentConstructor ===
|
||||
d.nodeName)) {
|
||||
u = a, _[l] = void 0, l === x - 1 && x--, l === b && b++;
|
||||
break
|
||||
} u = e(u, p, o, r), s = m[k], u && u !== t && u !== s && (null == s ? t.appendChild(u) : u === s.nextSibling ?
|
||||
v(s) : t.insertBefore(u, s))
|
||||
}
|
||||
if (g)
|
||||
for (var k in y) void 0 !== y[k] && N(y[k], !1);
|
||||
for (; b <= x;) void 0 !== (u = _[x--]) && N(u, !1)
|
||||
}(l, _, o, r, b || null != m.dangerouslySetInnerHTML),
|
||||
function(e, t, n) {
|
||||
var o;
|
||||
for (o in n) t && null != t[o] || null == n[o] || h(e, o, n[o], n[o] = void 0, g);
|
||||
for (o in t) "children" === o || "innerHTML" === o || o in n && t[o] === ("value" === o || "checked" === o ? e[o] :
|
||||
n[o]) || h(e, o, n[o], n[o] = t[o], g)
|
||||
}(l, n.attributes, m), g = a, l
|
||||
}(e, t, n, o, i);
|
||||
return r && l.parentNode !== r && r.appendChild(l), --y || (b = !1, i || C()), l
|
||||
}
|
||||
|
||||
function N(e, t) {
|
||||
var n = e._component;
|
||||
n ? L(n) : (null != e.__preactattr_ && l(e.__preactattr_.ref, null), !1 !== t && null != e.__preactattr_ || v(e), w(e))
|
||||
}
|
||||
|
||||
function w(e) {
|
||||
for (e = e.lastChild; e;) {
|
||||
var t = e.previousSibling;
|
||||
N(e, !0), e = t
|
||||
}
|
||||
}
|
||||
var k = [];
|
||||
|
||||
function S(e, t, n) {
|
||||
var o, r = k.length;
|
||||
for (e.prototype && e.prototype.render ? (o = new e(t, n), T.call(o, t, n)) : ((o = new T(t, n)).constructor = e, o.render =
|
||||
P); r--;)
|
||||
if (k[r].constructor === e) return o.nextBase = k[r].nextBase, k.splice(r, 1), o;
|
||||
return o
|
||||
}
|
||||
|
||||
function P(e, t, n) {
|
||||
return this.constructor(e, n)
|
||||
}
|
||||
|
||||
function B(e, n, o, r, i) {
|
||||
e._disable || (e._disable = !0, e.__ref = n.ref, e.__key = n.key, delete n.ref, delete n.key, void 0 === e.constructor
|
||||
.getDerivedStateFromProps && (!e.base || i ? e.componentWillMount && e.componentWillMount() : e.componentWillReceiveProps &&
|
||||
e.componentWillReceiveProps(n, r)), r && r !== e.context && (e.prevContext || (e.prevContext = e.context), e.context =
|
||||
r), e.prevProps || (e.prevProps = e.props), e.props = n, e._disable = !1, 0 !== o && (1 !== o && !1 === t.syncComponentUpdates &&
|
||||
e.base ? u(e) : U(e, 1, i)), l(e.__ref, e))
|
||||
}
|
||||
|
||||
function U(e, t, n, o) {
|
||||
if (!e._disable) {
|
||||
var r, l, a, s = e.props,
|
||||
p = e.state,
|
||||
u = e.context,
|
||||
c = e.prevProps || s,
|
||||
f = e.prevState || p,
|
||||
v = e.prevContext || u,
|
||||
h = e.base,
|
||||
m = e.nextBase,
|
||||
g = h || m,
|
||||
b = e._component,
|
||||
w = !1,
|
||||
k = v;
|
||||
if (e.constructor.getDerivedStateFromProps && (p = i(i({}, p), e.constructor.getDerivedStateFromProps(s, p)), e.state =
|
||||
p), h && (e.props = c, e.state = f, e.context = v, 2 !== t && e.shouldComponentUpdate && !1 === e.shouldComponentUpdate(
|
||||
s, p, u) ? w = !0 : e.componentWillUpdate && e.componentWillUpdate(s, p, u), e.props = s, e.state = p, e.context =
|
||||
u), e.prevProps = e.prevState = e.prevContext = e.nextBase = null, e._dirty = !1, !w) {
|
||||
r = e.render(s, p, u), e.getChildContext && (u = i(i({}, u), e.getChildContext())), h && e.getSnapshotBeforeUpdate &&
|
||||
(k = e.getSnapshotBeforeUpdate(c, f));
|
||||
var P, T, M = r && r.nodeName;
|
||||
if ("function" == typeof M) {
|
||||
var W = d(r);
|
||||
(l = b) && l.constructor === M && W.key == l.__key ? B(l, W, 1, u, !1) : (P = l, e._component = l = S(M, W, u), l.nextBase =
|
||||
l.nextBase || m, l._parentComponent = e, B(l, W, 0, u, !1), U(l, 1, n, !0)), T = l.base
|
||||
} else a = g, (P = b) && (a = e._component = null), (g || 1 === t) && (a && (a._component = null), T = x(a, r, u, n ||
|
||||
!h, g && g.parentNode, !0));
|
||||
if (g && T !== g && l !== b) {
|
||||
var D = g.parentNode;
|
||||
D && T !== D && (D.replaceChild(T, g), P || (g._component = null, N(g, !1)))
|
||||
}
|
||||
if (P && L(P), e.base = T, T && !o) {
|
||||
for (var E = e, V = e; V = V._parentComponent;)(E = V).base = T;
|
||||
T._component = E, T._componentConstructor = E.constructor
|
||||
}
|
||||
}
|
||||
for (!h || n ? _.push(e) : w || e.componentDidUpdate && e.componentDidUpdate(c, f, k); e._renderCallbacks.length;) e._renderCallbacks
|
||||
.pop().call(e);
|
||||
y || o || C()
|
||||
}
|
||||
}
|
||||
|
||||
function L(e) {
|
||||
var t = e.base;
|
||||
e._disable = !0, e.componentWillUnmount && e.componentWillUnmount(), e.base = null;
|
||||
var n = e._component;
|
||||
n ? L(n) : t && (null != t.__preactattr_ && l(t.__preactattr_.ref, null), e.nextBase = t, v(t), k.push(e), w(t)), l(e.__ref,
|
||||
null)
|
||||
}
|
||||
|
||||
function T(e, t) {
|
||||
this._dirty = !0, this.context = t, this.props = e, this.state = this.state || {}, this._renderCallbacks = []
|
||||
}
|
||||
i(T.prototype, {
|
||||
setState: function(e, t) {
|
||||
this.prevState || (this.prevState = this.state), this.state = i(i({}, this.state), "function" == typeof e ? e(this
|
||||
.state, this.props) : e), t && this._renderCallbacks.push(t), u(this)
|
||||
},
|
||||
forceUpdate: function(e) {
|
||||
e && this._renderCallbacks.push(e), U(this, 2)
|
||||
},
|
||||
render: function() {}
|
||||
});
|
||||
var M = function(e, t, n, o) {
|
||||
for (var r = 1; r < t.length; r++) {
|
||||
var i = t[r++],
|
||||
l = "number" == typeof i ? n[i] : i;
|
||||
1 === t[r] ? o[0] = l : 2 === t[r] ? (o[1] = o[1] || {})[t[++r]] = l : 3 === t[r] ? o[1] = Object.assign(o[1] || {},
|
||||
l) : o.push(t[r] ? e.apply(null, M(e, l, n, ["", null])) : l)
|
||||
}
|
||||
return o
|
||||
},
|
||||
W = function(e) {
|
||||
for (var t, n, o = 1, r = "", i = "", l = [0], a = function(e) {
|
||||
1 === o && (e || (r = r.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? l.push(e || r, 0) : 3 === o && (e || r) ? (l.push(
|
||||
e || r, 1), o = 2) : 2 === o && "..." === r && e ? l.push(e, 3) : 2 === o && r && !e ? l.push(!0, 2, r) : 4 ===
|
||||
o && n && (l.push(e || r, 2, n), n = ""), r = ""
|
||||
}, s = 0; s < e.length; s++) {
|
||||
s && (1 === o && a(), a(s));
|
||||
for (var p = 0; p < e[s].length; p++) t = e[s][p], 1 === o ? "<" === t ? (a(), l = [l], o = 3) : r += t : i ? t ===
|
||||
i ? i = "" : r += t : '"' === t || "'" === t ? i = t : ">" === t ? (a(), o = 1) : o && ("=" === t ? (o = 4, n = r,
|
||||
r = "") : "/" === t ? (a(), 3 === o && (l = l[0]), o = l, (l = l[0]).push(o, 4), o = 0) : " " === t || "\t" ===
|
||||
t || "\n" === t || "\r" === t ? (a(), o = 2) : r += t)
|
||||
}
|
||||
return a(), l
|
||||
},
|
||||
D = "function" == typeof Map,
|
||||
E = D ? new Map : {},
|
||||
V = D ? function(e) {
|
||||
var t = E.get(e);
|
||||
return t || E.set(e, t = W(e)), t
|
||||
} : function(e) {
|
||||
for (var t = "", n = 0; n < e.length; n++) t += e[n].length + "-" + e[n];
|
||||
return E[t] || (E[t] = W(e))
|
||||
};
|
||||
|
||||
function A(e, t) {
|
||||
! function(t, n, o) {
|
||||
x(o, e, {}, !1, n, !1)
|
||||
}(0, t, t.firstElementChild)
|
||||
}
|
||||
var H = function(e) {
|
||||
var t = M(this, V(e), arguments, []);
|
||||
return t.length > 1 ? t : t[0]
|
||||
}.bind(r);
|
||||
export {
|
||||
r as h, H as html, A as render, T as Component
|
||||
};
|
||||
158
src/components/xm-select/index.js
Normal file
158
src/components/xm-select/index.js
Normal file
@ -0,0 +1,158 @@
|
||||
import { h, Component, render } from 'preact'
|
||||
import { datas, optionData, childData } from '@/index.js';
|
||||
import { selector, warn, listenerClose, isArray, deepMerge, exchangeOptionsData } from '@/common/util'
|
||||
import Framework from '@/components/framework'
|
||||
import defaultOptions from '@/config/options'
|
||||
|
||||
class xmOptions {
|
||||
|
||||
constructor(options) {
|
||||
this.init(options);
|
||||
}
|
||||
|
||||
init(options){
|
||||
//定义默认值
|
||||
this.options = defaultOptions(options.language);
|
||||
//开始渲染数据
|
||||
this.update(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新数据 + 重新渲染
|
||||
*/
|
||||
update(options = {}){
|
||||
|
||||
let updateData = !!options.data;
|
||||
|
||||
//记录最新的配置项
|
||||
this.options = deepMerge(this.options, options);
|
||||
|
||||
//如果dom不存在, 则不进行渲染事项
|
||||
let dom = selector(this.options.el);
|
||||
if(!dom){
|
||||
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
||||
return ;
|
||||
}
|
||||
//判断data的数据类型
|
||||
let optionsData = this.options.data || [];
|
||||
if(typeof(optionsData) === 'function'){
|
||||
optionsData = optionsData();
|
||||
this.options.data = optionsData;
|
||||
}
|
||||
if(!isArray(optionsData)){
|
||||
warn(`data数据必须为数组类型, 不能是${ typeof(data) }类型`)
|
||||
return ;
|
||||
}
|
||||
|
||||
render(<Framework { ...this.options } updateData={ updateData } />, dom);
|
||||
|
||||
//返回多选对象
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置多选, 回到初始化的状态
|
||||
*/
|
||||
reset(){
|
||||
const { el } = this.options
|
||||
//重新渲染
|
||||
this.init(optionData[el]);
|
||||
//子组件初始化
|
||||
childData[el].init(this.options, true);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主动打开多选
|
||||
*/
|
||||
opened(){
|
||||
let ref = childData[this.options.el];
|
||||
!ref.state.show && ref.onClick();
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主动关闭多选
|
||||
*/
|
||||
closed(){
|
||||
let ref = childData[this.options.el];
|
||||
ref.state.show && ref.onClick();
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选选中的数据
|
||||
*/
|
||||
getValue(type){
|
||||
let arr = deepMerge([], childData[this.options.el].state.sels);
|
||||
|
||||
if(type === 'name'){
|
||||
return arr.map(item => item[this.options.prop.name]);
|
||||
}else
|
||||
if(type === 'nameStr'){
|
||||
return arr.map(item => item[this.options.prop.name]).join(',');
|
||||
}else
|
||||
if(type === 'value'){
|
||||
return arr.map(item => item[this.options.prop.value]);
|
||||
}else
|
||||
if(type === 'valueStr'){
|
||||
return arr.map(item => item[this.options.prop.value]).join(',');
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置多选数据
|
||||
*/
|
||||
setValue(sels, show, listenOn = false){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
childData[this.options.el].value(sels, show, listenOn);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 追加赋值
|
||||
*/
|
||||
append(sels){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
childData[this.options.el].append(sels);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除赋值
|
||||
*/
|
||||
delete(sels){
|
||||
if(!isArray(sels)){
|
||||
warn('请传入数组结构...')
|
||||
return ;
|
||||
}
|
||||
childData[this.options.el].del(sels);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 闪烁警告边框
|
||||
*/
|
||||
warning(color, sustain = false){
|
||||
let showColor = color || this.options.theme.maxColor;
|
||||
|
||||
sustain === true ? (
|
||||
childData[this.options.el].base.style.borderColor = showColor
|
||||
) : (
|
||||
childData[this.options.el].updateBorderColor(showColor)
|
||||
)
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default xmOptions;
|
||||
11
src/config/language/en.js
Normal file
11
src/config/language/en.js
Normal file
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
tips: 'please selected',
|
||||
empty: 'no data',
|
||||
searchTips: 'please search',
|
||||
toolbar: {
|
||||
ALL: 'select all',
|
||||
CLEAR: 'clear',
|
||||
REVERSE: 'invert select',
|
||||
SEARCH: 'search',
|
||||
}
|
||||
}
|
||||
11
src/config/language/zn.js
Normal file
11
src/config/language/zn.js
Normal file
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
tips: '请选择',
|
||||
empty: '暂无数据',
|
||||
searchTips: '请选择',
|
||||
toolbar: {
|
||||
ALL: '全选',
|
||||
CLEAR: '清空',
|
||||
REVERSE: '反选',
|
||||
SEARCH: '搜索',
|
||||
}
|
||||
}
|
||||
@ -77,6 +77,13 @@ export default function (lan = 'zn') {
|
||||
showIcon: true,
|
||||
list: [ 'ALL', 'CLEAR' ],
|
||||
},
|
||||
tree: {
|
||||
show: false,
|
||||
showFolderIcon: true,
|
||||
showLine: true,
|
||||
indent: 20,
|
||||
expandedKeys: [],
|
||||
},
|
||||
//自定义属性名称
|
||||
prop: {
|
||||
name: 'name',
|
||||
49
src/index.js
49
src/index.js
@ -1,28 +1,29 @@
|
||||
import { name, version } from '../package.json'
|
||||
import '@/components/common/expand'
|
||||
import Core from '@/components/core'
|
||||
import '@/style/index.less'
|
||||
import '@/style/iconfont.less'
|
||||
import { selector, warn } from '@/components/common/util'
|
||||
import { selector, warn } from '@/common/util'
|
||||
import Select from '@/components/xm-select'
|
||||
|
||||
const object = {}
|
||||
const xmSelect = {
|
||||
export const datas = {};
|
||||
export const optionData = {};
|
||||
export const childData = {};
|
||||
|
||||
export default {
|
||||
name,
|
||||
version,
|
||||
render(options) {
|
||||
let instance = new Core(options);
|
||||
if(instance){
|
||||
let { el } = options;
|
||||
let select = object[el];
|
||||
select !== undefined && (delete object[el]);
|
||||
object[el] = instance;
|
||||
optionData[el] = options;
|
||||
|
||||
let instance = new Select(options);
|
||||
//已经渲染
|
||||
if (instance) {
|
||||
datas[el] = instance;
|
||||
}
|
||||
return instance;
|
||||
},
|
||||
get(filter, single){
|
||||
get(filter, single) {
|
||||
let type = Object.prototype.toString.call(filter);
|
||||
let method;
|
||||
switch (type){
|
||||
switch (type) {
|
||||
case '[object String]':
|
||||
filter && (method = item => item === filter);
|
||||
break;
|
||||
@ -35,25 +36,13 @@ const xmSelect = {
|
||||
default:
|
||||
break;
|
||||
}
|
||||
let keys = Object.keys(object)
|
||||
let list = (method ? keys.filter(method) : keys).map(key => object[key]).filter(instance => selector(instance.options.el));
|
||||
let keys = Object.keys(datas)
|
||||
let list = (method ? keys.filter(method) : keys).map(key => datas[key]).filter(instance => selector(instance.options.el));
|
||||
return single ? list[0] : list;
|
||||
},
|
||||
batch(filter, method){
|
||||
let args = [ ...arguments ];
|
||||
batch(filter, method) {
|
||||
let args = [...arguments];
|
||||
args.splice(0, 2);
|
||||
return this.get(filter).map(instance => instance[method](...args));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
|
||||
module.exports = xmSelect;
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(xmSelect);
|
||||
} else if (window.layui && layui.define) {
|
||||
layui.define(function(exports) {
|
||||
exports('xmSelect', xmSelect);
|
||||
});
|
||||
}
|
||||
window.xmSelect = xmSelect;
|
||||
|
||||
24
src/main.js
Normal file
24
src/main.js
Normal file
@ -0,0 +1,24 @@
|
||||
import '@/common/expand'
|
||||
import '@/style/index.less'
|
||||
import '@/style/iconfont.less'
|
||||
import { default as xmSelect, datas } from './index.js';
|
||||
|
||||
const moduleName = 'xmSelect';
|
||||
|
||||
/**
|
||||
* 监听全页面点击关闭事件
|
||||
*/
|
||||
window.addEventListener('click', () => Object.values(datas).forEach(item => item && item.closed && item.closed()))
|
||||
|
||||
|
||||
if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
|
||||
module.exports = xmSelect;
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(xmSelect);
|
||||
} else if (window.layui && layui.define) {
|
||||
layui.define(function(exports) {
|
||||
exports(moduleName, xmSelect);
|
||||
});
|
||||
}
|
||||
|
||||
window[moduleName] = xmSelect;
|
||||
@ -5,7 +5,7 @@
|
||||
/* IE9*/
|
||||
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'),
|
||||
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg');
|
||||
@ -59,3 +59,7 @@
|
||||
.xm-icon-expand:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.xm-icon-banxuan:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
@ -170,7 +170,6 @@ xm-select{
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
|
||||
animation-fill-mode: both;
|
||||
animation-name: xm-upbit;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
@ -353,6 +352,56 @@ xm-select{
|
||||
box-sizing: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.xm-tree{
|
||||
position: relative;
|
||||
|
||||
&-icon{
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
border: 6px dashed transparent;
|
||||
border-left-color: #C2C2C2;
|
||||
border-left-style: solid;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
|
||||
&.expand{
|
||||
margin-top: 3px;
|
||||
margin-right: 5px;
|
||||
margin-left: -2px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&.visible{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.left-line{
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
width: 0;
|
||||
z-index: 1;
|
||||
border-left: 1px dotted #c0c4cc !important;
|
||||
}
|
||||
.top-line{
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
height: 0;
|
||||
z-index: 1;
|
||||
border-top: 1px dotted #c0c4cc !important;
|
||||
}
|
||||
&-box{
|
||||
&.dis{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-body>.xm-tree>.xm-option>.top-line{
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.xm-input{
|
||||
@ -451,6 +500,28 @@ xm-select{
|
||||
height: @heightLabel;
|
||||
line-height: @heightLabel;
|
||||
}
|
||||
.xm-tree{
|
||||
.left-line{
|
||||
height: calc(100% - @size);
|
||||
top: @size / 2;
|
||||
bottom: @size / 2;
|
||||
&.expand{
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.left-line{
|
||||
height: calc(100% - @size);
|
||||
}
|
||||
}
|
||||
.xm-tree-icon.hidden+.top-line{
|
||||
top: @size / 2 - 1px;
|
||||
}
|
||||
.xm-tree-icon+.top-line{
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
xm-select[size='large']{
|
||||
.mixin(40px)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user