使用 Vue3 编写的简单自适应登录界面示例

以下是一个使用 Vue 3 编写的简单登录界面示例，它具有自适应功能。注意，此示例仅适用于 pc 浏览器。

<template>
  <div class="login-container">
    <div class="login-header">
      <h1>登录</h1>
    </div>
    <div class="login-body">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" v-model="username" class="form-control" id="username" placeholder="请输入用户名" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="password" class="form-control" id="password" placeholder="请输入密码" required>
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  watch: {
    username(newVal) {
      if (newVal && newVal.length > 0) {
        this.$nextTick(() => {
          this.$refs.username.focus();
        });
      }
    },
    password(newVal) {
      if (newVal && newVal.length > 0) {
        this.$nextTick(() => {
          this.$refs.password.focus();
        });
      }
    },
  },
  methods: {
    submit() {
      this.$refs.username.focus();
      this.$refs.password.focus();
      this.$refs.username.addEventListener('blur', () => {
        this.$refs.password.blur();
      });
      this.$refs.password.addEventListener('blur', () => {
        this.$refs.username.blur();
      });
      if (this.username && this.password) {
        // 在此处处理登录逻辑
      } else {
        this.$message.error('用户名或密码不能为空');
      }
    },
  },
}
</script>

<style scoped>
.login-container {
  width: 300px;
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.login-header {
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-control {
  border: 1px solid #ddd;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 5px;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #0056b3;
}
</style>

在这个示例中，我们使用了 Vue 3 的 `watch` 选项来监听用户名和密码字段的变化。当输入框获得焦点时，我们将其添加到输入框上的事件监听器中，以确保在输入框失去焦点时，另一个输入框也会失去焦点。

登录按钮使用了 `@click.native` 绑定，这样可以确保在 PC 浏览器上正确点击登录按钮。

此外，我们还使用了 `.v-model` 指令将输入框与 Vue 实例的数据进行双向绑定，以便在用户输入时实时更新登录信息。

登录界面的样式可以根据需要进行调整。注意，此示例仅适用于 PC 浏览器，并且登录功能可能需要与后端服务器配合使用。