xw-drag-drop-layout v0.9.1

xw-drag-drop-layout

Vue实现的拖拽布局组件

使用说明

1. 安装

npm i xw-drag-drop-layout

2. 入口文件中引入组件定义

import 'xw-drag-drop-layout'
import 'xw-drag-drop-layout/dist/xw-drag-drop-layout.css'

3. 使用

<xw-drag-drop-layout></xw-drag-drop-layout>

参数说明

方法说明

setState(states: DragLayoutContainer.states): void

设置xw-drag-drop-layout组件状态，比如：

    this.dragLayoutContainerRef.setState({
        draggerMargin: 5,
        cols: 36,
        canExceedHorizontalViewingArea: true,
        showGridLine: true,
        animation: true
    })

appendDraggerNode(node: draggerNode): void

添加拖拽节点，比如:

    this.dragLayoutContainerRef.appendDraggerNode({
        id: uuidv4(),
        comp: 'XanwayEmpty',
        w: 2,
        h: 4
    })

initOutsideDragNode(node: draggerNode): void

添加从外部拖拽进入画布的节点，比如:

    this.$refs.dragLayoutContainer.initOutsideDragNode(
        {
            comp: {
                tag: 'XanwayEmpty',
                data: {
                props: {
                    meta: {
                    a: 1,
                    b: 2,
                    c: 3
                    }
                }
                }
            },
            w: 5,
            h: 3
        }
    )

类型说明

拖拽节点类型draggerNode

    //  contentVNode类型与vue中createElement的参数对象类型对应
    interface contentVNode {
        tag: string;
        data?: VNodeData; 
        children?: VNodeChildren;
    }

interface draggerNode {
    id: string; //  唯一标识
    title: string;  //  标题
    comp: contentVNode;   //  内容组件对象
    x: number;  //  拖拽节点左上角横坐标网格索引
    y: number;  //  拖拽节点左上角纵坐标网格索引
    w: number;  //  拖拽节点宽度（占据网格数）
    h: number;  //  拖拽节点高度（占据网格数）
}

//  from vue.d.ts
interface VNodeData {
    key?: string | number;
    slot?: string;
    scopedSlots?: { [key: string]: ScopedSlot | undefined };
    ref?: string;
    refInFor?: boolean;
    tag?: string;
    staticClass?: string;
    class?: any;
    staticStyle?: { [key: string]: any };
    style?: string | object[] | object;
    props?: { [key: string]: any };
    attrs?: { [key: string]: any };
    domProps?: { [key: string]: any };
    hook?: { [key: string]: Function };
    on?: { [key: string]: Function | Function[] };
    nativeOn?: { [key: string]: Function | Function[] };
    transition?: object;
    show?: boolean;
    inlineTemplate?: {
        render: Function;
        staticRenderFns: Function[];
    };
    directives?: VNodeDirective[];
    keepAlive?: boolean;
}