wetrade-design
Version:
一款多语言支持Vue3的UI框架
148 lines • 5.01 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
import { ref, defineComponent, watch } from 'vue';
import useConfigInject from '../../_util/hooks/useConfigInject';
import classNames from '../../_util/classNames';
export var XAxisProps = function XAxisProps() {
return {
left: {
type: [String, Number],
default: '28px'
},
right: {
type: [String, Number],
default: '4px'
},
xLabelList: {
type: Array,
default: function _default() {
return [];
}
},
// 对齐方式，shadow 居中对齐，line 两端对齐
isShowTooltipAxis: {
type: String,
default: 'shadow'
},
// 是否显示全部x轴label
showCustomXAll: {
type: Boolean,
default: false
},
// X轴文字是否溢出隐藏
xLabelOverflow: {
type: Boolean,
default: false
}
};
};
var XAxis = defineComponent({
name: 'WdXAxis',
props: XAxisProps(),
setup: function setup(props, _ref) {
_objectDestructuringEmpty(_ref);
var _useConfigInject = useConfigInject('xAxis', props),
prefixCls = _useConfigInject.prefixCls;
var mainRef = ref();
var labelList = ref([]);
// 更新X轴
var updateXLabel = function updateXLabel(xLabel) {
labelList.value = [];
var labelLen = xLabel.length;
for (var i = 0; i < labelLen; i++) {
// label少于4个 全部显示
// 是第一个，或最后一个，或处于中间值，显示
var isFirst = !i,
isEnd = i === labelLen - 1;
var isShow = false;
if (_typeof(xLabel[i]) === 'object') {
var _xLabel$i;
isShow = !!((_xLabel$i = xLabel[i]) !== null && _xLabel$i !== void 0 && _xLabel$i.isShow);
} else {
isShow = props.showCustomXAll || isFirst || isEnd || i === Math.ceil((labelLen - 1) / 2) || labelLen <= 4;
}
var text = xLabel[i];
if (_typeof(xLabel[i]) === 'object') {
var _xLabel$i2;
text = ((_xLabel$i2 = xLabel[i]) === null || _xLabel$i2 === void 0 ? void 0 : _xLabel$i2.text) || text;
}
labelList.value.push({
isShow: isShow,
text: text
});
// 如果指示器类型是shadow 阴影，每个模块所占比例都一致，居中对齐
labelList.value[i].textAlign = props.isShowTooltipAxis === 'shadow' ? 'center' : getTextAlign(isFirst, labelLen, isEnd).textAlign;
labelList.value[i].flex = props.isShowTooltipAxis === 'shadow' ? 1 : isFirst || isEnd ? 1 : 2;
}
};
// 对齐方式
function getTextAlign(isFirst, labelLen, isEnd) {
var textAlignMap = [[function () {
return isFirst;
}, function () {
return {
textAlign: labelLen === 1 ? 'center' : 'left'
};
} // 执行函数
], [function () {
return isEnd;
}, function () {
return {
textAlign: 'right'
};
}], [function () {
return !isFirst && !isEnd;
}, function () {
return {
textAlign: 'center'
};
}]];
// 获取符合条件的子数组
var getDescribe = textAlignMap.find(function (item) {
return item[0]();
});
// 子数组存在则运行子数组中的第二个元素（执行函数）
return getDescribe ? getDescribe[1]() : '';
}
watch(function () {
return props.xLabelList;
}, function (val) {
return updateXLabel(val);
}, {
immediate: true
});
return function () {
var _classNames;
var list = labelList.value || [];
var wrapperStyle = {
paddingLeft: typeof props.left === 'string' ? props.left : props.left + 'px',
paddingRight: typeof props.right === 'string' ? props.right : props.right + 'px'
};
var itemClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls.value + '__item', true), _defineProperty(_classNames, prefixCls.value + '__ellipsis', props.xLabelOverflow), _classNames));
return _createVNode("div", {
"class": "".concat(prefixCls.value),
"ref": mainRef,
"style": wrapperStyle
}, [list.map(function (arr, index) {
var style = {
textAlign: arr.textAlign,
overflow: arr.isShow ? 'visible' : 'hidden',
flex: arr.flex
};
var textStyle = {
display: arr.isShow ? 'block' : 'none'
};
return _createVNode("span", {
"class": itemClassName,
"key": index,
"style": style
}, [_createVNode("span", {
"style": textStyle
}, [_createTextVNode(" "), arr.text])]);
})]);
};
}
});
export default XAxis;