vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
266 lines (265 loc) • 10.4 kB
JavaScript
import { defineComponent, h, ref, reactive, nextTick, computed, watchEffect } from 'vue';
import XEUtils, { isNumber, isString } from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { getFuncText, multiDebounce } from '../../tools/utils';
export default defineComponent({
name: 'VxeCard',
props: {
isCollapse: Boolean,
loading: Boolean,
round: {
type: [Boolean, String, Number],
default: function () { return GlobalConfig.card.round; }
},
width: [String, Number],
rotatingHeight: [String, Number],
shadow: {
type: Boolean,
default: function () { return GlobalConfig.card.shadow; }
},
transform: [Boolean, String],
title: String,
hoverEffect: String,
bordered: {
type: Boolean,
default: function () { return GlobalConfig.card.bordered; }
},
rotateMode: {
type: String,
default: 'horizontal'
}
},
emits: [
'rotate',
'hover',
'collapse',
'expand',
'update:is-collapse'
],
setup: function (props, context) {
var slots = context.slots, emit = context.emit;
var xID = XEUtils.uniqueId();
var reactData = reactive({
inited: false,
isCollapse: !!props.isCollapse,
tempExpand: false
});
var refBox = ref();
var refElem = ref();
var refBody = ref();
var refHeader = ref();
var refFooter = ref();
var refFront = ref();
var refBack = ref();
watchEffect(function () {
reactData.isCollapse = !!props.isCollapse;
});
var refMaps = {
refElem: refElem
};
var $vxcard = {
xID: xID,
props: props,
context: context,
reactData: reactData,
getRefMaps: function () { return refMaps; }
};
var cardMethods = {};
var getCollapseIf = function () {
return reactData.isCollapse;
};
var toggleCollapse = function () {
var isCollapse = !reactData.isCollapse;
reactData.isCollapse = isCollapse;
emit('update:is-collapse', isCollapse);
emit(isCollapse ? 'collapse' : 'expand');
return nextTick();
};
var perhapsExpand = function () {
if (props.transform && reactData.isCollapse) {
expand();
}
};
var expand = function () {
if (reactData.isCollapse) {
return toggleCollapse();
}
return nextTick();
};
var handleHoverCover = function () {
if (props.transform === 'hover' || props.transform === 'click-hover') {
reactData.tempExpand = true;
}
};
var handleCardLeave = function () {
if (props.transform === 'hover' || props.transform === 'click-hover') {
reactData.tempExpand = false;
}
};
var mouseInOut = multiDebounce([handleHoverCover, handleCardLeave], 200);
var collapse = function () {
if (!reactData.isCollapse) {
return toggleCollapse();
}
return nextTick();
};
var handleHeaderClick = function (event) {
event.stopPropagation();
if (props.transform === true || props.transform === 'click') {
emit('update:is-collapse', true);
}
else if (props.transform === 'click-hover') {
emit('update:is-collapse', !reactData.isCollapse);
}
return nextTick();
};
cardMethods = {
dispatchEvent: function (type, params, evnt) {
emit(type, Object.assign({ $card: $vxcard, $event: evnt }, params));
},
getCollapseIf: getCollapseIf,
toggleCollapse: toggleCollapse,
expand: expand,
collapse: collapse
};
Object.assign($vxcard, cardMethods);
var dynamicWrapperWidth = computed(function () {
var styleWidthRegex = /^\d+(\.\d+)?(px|%|em|rem|pt)?$/i;
var pureNumberRegex = /^\d+$/;
return isNumber(props.width) || (isString(props.width) && pureNumberRegex.test(props.width))
? "".concat(props.width, "px")
: isString(props.width) && styleWidthRegex.test(props.width)
? props.width : undefined;
});
var dynamicRotateHeight = computed(function () {
var styleHeightRegex = /^\d+(\.\d+)?(px|em|rem|pt)?$/i;
var pureNumberRegex = /^\d+$/;
return isNumber(props.rotatingHeight) || (isString(props.rotatingHeight) && pureNumberRegex.test(props.rotatingHeight))
? "".concat(props.rotatingHeight, "px")
: isString(props.rotatingHeight) && styleHeightRegex.test(props.rotatingHeight)
? props.rotatingHeight
: undefined;
});
var renderCardHeader = function () {
var _a, _b;
return h('div', {
ref: refHeader,
class: 'vxe-card-header',
onClick: handleHeaderClick
}, [
(_b = (_a = slots.header) === null || _a === void 0 ? void 0 : _a.call(slots, { title: props.title })) !== null && _b !== void 0 ? _b : h('span', {
class: 'vxe-card-header--title'
}, getFuncText(props.title))
]);
};
var renderCardFront = function () { return h('div', {
ref: refFront,
class: [
'vxe-card',
'vxe-card-rotating-front',
(isCol.value ? 'vxe-card-cover vxe-card-cover--circle'
: {
'vxe-card--shadow': props.shadow,
'vxe-card--press': props.hoverEffect === 'press',
'vxe-card--scale': props.hoverEffect === 'scale'
})
]
}, [
slots.header || props.title ? renderCardHeader() : null,
renderCardBody(),
renderCardFooter()
]); };
var renderCardBack = function () {
var _a, _b, _c, _d;
return h('div', {
ref: refBack,
class: [
'vxe-card',
'vxe-card-rotating-back',
(isCol.value ? 'vxe-card-cover vxe-card-cover--circle'
: {
'vxe-card--shadow': props.shadow,
'vxe-card--press': props.hoverEffect === 'press',
'vxe-card--scale': props.hoverEffect === 'scale'
})
]
}, [
h('div', {
class: 'vxe-card-body'
}, [
(_d = (_b = (_a = slots.back) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : (_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots)) !== null && _d !== void 0 ? _d : ''
])
]);
};
var renderCardBody = function () {
var _a;
return h('div', {
ref: refBody,
class: 'vxe-card-body'
}, [
(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)
]);
};
var renderCardFooter = function () {
var _a;
return slots.footer ? h('div', {
ref: refFooter,
class: 'vxe-card-footer'
}, [
(_a = slots.footer) === null || _a === void 0 ? void 0 : _a.call(slots)
]) : null;
};
var isCol = computed(function () { return (reactData.isCollapse && !reactData.tempExpand) && props.transform; });
var renderVN = function () {
return props.hoverEffect === 'rotate'
? h('div', {
ref: refBox,
class: [
'vxe-card-rotating-box',
"vxe-card--rotating-".concat(props.rotateMode)
],
style: {
width: dynamicWrapperWidth.value,
height: props.rotateMode !== 'diagonal' ? dynamicRotateHeight.value : undefined
}
}, [
renderCardFront(),
renderCardBack()
])
: h('div', {
ref: refElem,
class: [
'vxe-card',
(isCol.value ? 'vxe-card-cover vxe-card-cover--circle'
: {
'vxe-card--shadow': props.shadow,
'vxe-card--press': props.hoverEffect === 'press',
'vxe-card--scale': props.hoverEffect === 'scale'
})
],
style: isCol.value ? null : {
width: dynamicWrapperWidth.value,
borderRadius: (props.round === false || props.round === undefined) ? 'unset'
: props.round === true ? '5px'
: isNumber(props.round) ? "".concat(props.round, "px")
: props.round
},
onClick: perhapsExpand,
onMouseover: mouseInOut.handleHoverCover,
onMouseout: mouseInOut.handleCardLeave
}, isCol.value ? h('span', {
class: 'vxe-cover--content'
}, getFuncText(props.title))
: [
slots.header || props.title ? renderCardHeader() : null,
renderCardBody(),
renderCardFooter()
]);
};
$vxcard.renderVN = renderVN;
return $vxcard;
},
render: function () {
return this.renderVN();
}
});