JSFiddle - React, Tailwind, and code Playground

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <p>当前正在进行第 {{ current + 1 }} 步</p>
    <steps :current="current">
        <step title="步骤1" content="Hi">Hello</step>
        <step title="步骤2"></step>
        <step title="步骤3"></step>
        <step title="步骤4"></step>
    </steps>
    <i-button type="primary" @click="next">Next step</i-button>
</div>

SCSS

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}

Babel + JSX

var Main = {
        data () {
            return {
                current: 0
            }
        },
        methods: {
            next () {
                if (this.current == 3) {
                    this.current = 0;
                } else {
                    this.current += 1;
                }
            }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')