yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
132 lines (131 loc) • 4.39 kB
JavaScript
"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../../icons");
const EleTabWrap = require("../../ele-tab-wrap/index");
const EleTabTool = require("../../ele-tab-tool/index");
const EleTabs = require("../../ele-tabs/index");
const _sfc_main = vue.defineComponent({
name: "LayoutTabs",
components: {
ElIcon: elementPlus.ElIcon,
HomeOutlined: icons.HomeOutlined,
EleTabWrap,
EleTabTool,
EleTabs
},
props: {
/** 页签数据 */
tabs: Array,
/** 页签选中 */
active: String,
/** 是否需要固定的主页页签 */
fixedHome: Boolean,
/** 主页路由地址 */
homePath: String,
/** 当前路由是否是主页 */
isHome: Boolean,
/** 页签风格 */
tabStyle: String,
/** 是否支持右键菜单 */
tabContextMenu: [Boolean, Object],
/** 右键菜单 */
tabContextMenus: [Array, Function],
/** 是否支持拖动排序 */
tabSortable: Boolean
},
emits: {
tabClick: (_option) => true,
tabRemove: (_name) => true,
tabContextMenu: (_option) => true,
tabSortChange: (_data) => true
},
setup(_props, { emit }) {
const handleTabItemClick = (option) => {
emit("tabClick", option);
};
const handleTabRemove = (name) => {
emit("tabRemove", name);
};
const handleTabContextMenu = (option) => {
emit("tabContextMenu", option);
};
const handleTabSortChange = (data) => {
emit("tabSortChange", data);
};
return {
handleTabRemove,
handleTabItemClick,
handleTabContextMenu,
handleTabSortChange
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_HomeOutlined = vue.resolveComponent("HomeOutlined");
const _component_ElIcon = vue.resolveComponent("ElIcon");
const _component_EleTabTool = vue.resolveComponent("EleTabTool");
const _component_EleTabs = vue.resolveComponent("EleTabs");
const _component_EleTabWrap = vue.resolveComponent("EleTabWrap");
return vue.openBlock(), vue.createBlock(_component_EleTabWrap, {
type: _ctx.tabStyle,
class: "ele-admin-tabs"
}, {
default: vue.withCtx(() => [
_ctx.fixedHome ? (vue.openBlock(), vue.createBlock(_component_EleTabTool, {
key: 0,
tab: true,
active: _ctx.isHome,
tabName: _ctx.homePath
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "tabHome", { active: _ctx.active }, () => [
vue.createVNode(_component_ElIcon, {
class: "ele-tab-icon",
style: { "vertical-align": "-3px" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_HomeOutlined, { style: { "transform": "scale(1.08)" } })
]),
_: 1
})
])
]),
_: 3
}, 8, ["active", "tabName"])) : vue.createCommentVNode("", true),
_ctx.tabs ? (vue.openBlock(), vue.createBlock(_component_EleTabs, {
key: 1,
items: _ctx.tabs,
modelValue: _ctx.active,
sortable: _ctx.tabSortable,
contextMenu: _ctx.tabContextMenu,
contextMenus: _ctx.tabContextMenus,
mousewheel: true,
handleClick: true,
onTabRemove: _ctx.handleTabRemove,
onTabItemClick: _ctx.handleTabItemClick,
onTabContextMenu: _ctx.handleTabContextMenu,
onTabSortChange: _ctx.handleTabSortChange
}, vue.createSlots({ _: 2 }, [
_ctx.$slots.tabTitle ? {
name: "label",
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, "tabTitle", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
]),
key: "0"
} : void 0
]), 1032, ["items", "modelValue", "sortable", "contextMenu", "contextMenus", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabSortChange"])) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "tabExtra", { active: _ctx.active })
]),
_: 3
}, 8, ["type"]);
}
const layoutTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = layoutTabs;