JSFiddle - React, Tailwind, and code Playground

by Kris

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <poptip
     
        title="Are you sure you want to delete this item?"
    >
        <i-button>Delete</i-button>
    </poptip>
    <poptip
        confirm
        title="Are you sure delete this task?"
        @on-ok="ok"
        @on-cancel="cancel"
        ok-text="yes"
        cancel-text="no">
        <i-button>Internationalization</i-button>
    </poptip>
</div>

SCSS

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

Babel + JSX

var Main = {
        methods: {
            ok () {
                this.$Message.info('You click ok');
            },
            cancel () {
                this.$Message.info('You click cancel');
            }
        }
    }

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