You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

119 lines
3.2 KiB

import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { createEvent } from '../../ui';
import { assembleTabItem, destroyTabItem } from './util';
export default {
name: 'VxeTabPane',
props: {
title: [String, Number],
name: [String, Number],
icon: String,
titleWidth: [String, Number],
titleAlign: [String, Number],
preload: Boolean,
permissionCode: [String, Number]
},
inject: {
$xeTabs: {
default: null
}
},
data() {
const xID = XEUtils.uniqueId();
const reactData = {};
const tabConfig = {
id: xID,
title: '',
name: '',
icon: '',
titleWidth: '',
titleAlign: '',
preload: false,
permissionCode: '',
slots: {}
};
return {
xID,
reactData,
tabConfig
};
},
computed: Object.assign({}, {}),
methods: {
//
// Method
//
dispatchEvent(type, params, evnt) {
const $xeTabPane = this;
$xeTabPane.$emit(type, createEvent(evnt, { $tabPane: $xeTabPane }, params));
},
//
// Render
//
renderVN(h) {
return h('div', {
ref: 'refElem'
}, []);
}
},
watch: {
title(val) {
const $xeTabPane = this;
const tabConfig = $xeTabPane.tabConfig;
tabConfig.title = val;
},
name(val) {
const $xeTabPane = this;
const tabConfig = $xeTabPane.tabConfig;
tabConfig.name = val;
},
icon(val) {
const $xeTabPane = this;
const tabConfig = $xeTabPane.tabConfig;
tabConfig.icon = val;
},
permissionCode(val) {
const $xeTabPane = this;
const tabConfig = $xeTabPane.tabConfig;
tabConfig.permissionCode = val;
}
},
created() {
const $xeTabPane = this;
const props = $xeTabPane;
const slots = $xeTabPane.$scopedSlots;
const tabConfig = $xeTabPane.tabConfig;
Object.assign(tabConfig, {
title: props.title,
name: props.name,
icon: props.icon,
titleWidth: props.titleWidth,
titleAlign: props.titleAlign,
preload: props.preload,
permissionCode: props.permissionCode,
slots
});
},
mounted() {
const $xeTabPane = this;
const slots = $xeTabPane.$scopedSlots;
const $xeTabs = $xeTabPane.$xeTabs;
const tabConfig = $xeTabPane.tabConfig;
tabConfig.slots = slots;
const elem = $xeTabPane.$refs.refElem;
if ($xeTabs && elem) {
assembleTabItem($xeTabs, elem, tabConfig);
}
},
beforeDestroy() {
const $xeTabPane = this;
const tabConfig = $xeTabPane.tabConfig;
const $xeTabs = $xeTabPane.$xeTabs;
if ($xeTabs) {
destroyTabItem($xeTabs, tabConfig);
}
},
render(h) {
return this.renderVN(h);
}
};