基于element plus vue3(setup语法糖) typescript 写一个登录组件，并附带样式

好的，我可以教您如何开发一个基于element plus vue3(setup语法糖) typescript写的登录组件，并且提供样式。以下是代码示例：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="login-form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model.trim="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model.trim="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

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

export default defineComponent({
  components: { ElForm, ElFormItem, ElInput, ElButton },
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });

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

    const submitForm = () => {
      (this.$refs.form as any).validate(valid => {
        if (valid) {
          // 表单验证通过，执行登录操作
          console.log(form);
        } else {
          return false;
        }
        return true;
      });
    };

    return { form, rules, submitForm };
  },
});
</script>

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

这个组件使用了 `reactive` 方法来创建响应式数据，用于存储表单数据。然后定义了 `rules` 对象，用于表单验证，`submitForm` 方法用于提交表单。在模板中使用了 Element Plus 的表单组件，`label-width` 可以设置表单项的宽度，`v-model.trim` 用于双向绑定表单数据。最后使用了 scoped 样式，对登录表单进行了简单的样式修饰。