[vue-moveable] リサイズ・拡大縮小をする

Vueでリサイズ・拡大縮小するサンプルです。
「vue-moveable」を使用したバージョンです。

リサイズ

リサイズは、一番外側の背面だけ大きさが変更され、中身のテキストは拡大縮小されません。

コード

template

<template>
<div id="app">
    <moveable
        class="moveable"
        v-bind="moveable"
        @resize="handleResize"
    >
        <span>Sample</span>
    </moveable> 
</div>
</template>

script

<script>
const Moveable = window[ 'VueMoveable' ];
Vue.component( 'moveable', Moveable );
    
export default {
    data() {
        return {
            moveable: {
                resizable: true
            }
        };
    },
    methods: {
        handleResize( {
          target, width, height, delta,
        } ) {
          delta[0] && ( target.style.width = `${width}px` );
          delta[1] && ( target.style.height = `${height}px` );
        }
    }
};
</script>

拡大縮小

拡大縮小は、中身のテキストごと拡大縮小されます。

コード

template

<template>
<div id="app">
    <moveable
        class="moveable"
        v-bind="moveable"
        @scale="handleScale"
    >
        <span>Sample</span>
    </moveable>
</div>
</template>

script

<script>
const Moveable = window[ 'VueMoveable' ];
Vue.component( 'moveable', Moveable );
    
export default {
    data() {
        return {
            moveable: {
                scalable: true
            }
        };
    },
    methods: {
        handleScale( { target, transform, scale } ) {
            target.style.transform = transform;
        }
    }
};
</script>

メモ

「scalable・resizable・warpable」は、一緒には使えないようでどれか一つだけ指定します。
「draggable」とは、一緒に使えます。