VUE简单登录

​

 首先，我们要打开vant2组件库在里面找到Form表单

Vant 2 - Mobile UI Components built on Vue

在快速上手里找到并安装，

​编辑

安装vant2组件 ，

其次我们要在store下的index.js里面引入

​编辑

那么好，接下来我们就要开始操作啦！

复制基础用法里的代码，如下图所示：

​编辑

 提交判断输入验证以及按钮是否解禁

<template>
  <div class="home">
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="cellphone" label="用户名" placeholder="用户名" :rules="[
        {
          required: true,
          validator: nameEsp,
          trigger: 'onChange',
          message: '请填写用户名',
        },
      ]" />
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[
        {
          required: true,
          validator: pwdEsp,
          trigger: 'onChange',
          message: '请填写密码',
        },
      ]" />
      <div style="margin: 16px">
        <van-button round :class="!(nameEsp(username) && pwdEsp(password)) ? '' : 'success'"
          :disabled="!(nameEsp(username) && pwdEsp(password))" type="info" native-type="submit">提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      // console.log("submit", values);
      sessionStorage.setItem("token", JSON.stringify(values));
      this.$router.push("/about");
    },
    nameEsp(val) {
      return /^1[3-9][0-9]{9}$/.test(val);
    },
    pwdEsp(val) {
      return /^\w{6,18}$/.test(val);
    },
  },
};
</script>

需要script里进行正则验证 在提交按钮里面要给他判断一下是否输入正确，还有登录按钮解禁、禁用

:class="!(nameEsp(username) && pwdEsp(password)) ? '' : 'success'"
:disabled="!(nameEsp(username) && pwdEsp(password))"

最后给他设置个自己所需要的样式和动画

值得注意的是：

.van-button要放在 .success的前面

<style lang="less">
.van-button {
  width: 100px;
  transition: all 9s;
}

.success {
  width: 100%;
  display: block !important;
}
</style>

运行就是这个样子的

​

 这就实现的VUE简单的登录操作

 好啦！未来的精英工程师们，这次就先告一段落咯！

 散会！！！

​