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>

参数说明

参数	说明	类型	默认值	是否必须
defaultList	拖拽节点列表	Array<draggerNode>	[]	true
defaultDraggerMargin	拖拽节点之间的间距	number	5	false
defaultCols	水平方向网格数量	number	36	false
defaultCanExceedHorizontalViewingArea	拖拽节点是否可超出水平可视区域	boolean	false	false
defaultShowGridLine	是否展示网格线	boolean	false	false
defaultAnimation	是否启动拖拽动画	boolean	true	false
defaultCanvasMode	画布模式	'preview' | 'design'	'preview'	false
defaultCanOverlap	是否可重叠	boolean	false	false
theme	主题	'xw-white' | 'xw-black'	'xw-white'	false
change	节点列表发生变化回调	EventEmitter<draggerNode[]>	-	-
drag-node-detail	编辑节点回调	EventEmitter	-	-
drag-node-export	拖拽节点回调	EventEmitter	-	-
defaultUsage	使用方式	string	'dashboard' | 'generator'	false

方法说明

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