petite-vue-directives
Version:
A collection of custom directives for petite-vue.
45 lines (42 loc) • 1.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-resize</title>
<style>
html,body{height:100%;margin:0;}
@keyframes motion {
from { width: 200px; height: 100px; }
to { width: 100px; height: 50px; }
}
.play-motion { animation: 3s motion alternate infinite; }
</style>
<script src="../../tailwindcss-jit-cdn-ex.min.js"></script>
</head>
<body>
<div id="app" v-resize:document="domSize=[$v.width, $v.height]" class="flex flex-col justify-center items-center h-full">
<div class="play-motion flex text-center border border-black" v-resize="elemSize=[$v.width, $v.height]">
<span class="m-auto">Motion</span>
</div>
<ul class="font-mono mt-4">
<li>document size: {{ domSize }}</li>
<li>element size: {{ elemSize }}</li>
</ul>
</div>
<script type="module">
import { createApp } from '../../petite-vue.es.js';
import vResize from './index.js';
const app = createApp({
_domSize: [0, 0],
_elemSize: [0, 0],
set domSize(val) { this._domSize = val },
get domSize() { return this._domSize },
set elemSize(val) { this._elemSize = val },
get elemSize() { return this._elemSize.map(Math.round) },
})
app.directive('resize', vResize)
app.mount('#app');
</script>
</body>
</html>