自己写一个表单组件，支持表单验证

最新推荐文章于 2023-03-04 23:12:35 发布

原创

最新推荐文章于 2023-03-04 23:12:35 发布 · 403 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #组件化

本文介绍了如何避免使用大型UI库，如Element-UI，而是自定义编写my-input和my-form组件来实现表单验证和提交功能。在实现过程中，详细说明了组件的使用方法，包括引入组件、定义表单数据和验证规则，以及在methods中添加验证和提交的逻辑。同时提到了my-form组件的validate方法和my-input组件的设计，包括内置的清空输入功能以及样式自定义需求。

不想用element-ui！不想因为一个小功能就引入一个大插件！而且还得改样式！

1. 使用方式：

1）

<my-form ref="loginForm">
    <my-input
        v-model="form.username"
        placeholder="请输入用户名"
        :rules="formRule.username"
    >
        <template v-slot:icon>
            <!--图标插槽 这里要在css里给icon1整上background-image和宽高-->
            <div class="icon1"></div>
        </template>
    </my-input>

    <my-input
        v-model="form.password"
        placeholder="请输入密码"
        type="password"
        :rules="formRule.password"
    >
        <template v-slot:icon>
            <!--图标插槽 这里要在css里给icon2整上background-image和宽高-->
            <div class="icon2"></div>
        </template>
    </my-input>
</my-form>