JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">

<el-dialog title="添加类别" v-model="dialogFormVisible" label-width="200">
      <el-form>
        <el-form-item label="类别名称" label-width="200">
          <el-input></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-button type="success" @click.native="dialogFormVisible=true">添加类别</el-button>
</div>

SCSS

@import url("//unpkg.com/element-ui/lib/theme-default/index.css");

Babel + JSX

var Main = {
    data() {
      return {
        dialogFormVisible: false,
        form: {
          name: '',
          region: ''
        },
        formLabelWidth: '80px'
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')