vxe-pc-ui/es/split/src/split-pane.js

A vue based PC component library

import { defineComponent, ref, h, reactive, watch, provide, inject, onMounted, onUnmounted } from 'vue';
import { createEvent } from '../../ui';
import { assembleSplitItem, destroySplitItem } from './util';
import XEUtils from 'xe-utils';
export default defineComponent({
    name: 'VxeSplitPane',
    props: {
        name: [Number, String],
        width: [Number, String],
        height: [Number, String],
        showAction: Boolean,
        minWidth: {
            type: [Number, String],
            default: () => null
        },
        minHeight: {
            type: [Number, String],
            default: () => null
        }
    },
    emits: [],
    setup(props, context) {
        const { emit, slots } = context;
        const xID = XEUtils.uniqueId();
        const $xeSplit = inject('$xeSplit', null);
        const refElem = ref();
        const paneConfig = reactive({
            id: xID,
            name: props.name,
            width: props.width,
            height: props.height,
            minWidth: props.minWidth,
            minHeight: props.minHeight,
            showAction: props.showAction,
            isVisible: true,
            isExpand: true,
            renderWidth: 0,
            resizeWidth: 0,
            foldWidth: 0,
            renderHeight: 0,
            resizeHeight: 0,
            foldHeight: 0,
            slots: slots
        });
        const reactData = reactive({});
        const internalData = {};
        const computeMaps = {};
        const refMaps = {
            refElem
        };
        const $xeSplitItem = {
            xID,
            props,
            context,
            reactData,
            internalData,
            getRefMaps: () => refMaps,
            getComputeMaps: () => computeMaps
        };
        const dispatchEvent = (type, params, evnt) => {
            emit(type, createEvent(evnt, { $splitPane: $xeSplitItem }, params));
        };
        const splitPaneMethods = {
            dispatchEvent
        };
        const splitPanePrivateMethods = {};
        Object.assign($xeSplitItem, splitPaneMethods, splitPanePrivateMethods);
        const renderVN = () => {
            return h('div', {
                ref: refElem
            });
        };
        watch(() => props.name, (val) => {
            paneConfig.name = val;
        });
        watch(() => props.width, (val) => {
            paneConfig.width = val;
        });
        watch(() => props.height, (val) => {
            paneConfig.height = val;
        });
        watch(() => props.minWidth, (val) => {
            paneConfig.minWidth = val;
        });
        watch(() => props.minHeight, (val) => {
            paneConfig.minHeight = val;
        });
        watch(() => props.showAction, (val) => {
            paneConfig.showAction = val;
        });
        onMounted(() => {
            const elem = refElem.value;
            if ($xeSplit && elem) {
                assembleSplitItem($xeSplit, elem, paneConfig);
            }
        });
        onUnmounted(() => {
            if ($xeSplit) {
                destroySplitItem($xeSplit, paneConfig);
            }
        });
        provide('$xeSplitItem', $xeSplitItem);
        $xeSplitItem.renderVN = renderVN;
        return $xeSplitItem;
    },
    render() {
        return this.renderVN();
    }
});