JavaScript初探_6

发表于
字数统计 4.2k | 阅读时长 23

最近几天改动比较大，改bug中间费了不少时间，也没有及时记录，补充一下。

前言

改动内容包括：

  1. 改动登陆页面输入框；
  2. Home页面新增页面导航栏；
  3. Home页面新增表格、表单以及在对应页面的相关操作；

改动

Login.vue

引入scss（删掉node_modules重新cnpm install一下），为登陆页面输入框增加了框形阴影，新增部分具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style lang="scss" scoped>
.login_content {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 10px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>

此页相对简单，作者这里不具体展开。

页面导航

页面导航本身还比较好弄，element有相应模板，但是点击导航按钮出现相应界面这部分需要和路由配合，最初的想法在模板基础上进行小改动，click跳转即可，但是始终和路由配合不好，而且click事件发生，导航菜单各级之间的处理也比较混乱，最后还是进行了比较大的改动，注销按钮的位置等也做了调整，具体代码为：

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
Home.vue:


<template>
  <el-row class="container">
    <el-col :span="24"
            class="main">
      <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
        <!--导航菜单-->
        <el-menu :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 @open="handleopen"
                 @close="handleclose"
                 @select="handleselect"
                 unique-opened
                 router
                 v-show="!collapsed">
          <template v-for="(item,index) in $router.options.routes"
                    v-if="!item.hidden">
            <el-submenu :index="index+''"
                        v-if="!item.leaf">
              <template slot="title"><i :class="item.iconCls"></i>{{item.name}}
              </template>
              <el-menu-item v-for="child in item.children"
                            :index="child.path"
                            :key="child.path"
                            v-if="!child.hidden">{{child.name}}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-if="item.leaf&&item.children.length>0"
                          :index="item.children[0].path">
              <i :class="item.iconCls">
              </i>{{item.children[0].name}}
            </el-menu-item>
          </template>
        </el-menu>
        <!--导航菜单-折叠后-->
        <ul class="el-menu el-menu-vertical-demo collapsed"
            v-show="collapsed"
            ref="menuCollapsed">
          <li v-for="(item,index) in $router.options.routes"
              v-if="!item.hidden"
              class="el-submenu item">
            <template v-if="!item.leaf">
              <div class="el-submenu__title"
                   style="padding-left: 20px;"
                   @mouseover="showMenu(index,true)"
                   @mouseout="showMenu(index,false)">
                <i :class="item.iconCls">
                </i>
              </div>
              <ul class="el-menu submenu"
                  :class="'submenu-hook-'+index"
                  @mouseover="showMenu(index,true)"
                  @mouseout="showMenu(index,false)">
                <li v-for="child in item.children"
                    v-if="!child.hidden"
                    :key="child.path"
                    class="el-menu-item"
                    style="padding-left: 40px;"
                    :class="$route.path==child.path?'is-active':''"
                    @click="$router.push(child.path)">{{child.name}}
                </li>
              </ul>
            </template>
            <template v-else>
          <li class="el-submenu">
            <div class="el-submenu__title el-menu-item"
                 style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;"
                 :class="$route.path==item.children[0].path?'is-active':''"
                 @click="$router.push(item.children[0].path)">
              <i :class="item.iconCls">
              </i>
            </div>
          </li>
</template>
</li>
</ul>
</aside>
<section class="content-container">
  <div class="grid-content bg-purple-light">
    <el-col :span="24"
            class="breadcrumb-container">
      <strong class="title">{{$route.name}}
      </strong>
      <el-breadcrumb separator="/"
                     class="breadcrumb-inner">
        <el-breadcrumb-item v-for="item in $route.matched"
                            :key="item.path">
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24"
            class="content-wrapper">
      <transition name="fade"
                  mode="out-in">
        <router-view></router-view>
      </transition>
    </el-col>
  </div>
</section>
</el-col>
<!--注销按钮-->
<el-row type="flex"
        justify="center"
        style="margin-top:25px">
  <el-col :span="1"
          offset="22">
    <el-popover placement="left-start"
                width="160"
                v-model="visible">
      <el-button slot="reference">注销</el-button>
      <p>确定注销并退出吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini"
                   type="text"
                   @click="visible = false">取消</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="logout">确定</el-button>
      </div>
    </el-popover>
  </el-col>
</el-row>
</el-row>
</template>

<script>
export default {
  methods: {
    logout() {
      this.$router.replace('/')
    },
    handleopen() {
      console.log('handleopen');
    },
    handleclose() {
      console.log('handleclose');
    },
    handleselect: function (a, b) {
    },
    //折叠导航栏
    collapse: function () {
      this.collapsed = !this.collapsed;
    },
    showMenu(i, status) {
      this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
    }
  },
  data() {
    return {
      visible: false,  //注销弹出框
      collapsed: false,   //菜单折叠
    };
  }
}
</script>

<style scoped lang="scss">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 95%;

  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 110px;
    bottom: 0px;
    overflow: hidden;
    aside {
      flex: 0 0 230px;
      width: 230px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      flex: 0 0 230px;
      width: 230px;
    }
    .content-container {
      // background: #f1f2f7;
      flex: 1;
      // position: absolute;
      // right: 0px;
      // top: 0px;
      // bottom: 0px;
      // left: 230px;
      overflow-y: scroll;
      padding: 20px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>
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
路由的index.js:


import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
import Main from '@/components/Main.vue'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'
import Form from '@/components/Form.vue'
import Table from '@/components/Table.vue'
import Setting from '@/components/Setting.vue'

Vue.use(Router)   //注册vue-router

export default new Router({
  routes: [
    /*{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },*/
    {
      path: '/',
      name: 'Main',
      component: Main,
      hidden: true
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      hidden: true
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      hidden: true
    },
    {
      path: '/',
      component: Home,
      name: '导航一',
      iconCls: 'el-icon-message',//图标样式class
      children: [
        { path: '/home/form', component: Form, name: '表单' },
        { path: '/home/table', component: Table, name: '表格' },
      ]
    },
    {
      path: '/',
      component: Home,
      name: '导航二',
      iconCls: 'el-icon-setting',//图标样式class
      children: [
        { path: '/home/setting', component: Setting, name: '设置' },
      ]
    },
  ]
})

Form.vue

在Home.vue和index.js配置好之后，Form.vue这里需要做的事情比较少，作者这里也只是体验一下，直接用了element里的示例，之后在做修改，具体代码为：

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
<template>
  <el-form :model="ruleForm"
           :rules="rules"
           ref="ruleForm"
           label-width="100px"
           class="demo-ruleForm">
    <el-form-item label="活动名称"
                  prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域"
                  prop="region">
      <el-select v-model="ruleForm.region"
                 placeholder="请选择活动区域">
        <el-option label="区域一"
                   value="shanghai"></el-option>
        <el-option label="区域二"
                   value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间"
                  required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="ruleForm.date1"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line"
              :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker type="fixed-time"
                          placeholder="选择时间"
                          v-model="ruleForm.date2"
                          style="width: 100%;"></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送"
                  prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质"
                  prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="美食/餐厅线上活动"
                     name="type"></el-checkbox>
        <el-checkbox label="地推活动"
                     name="type"></el-checkbox>
        <el-checkbox label="线下主题活动"
                     name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光"
                     name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源"
                  prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="线上品牌商赞助"></el-radio>
        <el-radio label="线下场地免费"></el-radio>
        <el-radio label="无"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式"
                  prop="desc">
      <el-input type="textarea"
                v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('创建成功!');
        } else {
          console.log('创建失败!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

Table.vue

这一部分相对Form.vue而言，相对复杂了一些，表格建立还算简单，时间主要用在了“编辑”、“删除”两个按钮的实现以及对应Dialog的弹出的问题上，对于这两项操作需要对表格中单元的位置进行定位，这里用到了scope的相关内容。在“编辑”按钮的弹窗中，由于忘记了

标签耽误了大量时间（也没有报错，就是弹窗不出来）；在“删除”按钮中，如果直接点击即删除将获得的行号直接传给deleteRow函数即可，但是这里添加了确认是否删除的Dialog，所以定义了一个全局变量_index，点击按钮执行handleDelete函数，将获取的行数传给_index，同时打开Dialog，在Dialog中再将_index传给deleteRow函数，具体代码为：

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<template>
  <div>
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column fixed
                       prop="date"
                       label="日期"
                       width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>

      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="80">
        <template slot-scope="scope">
          <el-popover trigger="hover"
                      placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference"
                 class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="province"
                       label="省份"
                       width="60">
      </el-table-column>
      <el-table-column prop="city"
                       label="市区"
                       width="80">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       width="300">
      </el-table-column>
      <el-table-column prop="zip"
                       label="邮编"
                       width="80">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="150">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)"
                     size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.$index,scope.row)"
                     type="danger"
                     size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--删除界面-->
    <el-dialog title="确认"
               :visible.sync="deleteFormVisible"
               width="30%"
               :before-close="handleClose">
      <span>确认删除改用户？</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="deleteFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click.native.prevent="deleteRow(_index, tableData)">确 定</el-button>
      </span>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog title="编辑"
               :visible.sync="editFormVisible"
               :before-close="handleClose">
      <el-form :model="editForm"
               label-width="80px"
               :rules="editFormRules"
               ref="editForm">
        <el-form-item label="日期">
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="editForm.date"></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名"
                      prop="name">
          <el-input v-model="editForm.name"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-input type="province"
                    v-model="editForm.province"></el-input>
        </el-form-item>
        <el-form-item label="市区">
          <el-input type="city"
                    v-model="editForm.city"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="address"
                    v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="邮编">
          <el-input type="zip"
                    v-model="editForm.zip"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="editFormVisible = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    handleDelete(index, row) {
      this._index = index;
      //console.log(index);
      this.deleteFormVisible = true;
    },
    handleEdit(index, row) {
      this.editFormVisible = true;
      //console.log(index, row);
      //将每一行的数据赋值给Dialog弹框（这里是重点）
      this.editForm = Object.assign({}, row);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.deleteFormVisible = false;
    }
  },

  data() {
    return {
      _index: '',
      editFormVisible: false,//编辑界面是否显示
      deleteFormVisible: false,//删除确定界面
      editFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      //编辑界面数据
      editForm: {
        name: '',
        date: '',
        province: '',
        city: '',
        address: '',
        zip: '',
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1515 弄',
        zip: 200333
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1514 弄',
        zip: 200333
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1513 弄',
        zip: 200333
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1512 弄',
        zip: 200333
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1511 弄',
        zip: 200333
      },
      ]
    }
  }
}
</script>

以上。

注：转载文章请注明出处，谢谢~