1.0.20 • Published 3 years ago
vue-stories v1.0.20
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