Skip to content

Instantly share code, notes, and snippets.

@daphen
Created February 25, 2016 12:42
Show Gist options
  • Save daphen/f2bb8d58828ef7b54334 to your computer and use it in GitHub Desktop.
Save daphen/f2bb8d58828ef7b54334 to your computer and use it in GitHub Desktop.
<template lang="jade">
component(
:is="stepHandler.currentStep"
transition="switch-step"
transition-mode="out-in"
:stepHandler="stepHandler"
)
</template>
<style lang="stylus">
h1
color: #33BA82
background-color: #33495F
text-align center
width: 50%
margin: auto
button
margin-top: 15px
.switch-step-transition
transition: all .3s ease
.switch-step-enter
transform: translateX(50%)
opacity: 0
.switch-step-leave
transform: translateX(-50%)
opacity: 0
</style>
<script>
var Step1 = require('./regflow/step1.vue'),
Step2 = require('./regflow/step2.vue');
export default {
data: function () {
return {
stepHandler: {
currentStep: 'step1',
setCurrentStep: function(step) {
this.currentStep = step;
}
}
}
},
components: {
step1: Step1,
step2: Step2
}
}
</script>
<template lang="jade">
#step1(:stepHandler="stepHandler")
h1 {{msg}}
button(@click='al') text
</template>
<style lang="stylus">
</style>
<script>
export default {
props: ['stepHandler'],
data: function () {
return {
msg: 'Hello World Step 1'
}
},
methods: {
al: function(){
console.log(this.stepHandler??)
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment