AppliJuice/newEssay.html at master · HFIProgramming/AppliJuice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- Site Properties -->
    <title>New Essay - AppliJuice</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>

<body>
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item" style="width: 10%;"></li>
    <li class="layui-nav-item"><a href="">AppliJuice</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">我是一个也许能用上的下拉菜单</a>
        <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">我是一个按钮</a></li>
</ul>
<br>
<br>
<br>
<div class="layui-container">
    <div class="layui-row" style="text-align:center">
        <h1> 今天您想交几份Essay呢？ </h1>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2">
            <form class="layui-form" action="javascript:void(0)">
                <div id="tag-form">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">Tags</label>
                        <essay-tag v-for="item in tagGroup.college" v-bind:tag="item" v-bind:key="item.id"></essay-tag>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Tags</label>
                        <button class="layui-btn" v-on:click="addTag">add</button>

                        <div class="layui-input-inline">
                            <select name="tag" lay-verify="required">
                                <option value="">plz select</option>
								<optgroup v-for="group in availableTags" :label="group.name">
									<option v-for="tag in group.tags">{{ tag }}</option>
								</optgroup>
                            </select>
                        </div>

                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">Essay Prompt</label>
                    <div class="layui-input-block">
                        <textarea name="desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">Essay</label>
                    <div class="layui-input-block">
                        <textarea name="desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="newEssay">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="layui/layui.js"></script>
<script>

    Vue.component('essay-tag', {
        props: ['tag'],
        template: '<div class="layui-input-inline">\n' +
        '<button class="layui-btn"> {{ tag }} <i class="layui-icon layui-icon-close"></i></button>\n' +
        '</div>'
    });

    var tagForm = new Vue({
        el: '#tag-form',
        data: {
            tagGroup: {
                prompt_type: [],
                college:[],
                others:[]
            },
			availableTags: [
				{ name: "prompt_type", tags: ['WhyMajor', 'WhySchool', 'Extended'] },
				{ name: "college", tags: ['Caltech', 'Cornell', 'Pomona', 'Tsinghua', 'Harvey Mudd', 'MIT'] },
				{ name: "others", tags: ['admitted', 'rejected', 'waitlisted']}
			]
        },
        methods: {
            addTag: function() {
                this.tagGroup.college.push('MIT');
            }
        }
    });

    //一般直接写在一个js文件中
   layui.use(['element', 'form'], function () {
       var element = layui.element,
           form = layui.form;

       form.on('submit(newApplicant)', function (data) {
           layer.msg(JSON.stringify(data.field));
           return false;
       });

       form.on('select', function (data) {
           console.log(data.elem); //得到select原始DOM对象
           console.log(data.value); //得到被选中的值
           console.log(data.othis); //得到美化后的DOM对象
       });
   });

</script>
</body>

</html>