element 表单

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="icon" type="image/png" href="logo.png" />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>

    <div id="app">

        <el-container>
            <el-header style="font-family: Helvetica,微软雅黑,Arial,sans-serif; font-size: 36px;">
                <img src="logo.png" alt="深目智寻" style="height: 40px;width: 40px; border: 0px;">
                深目智寻
            </el-header>
            <el-main style="width: 90%;">
                <el-form ref="form" :model="form" label-width="80px">

                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" clearable></el-input>
                    </el-form-item>


                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="身份证号" prop="id">
                        <el-input v-model="form.id" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="起始时间" prop="date1">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择起始日期" v-model="form.date1" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2"> &nbsp;</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择起始时间" v-model="form.time1" style="width: 100%;">
                            </el-time-picker>
                    </el-form-item>


                    <el-form-item label="终止时间"  prop="date2">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择终止日期" v-model="form.date2" style="width: 100%;">
                            </el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2"> &nbsp;</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择终止时间" v-model="form.time2" style="width: 100%;">
                            </el-time-picker>
                    </el-form-item>



                    <el-form-item label="活动区域" prop="area">
                        <el-checkbox-group v-model="form.area">
                            <el-checkbox label="东湖区" name="area"></el-checkbox>
                            <el-checkbox label="西湖区" name="area"></el-checkbox>
                            <el-checkbox label="青山湖区" name="area"></el-checkbox>
                            <el-checkbox label="青云谱区" name="area"></el-checkbox>
                            <el-checkbox label="红谷滩区" name="area"></el-checkbox>
                            <el-checkbox label="新建区" name="area"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>


                    <!-- </el-form-item>
                    <el-form-item label="体态描述">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item> -->

                    <el-form-item label="上传搜索对象照片">
                        <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="高精度" prop="delivery">
                        <el-switch v-model="form.delivery"></el-switch>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button @click="clearAll">重置</el-button>
                            <!-- @click="clearAll" -->
                        </el-form-item>
                </el-form>
            </el-main>
        </el-container>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">

            <i class="el-icon-circle-check"></i>
            <span>提交成功</span>
            <span slot="footer" class="dialog-footer">

                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</body>


<script>
    var Main = {
        data() {
            return {
                form: {
                    name: '',
                    sex: '',
                    id: '',
                    date1: '',
                    time1: '',
                    date2: '',
                    time2: '',
                    delivery: false,
                    area: [],
                    resource: '',
                },
                dialogVisible: false
            }
        },
        methods: {

            onSubmit() {
                console.log('submit!');
                this.dialogVisible = true;
                this.$refs['form'].resetFields();

            }, clearAll() {
                this.$refs['form'].resetFields();
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>

</html>
全部评论

相关推荐

点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务