GH Pages:
http://ctrl-freaks.github.io/freezeframe.js/vue
Codesandbox:
https://codesandbox.io/s/vue-freezeframe-demo-jibmp
vue-freezeframe
is now written in TypeScript! The library will still support usage in JavaScript, but if your project uses TypeScript, you'll have access to Freezeframe's type definitions, improved input validation, and depending on your IDE/text editor, autocompletion/intellisense.
For advanced use cases, take a look at the demo source, or take a look at the types exported from Freezeframe.
npm install vue-freezeframe
// main.ts / main.js
import Vue from 'vue';
import VueFreezeframe from 'vue-freezeframe';
Vue.use(VueFreezeframe);
<!-- any component -->
<template>
<vue-freezeframe src="./something.gif" />
</template>
TypeScript:
<template>
<vue-freezeframe src="./something.gif" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { VueFreezeframe } from 'vue-freezeframe'
@Component({
components: {
VueFreezeframe,
},
})
export default class App extends Vue {}
</script>
JavaScript:
<template>
<vue-freezeframe src="./something.gif" />
</template>
<script>
import { VueFreezeframe } from 'vue-freezeframe';
export default {
components: {
VueFreezeframe,
}
};
</script>
Using the default slot, you can freeze any .gifs inside, while safely including other content too.
<template>
<vue-freezeframe
:options="{
trigger: 'click'
}"
>
<h1>Images</h1>
<img src="./1.gif">
<img src="./2.gif">
<p>
Other content here
</p>
</vue-freezeframe>
</template>
The options
prop accepts all options allowed by freezeframe core
<template>
<vue-freezeframe
src="./something.gif"
:options="{
trigger: false
}"
/>
</template>
All freezeframe events are emitted from the freezeframe component:
- start
- stop
- toggle
<template>
<vue-freezeframe
src="./something.gif"
@start="onStart"
@stop="onStop"
@toggle="onToggle"
/>
</template>
Assuming you have already read the instructions in the project root:
- First,
cd
into the appropriate package directory
# start webpack dev server
npm start
# lint and fix issues with eslint
npm run lint
# run unit tests
npm test
# build the project and examples for gh-pages
npm run build
Then commit your changes and submit your PR for review.
vue-freezeframe
is released under the terms of the MIT License.