JSFiddle - React, Tailwind, and code Playground

by linus

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <el-button type="text" @click="open4">Click to open Message Box</el-button>
</template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

var Main = {
		data: function(){
    	return {a: "hello world"}
    },
    methods: {
      open4() {
        const h = this.$createElement, that = this;
        setInterval(function(){
        	that.a += 1;
        }, 1000);
        var msg = this.$msgbox({
          title: 'Message',
          message: h('div', this.a),
          showCancelButton: true,
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = 'Loading...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
        console.log(msg);
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')