115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import { h, Component, render } from 'preact'
|
|
import { isFunction } from '@/common/util'
|
|
|
|
/**
|
|
* 标签的渲染
|
|
*/
|
|
class Label extends Component{
|
|
|
|
constructor(options){
|
|
super(options);
|
|
}
|
|
|
|
iconClick(item, selected, disabled, e){
|
|
this.props.ck(item, selected, disabled, true);
|
|
//阻止父组件上的事件冒泡
|
|
e.stopPropagation();
|
|
}
|
|
|
|
scrollFunc(e){
|
|
if(e.wheelDeltaX == 0){
|
|
let child = this.labelRef.getElementsByClassName('xm-label-block');
|
|
let sum = 10;
|
|
for(let i = 0; i < child.length; i++){
|
|
sum += child[i].getBoundingClientRect().width + 5;
|
|
}
|
|
let width = this.labelRef.getBoundingClientRect().width;
|
|
let max = sum > width ? sum - width : width;
|
|
let left = this.labelRef.scrollLeft + e.deltaY;
|
|
left < 0 && (left = 0);
|
|
left > max && (left = max);
|
|
this.labelRef.scrollLeft = left;
|
|
}
|
|
}
|
|
|
|
componentDidMount(){
|
|
if (this.labelRef.addEventListener) {
|
|
this.labelRef.addEventListener('DOMMouseScroll', this.scrollFunc.bind(this), false);
|
|
}
|
|
if(this.labelRef.attachEvent){
|
|
this.labelRef.attachEvent('onmousewheel', this.scrollFunc.bind(this));
|
|
}
|
|
this.labelRef.onmousewheel = this.scrollFunc.bind(this);
|
|
}
|
|
|
|
render(config) {
|
|
const { data, prop, theme, model, sels, autoRow } = config;
|
|
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;
|
|
|
|
html = arr.splice(0, count).map(sel => {
|
|
const styleProps = { width: conf.showIcon ? 'calc(100% - 20px)' : '100%', }
|
|
const className = ['xm-label-block', sel[disabled] ? 'disabled':''].join(' ');
|
|
return (
|
|
<div class={className} style={ style }>
|
|
{ conf.template && isFunction(conf.template) ? (
|
|
<span style={ styleProps } dangerouslySetInnerHTML={{ __html: conf.template(sel, arr) }}></span>
|
|
) : (
|
|
<span style={ styleProps }>{ sel[name] }</span>
|
|
) }
|
|
{ conf.showIcon && <i class="xm-iconfont xm-icon-close" onClick={ this.iconClick.bind(this, sel, true, sel[disabled]) }></i> }
|
|
</div>
|
|
)
|
|
})
|
|
|
|
//剩余没显示的数据
|
|
if(arr.length){
|
|
html.push(
|
|
<div class="xm-label-block" style={ style }>
|
|
+ { arr.length }
|
|
</div>
|
|
)
|
|
}
|
|
}else{
|
|
if(sels.length && conf && conf.template){
|
|
html = conf.template(data, sels);
|
|
}else{
|
|
html = sels.map(sel => sel[name]).join(',')
|
|
}
|
|
}
|
|
|
|
const className = ['xm-label', autoRow ? 'auto-row' : 'single-row'].join(' ');
|
|
return (
|
|
<div class={ className }>
|
|
<div class="scroll" ref={ ref => this.labelRef = ref }>
|
|
{ innerHTML ?
|
|
<div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :
|
|
<div class="label-content">{ html }</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Label;
|