vue-freezeframe
Examples
GH Pages:
http://ctrl-freaks.github.io/freezeframe.js/vue
Codesandbox:
https://codesandbox.io/s/vue-freezeframe-demo-jibmp
TypeScript
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.
Project setup
npm install vue-freezeframeInstall globally
// 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>Local-only usage
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>Slot
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>Options
The options prop accepts all options allowed by freezeframe core
<template>
<vue-freezeframe
src="./something.gif"
:options="{
trigger: false
}"
/>
</template>Events
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>Contributing
Assuming you have already read the instructions in the project root:
- First,
cdinto the appropriate package directory
# start webpack dev server
yarn start # of npm start# lint and fix issues with eslint
yarn lint # or npm run lint# build the project and examples for gh-pages
yarn build # or npm run buildThen commit your changes and submit your PR for review.
License
vue-freezeframe is released under the terms of the MIT License.