@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
183 lines (180 loc) • 7.07 kB
JavaScript
import { defineComponent, useSlots, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, mergeProps, withCtx, Fragment, renderList, createBlock, createSlots, unref, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, withDirectives, createTextVNode, toDisplayString, vShow } from 'vue';
import { CircleCheck } from '@element-plus/icons-vue';
const _hoisted_1 = { class: "t_step-wizard" };
const _hoisted_2 = { class: "content-step-main step-content" };
const _hoisted_3 = { class: "step_btn" };
const _hoisted_4 = {
key: 0,
class: "step-last flex-box flex-col flex-ver"
};
const _hoisted_5 = { class: "icon-success" };
const _hoisted_6 = ["innerHTML"];
const _hoisted_7 = { class: "step_btn" };
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "TStepWizard"
},
__name: "index",
props: {
stepData: { default: () => [] },
successTitle: { default: "" },
lastBtnTitle: { default: "\u5B8C\u6210" },
active: { default: 0 },
isShowLastSuccess: { type: Boolean, default: true }
},
emits: ["complete"],
setup(__props, { emit: __emit }) {
const props = __props;
const slots = useSlots();
const stepContent = () => {
return props.isShowLastSuccess ? props.stepData && props.stepData.slice(0, props.stepData.length - 1) : props.stepData;
};
const emits = __emit;
const complete = () => {
emits("complete", props.active);
};
return (_ctx, _cache) => {
const _component_el_step = resolveComponent("el-step");
const _component_el_steps = resolveComponent("el-steps");
const _component_el_button = resolveComponent("el-button");
const _component_el_icon = resolveComponent("el-icon");
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_el_steps, mergeProps({
active: _ctx.active,
"finish-status": "success"
}, _ctx.$attrs), {
default: withCtx(() => [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.stepData, (item, index) => {
return openBlock(), createBlock(_component_el_step, mergeProps(_ctx.$attrs, {
key: index,
title: `${index + 1} ${item.title}`,
icon: item.icon ? item.icon : "",
description: item.description ? item.description : ""
}), createSlots({
_: 2
/* DYNAMIC */
}, [
renderList(unref(slots), (_index, name) => {
return {
name,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(data)))
])
};
})
]), 1040, ["title", "icon", "description"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 3
/* FORWARDED */
}, 16, ["active"]),
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(stepContent(), (val, key) => {
return withDirectives((openBlock(), createElementBlock("div", {
class: "step-first flex-box flex-col flex-ver-h",
key
}, [
val.slotName ? renderSlot(_ctx.$slots, val.slotName, { key: 0 }) : createCommentVNode("v-if", true),
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(val.btnArr, (val1, key1) => {
return openBlock(), createBlock(_component_el_button, {
key: key1,
type: val1.type || "danger",
onClick: ($event) => val1.fn(val1),
disabled: val.disable || false
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(val1.btnTitle),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["type", "onClick", "disabled"]);
}),
128
/* KEYED_FRAGMENT */
))
])
])), [
[vShow, _ctx.active === key]
]);
}),
128
/* KEYED_FRAGMENT */
)),
_ctx.active === _ctx.stepData.length && _ctx.isShowLastSuccess ? (openBlock(), createElementBlock("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
createVNode(_component_el_icon, null, {
default: withCtx(() => [
createVNode(unref(CircleCheck))
]),
_: 1
/* STABLE */
})
]),
createElementVNode("h2", {
class: "success-margin",
innerHTML: _ctx.successTitle
}, null, 8, _hoisted_6),
createElementVNode("div", _hoisted_7, [
!_ctx.stepData[_ctx.stepData.length - 1].lastBtnArr ? (openBlock(), createBlock(_component_el_button, {
key: 0,
type: "danger",
onClick: complete
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.lastBtnTitle),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
})) : (openBlock(true), createElementBlock(
Fragment,
{ key: 1 },
renderList(_ctx.stepData[_ctx.stepData.length - 1].lastBtnArr, (item, key) => {
return openBlock(), createBlock(_component_el_button, {
key,
type: item.type || "danger",
onClick: ($event) => item.fn(item),
disabled: item.disable || false
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(item.btnTitle),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["type", "onClick", "disabled"]);
}),
128
/* KEYED_FRAGMENT */
))
])
])) : createCommentVNode("v-if", true)
])
]);
};
}
});
export { _sfc_main as default };