基于element plus vue3 typescript 写一个登录组件，并附带样式

好的，我能帮您回答这个问题，并创建一个基于element plus vue3 typescript的登录组件。以下是代码：

<template>
  <div class="login">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      :class="{'form-validate': formValidate}"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }]">
        <el-input v-model="form.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="validateForm('form')">登录</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
  import { ref } from "vue";

  export default defineComponent({
    components: { ElForm, ElFormItem, ElInput, ElButton },
    setup() {
      const formRef = ref(null);
      const form = ref({
        username: "",
        password: "",
      });
      const rules = ref({
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      });
      const formValidate = ref(false);

      const validateForm = (name: string) => {
        formValidate.value = true;
        formRef.value.validate((valid: any) => {
          if (valid) {
            console.log("submit!");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      };

      const resetForm = (name: string) => {
        formRef.value.resetFields();
        formValidate.value = false;
      };

      return { form, rules, formValidate, validateForm, resetForm, formRef };
    },
  });
</script>

<style scoped>
  .login {
    max-width: 600px;
    margin: 0 auto;
  }

  .form-validate .el-form-item__error {
    margin-top: 0px;
  }
</style>

这里我们使用了Vue3的Composition API进行编写，并使用了TypeScript强类型语言，以确保代码的严谨性。同时我们引入了Element Plus UI框架，并使用了其中的表单组件（Form、FormItem、Input、Button）和表单验证规则（rules）。

这个登录组件有一个用户名和密码输入框以及登录和重置按钮。当我们点击登录按钮时，会进行表单验证，如果验证通过则输出"submit!"，否则输出"error submit!!"。当我们点击重置按钮时，会清空表单内容和验证状态。

同时我们还给组件添加了样式（scoped），用来调整最大宽度、居中以及错误提示样式等。请在Vue3项目中使用该代码，希望能够帮到您！