JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <div>
    <el-button @click="click" style="z-index:1;position:relative;">Click here to show dialog</el-button>
    <div style="position:fixed;width:200px;top:0;bottom:0;left:0;background-color:blue;"></div>
    <el-dialog title="Tips" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>Can't close me by clicking blue area.</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
      </span>
    </el-dialog>

  </div>
</div>

CSS

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

.el-dialog {
  left: 100px;
}

JavaScript

var Main = {
  data() {
    return {
      dialogVisible: false
    };

  },
  methods: {
    click() {
      this.dialogVisible = true;
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')