daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
10.12k stars 620 forks source link

How can i create a custom-able using Vue 3 ? #673

Open ulissepress opened 2 years ago

ulissepress commented 2 years ago

Environments

Description

I would like to create a custom-able but in the docs I only found examples using react. I would like to use Vue3 for that.

Something like this: https://daybrush.com/moveable/storybook/?path=/story/make-custom-able--dimensionviewable

daybrush commented 2 years ago

This is an example based on JSX.

You can use it as Renderer.createElement. Demos of other frameworks are still being prepared.

const DimensionViewable = {
    name: "dimensionViewable",
    props: {},
    events: {},
    render(moveable: MoveableManagerInterface<any, any>, Renderer: Renderer) {
        const rect = moveable.getRect();

        // Add key (required)
        // Add class prefix moveable-(required)
        return Renderer.createElement("div", { key: "dimension-viewer", ...}, ....);
    }
} as const;