JSFiddle - React, Tailwind, and code Playground

by mizobata

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 :plain="true" @click="open5">message</el-button>
  <el-button :plain="true" @click="open6">success</el-button>
  <el-button :plain="true" @click="open7">warning</el-button>
  <el-button :plain="true" @click="open8">error</el-button>
</template>
</div>

SCSS

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

Babel + JSX

var Main = {
    methods: {
      open5() {
        this.$message({
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: 'This is a message.<br≥testtesttestestste<br>testestesteatestsetes',
          duration: 1000 * 60
        });
      },

      open6() {
        this.$message({
          showClose: true,
          message: 'Congrats, this is a success message.<br>testtest',
          type: 'success'
        });
      },

      open7() {
        this.$message({
          showClose: true,
          message: 'Warning, this is a warning message.',
          type: 'warning'
        });
      },

      open8() {
        this.$message({
          showClose: true,
          message: 'Oops, this is a error message.',
          type: 'error'
        });
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')