JSFiddle - React, Tailwind, and code Playground

by zhujunxi

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <i-form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80">
        <form-item label="姓名" prop="user">
            <i-input v-model="formInline.user"></i-input>
        </form-item>
        <form-item label="性别" prop="gender">
            <radio-group v-model="formInline.gender">
                <radio  :label="item.id" v-for="item,index of demoData" :key="index">
                  {{item.desc}}
                </radio>
            </radio-group>
        </form-item>
        <form-item label="城市" prop="city">
            <radio-group v-model="formInline.city">
                <radio label="bj">北京</radio>
                <radio label="sh">上海</radio>
                <radio label="sz">深圳</radio>
            </radio-group>
        </form-item>
        <form-item>
            <i-button type="primary" @click="handleSubmit('formInline')">提交</i-button>
        </form-item>
    </i-form>
</div>

SCSS

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}

JavaScript

var Main = {
        data () {
            return {
                formInline: {
                    user: '',
                    gender: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请填写姓名', trigger: 'blur' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ]
                },
                demoData:[
                    {
                        id: 0,
                        desc: '男'
                    },{
                        id: 1,
                        desc: '女'
                    }
                ]
            }
        },
        methods: {
            handleSubmit(name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      this.$Message.success('Success!');
                  } else {
                      this.$Message.error('Fail!');
                  }
              })
          }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')