v1.0.3
This commit is contained in:
maplemei
@@ -32,14 +32,14 @@ class xmOptions {
|
||||
//开始渲染数据
|
||||
this.update(options, true);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 更新数据 + 重新渲染
|
||||
*/
|
||||
update(options = {}, isNew){
|
||||
//记录最新的配置项
|
||||
this.options = {...this.options, ...options};
|
||||
|
||||
|
||||
//如果dom不存在, 则不进行渲染事项
|
||||
let dom = selector(this.options.el);
|
||||
if(!dom){
|
||||
@@ -48,21 +48,21 @@ class xmOptions {
|
||||
}
|
||||
//如果是历史渲染过的数据, 重置一下数据
|
||||
isNew && childs[this.options.el] && childs[this.options.el].reset();
|
||||
|
||||
|
||||
let isRender = false;
|
||||
const onRef = (ref) => childs[this.options.el] = ref;
|
||||
const onReset = result => {
|
||||
this.options.data = result;
|
||||
}
|
||||
|
||||
|
||||
render(<Framework { ...this.options } onReset={ onReset } onClose={ onClose } onRef={ onRef } />, dom);
|
||||
|
||||
|
||||
//记录数据
|
||||
data[this.options.el] = this;
|
||||
//返回多选对象
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 重置多选, 回到初始化的状态
|
||||
*/
|
||||
@@ -76,7 +76,7 @@ class xmOptions {
|
||||
childs[this.options.el].reset();
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 主动打开多选
|
||||
*/
|
||||
@@ -94,14 +94,14 @@ class xmOptions {
|
||||
ref.state.show && ref.onClick();
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取多选选中的数据
|
||||
*/
|
||||
getValue(){
|
||||
return safety(childs[this.options.el].state.sels);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 设置多选数据
|
||||
*/
|
||||
@@ -113,8 +113,8 @@ class xmOptions {
|
||||
childs[this.options.el].value(sels, !!show);
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default xmOptions;
|
||||
export default xmOptions;
|
||||
|
||||
@@ -142,7 +142,7 @@ class Framework extends Component{
|
||||
}
|
||||
}
|
||||
|
||||
on && on({ arr: sels, item, selected: !selected });
|
||||
on && on({ arr: this.state.sels, item, selected: !selected });
|
||||
|
||||
//检查是否为选择即关闭状态, 强制删除情况下不做处理
|
||||
clickClose && !mandatoryDelete && this.onClick();
|
||||
|
||||
@@ -4,35 +4,37 @@ import { h, Component, render } from '@/components/preact'
|
||||
* 标签的渲染
|
||||
*/
|
||||
class Label extends Component{
|
||||
|
||||
|
||||
constructor(options){
|
||||
super(options);
|
||||
}
|
||||
|
||||
|
||||
iconClick(item, selected, disabled, e){
|
||||
this.props.ck(item, selected, disabled, true);
|
||||
//阻止父组件上的事件冒泡
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
render({ data, prop, theme, model, sels }) {
|
||||
//获取变换属性
|
||||
const { name, disabled } = prop;
|
||||
|
||||
|
||||
//获取配置项
|
||||
const label = model.label;
|
||||
const type = label.type;
|
||||
const conf = label[type];
|
||||
|
||||
|
||||
//渲染结果
|
||||
let html = '';
|
||||
|
||||
let innerHTML = true;
|
||||
|
||||
if(type === 'text'){
|
||||
html = sels.map(sel => `${conf.left}${sel[name]}${conf.right}`).join(conf.separator)
|
||||
}else if(type === 'block'){
|
||||
innerHTML = false;
|
||||
//已选择的数据
|
||||
let arr = [...sels];
|
||||
|
||||
|
||||
const style = { backgroundColor: theme.color }
|
||||
//显示的个数
|
||||
const count = conf.showCount <= 0 ? arr.length : conf.showCount;
|
||||
@@ -47,7 +49,7 @@ class Label extends Component{
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
//剩余没显示的数据
|
||||
if(arr.length){
|
||||
html.push(
|
||||
@@ -63,16 +65,19 @@ class Label extends Component{
|
||||
html = sels.map(sel => sel[name]).join(',')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div class="xm-label">
|
||||
<div class="scroll">
|
||||
<div class="label-content">{ html }</div>
|
||||
<div class="scroll">
|
||||
{ innerHTML ?
|
||||
<div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :
|
||||
<div class="label-content">{ html }</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Label;
|
||||
export default Label;
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<% for (var chunk in htmlWebpackPlugin.files.css) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.css[chunk] %>" as="style">
|
||||
<% } %>
|
||||
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
|
||||
<link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
|
||||
<% } %>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<title>xm-select</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="demo1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
setTimeout(() => {
|
||||
var demo1 = xmSelect.render({
|
||||
// 这里绑定css选择器
|
||||
el: '#demo1',
|
||||
// 渲染的数据
|
||||
data: ''.padEnd(11, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true,
|
||||
radio: true,
|
||||
// remoteSearch: true,
|
||||
// remoteMethod: function(val, cb){
|
||||
// setTimeout(() => {
|
||||
// cb([{name: 'xxx' + val, value: 1}])
|
||||
// }, 2000);
|
||||
// },
|
||||
paging: true,
|
||||
})
|
||||
demo1.opened()
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -22,6 +22,5 @@ if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'objec
|
||||
layui.define(function(exports) {
|
||||
exports('xmSelect', xmSelect);
|
||||
});
|
||||
} else {
|
||||
window.xmSelect = xmSelect;
|
||||
}
|
||||
}
|
||||
window.xmSelect = xmSelect;
|
||||
|
||||
@@ -129,6 +129,7 @@ xm-select{
|
||||
& > span{
|
||||
display: flex;
|
||||
color: #FFF;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > i{
|
||||
|
||||
Reference in New Issue
Block a user