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
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);
|
|
}
|
|
};
|
|
|