Vue Stories
✌🏻Social media like stories and status for Vue.js.
🚀
Installation npm
npm install vue-stories
yarn
yarn add vue-stories
Import
import VueStories from 'vue-stories';
👨💻
Usage<template>
<div @click="openStories">
<VueStories
:avatarImage=""
:avatarTitle=""
:stories="[]"
:isPause=true
:header=true
:isSave=true
ref="vueStories"
v-on:onNextFrame="actionOnNext"
v-on:onPreviousFrame="actionOnPrevious"
v-on:onComplete="actionOnComplete"
v-on:onFullscreen="actionOnFullscreen"
v-on:onSave="actionOnSave"
/>
</template>
<script>
import VueStories from 'vue-stories';
export default {
name: 'App',
components: { VueStories },
data() {
return {
strories:[
{
id: String || Number ,
url: String ,
title: String ,
subTitle: String,
styles:{
backgroundSize:'contain',
}
]
}
},
methods: {
//open vue stories
openStories(){
this.$refs.vueStories.toggle_fullscreen(true)
},
actionOnNext(id)
actionOnPrevious(id)
actionOnComplete(id)
actionOnFullscreen(status)
actionOnSave(status, id)
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
avatarImage |
String |
Image for your avatar | /assets/sample.png |
avatarTitle |
String |
Title fo your avatar | '' |
stories |
Array |
List of the stories | [] |
isPause |
Boolean |
Pause the story or not | true |
header |
Boolean |
Show the header or not | true |
isSave |
Boolean |
Show the save button or not | true |
Events
Event name | Usage |
---|---|
onNextFrame |
Returns id of the previous frame |
onPreviousFrame |
Returns the id of the next frane |
onComplete |
Returns the id of the last frame |
onSave |
Returns true or false with the current frame id |
⭐
Support the project If you like my work please share and give a star