JavaScript初探_4

发表于
字数统计 1.1k | 阅读时长 5

本文主要参考这里：参考地址，感谢博主。

前言

Element组件安装配置完成之后，就可以开始利用它来美化界面了。

开始

Main.vue

主界面怎么改进一下呢？突发奇想，可以参考平时安装软件，做一个协议，只有同意协议才可以进入登陆界面，最初的想法是界面上加一个文本框，文本框内有协议内容，下边有两个Radio单选框，最后使用的方案是只有一个多选框Checkbox，后边有文字按钮，弹出Dialog对话框，具体代码如下：

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
<template>
  <div>
    <el-row type="flex"
            justify="center"
            align="middle"
            style="margin-top:100px;margin-bottom:80px">
      <el-col :span="5">
        <div>使用规定</div>
      </el-col>
      <el-col :span="4">
        <el-checkbox v-model="checked">我已知晓并同意相关协议。</el-checkbox>
      </el-col>
      <el-col :span="8">
        <el-button type="text"
                   @click="dialogVisible = true">阅读协议</el-button>
      </el-col>

      <el-dialog title="协议"
                 :visible.sync="dialogVisible"
                 width="30%"
                 :before-close="handleClose">
        <span>这是一段协议<br></br>
          aaaaaaaaaa<br>
          bbbbbbbbb<br>
          ccccccccc<br></br>
        </span>
        <span slot="footer"
              class="dialog-footer">
          <el-button type="primary"
                     @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </el-row>
    <el-row type="flex"
            justify="center">
      <el-col :span="2">
        <el-button type="primary"
                   @click="login"
                   plain
                   :disabled="!checked">点此登陆</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.$router.replace('/login')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  },
  data() {
    return {
      checked: false,
      dialogVisible: false
    };
  }
}
</script>

主要用到的几项：

  • Layout布局-分栏间隔（主要控制了一行中几列之间的左右位置）
  • Checkbox多选框-禁用状态（利用了Checkbox中checked这个变量来控制“点击登陆”按钮的状态，checkbox不选中时v-model绑定的值，即checked，是其默认值false；选中时v-model绑定的值，即checked，是true，而“点击登陆”按钮的禁用指令为disabled=”!checked”）
  • Button按钮-基础用法/文字按钮（“点击登陆”按钮以及“阅读协议”按钮）
  • Dialog对话框-基本用法（弹出协议框以及确认关闭框）

具体效果：
主界面2

Login.vue

Login界面相对于之前而言主要是增加了登陆成功的限制条件，如用户名密码不为空且正确（这里只是存了一组）；增加了用户名密码错误的提示框；增加了登陆成功的欢迎提示框等，具体代码为：

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
<template>
  <el-row type="flex"
          justify="center">
    <el-form ref="loginForm"
             :model="user"
             :rules="rules"
             status-icon
             label-width="80px">
      <el-form-item label="用户名"
                    prop="name">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="pass">
        <el-input v-model="user.pass"
                  type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-upload"
                   @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
export default {
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (this.user.name === 'admin' && this.user.pass === '123') {
            this.$notify({
              type: 'success',
              message: '欢迎你,' + this.user.name + '!',
              duration: 3000
            })
            this.$router.replace('/')
          } else {
            this.$message({
              type: 'error',
              message: '用户名或密码错误',
              showClose: true
            })
          }
        }
        else {
          return false
        }
      })
    }
  },
  data() {
    return {
      user: {},
      rules: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>>

具体效果：
用户名密码错误
登陆成功欢迎

以上。

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