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">
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称" for="name">
    <el-input v-model="form.name" id="name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" for="region">
    <el-select v-model="form.region" placeholder="请选择活动区域" id="region">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="即时配送" for="delivery">
    <el-switch v-model="form.delivery" id="delivery"></el-switch>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</div>

SCSS

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

Babel + JSX

var Main = {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')