Vue+ts+Vant的登录界面

下面是一个使用Vue、TypeScript和Vant UI库的登录界面示例：

<template>
  <van-form
    ref="form"
    class="login-form"
    label-width="100px"
    :model="form"
    :rules="rules"
  >
    <van-field
      v-model="form.username"
      name="username"
      label="用户名"
      placeholder="请输入用户名"
      autocomplete="off"
      clearable
      required
    />
    <van-field
      v-model="form.password"
      name="password"
      type="password"
      label="密码"
      placeholder="请输入密码"
      autocomplete="off"
      clearable
      required
    />
    <van-button type="primary" class="login-button" @click="handleLogin">
      登录
    </van-button>
  </van-form>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Toast } from "vant";

@Component({
  components: {
    [Toast.name]: Toast,
  },
})
export default class Login extends Vue {
  form = {
    username: "",
    password: "",
  };

  rules = {
    username: [{ required: true, message: "请输入用户名" }],
    password: [{ required: true, message: "请输入密码" }],
  };

  handleLogin() {
    // 发送登录请求
    // ...

    // 登录成功
    this.$router.push("/");
    Toast.success("登录成功");
  }
}
</script>

<style scoped>
.login-form {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 80px;
}

.login-button {
  margin-top: 20px;
}
</style>

在上面的代码中，我们使用了Vant UI库中的`van-form`和`van-field`组件来创建一个表单，并使用`v-model`指令来绑定表单数据。我们还使用了`van-button`组件来创建登录按钮。在`script`标签中，我们定义了`form`对象来存储表单数据，同时定义了`rules`对象来验证表单数据。在`handleLogin`方法中，我们可以发送登录请求，并根据返回结果进行相应处理。如果登录成功，我们会通过`Toast.success`方法显示一个成功提示，并跳转到首页。