npm 包 ti.growingform 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对表单进行操作，ti.growingform 是一个基于 Vue 的表单生成工具，它提供了一系列的组件，使得我们可以快速地构建出高质量的表单页面。在本文中，我们将深入介绍如何使用 ti.growingform，帮助你更好地掌握这个工具。

安装和引用

在使用 ti.growingform 之前，我们需要先安装它。可以在项目根目录下执行以下命令：

npm install ti.growingform --save

引用 ti.growingform 的方式很简单，只需要在 Vue 的组件中按照以下方式引用即可：

import growingForm from 'ti.growingform';
import 'ti.growingform/lib/ti.growingform.css';

Vue.use(growingForm);

组件

ti.growingform 提供了丰富的组件，包括 input、select、radio、checkbox、textarea、date、upload 等常规表单组件。此外，还有更为强大的额外组件，如 autocomplete、cascader、transfer 等。

以下是一个简单的例子，用 ti.growingform 的 input 组件来生成一个输入框：

-- -------------------- ---- -------
----------
  -----
    ---------
      -----------------------
      ----------
      --------
    ------------
  ------
-----------

接下来，我们将介绍一些常用组件的示例和使用方法。

input

input 组件是 ti.growingform 中最基本的组件，可用于输入框、数字框等场景。

<gf-input
  v-model="formData.name"
  label="姓名"
  required
></gf-input>

select

select 组件适用于下拉选项，可配置可搜索、多选等属性。

<gf-select
  v-model="formData.gender"
  label="性别"
  required
>
  <gf-option value="male">男</gf-option>
  <gf-option value="female">女</gf-option>
</gf-select>

radio

radio 组件用于单选框。

<gf-radio-group
  v-model="formData.gender"
  label="性别"
  required
>
  <gf-radio value="male">男</gf-radio>
  <gf-radio value="female">女</gf-radio>
</gf-radio-group>

checkbox

checkbox 组件用于多选框。

<gf-checkbox-group
  v-model="formData.hobbies"
  label="兴趣爱好"
  :options="hobbiesOptions"
></gf-checkbox-group>

textarea

textarea 组件用于多行文本框。

<gf-textarea
  v-model="formData.description"
  label="个人描述"
></gf-textarea>

date

date 组件用于日期选择。

<gf-date-picker
  v-model="formData.birthday"
  label="出生日期"
  type="date"
></gf-date-picker>

upload

upload 组件用于上传文件。

<gf-upload
  v-model="formData.fileList"
  type="file"
  label="上传文件"
  multiple
></gf-upload>

autocomplete

autocomplete 组件用于自动完成。

<gf-autocomplete
  v-model="formData.city"
  label="城市"
  :fetch-data="fetchData"
  :result-list-position-offset="[0,0]"
></gf-autocomplete>

cascader

cascader 组件用于级联选择。

<gf-cascader
  v-model="formData.city"
  label="城市"
  :options="options"
  :props="{ label: 'name', value: 'code' }"
></gf-cascader>

transfer

transfer 组件用于穿梭框。

<gf-transfer
  v-model="formData.permissions"
  label="权限"
  :data="permissionsData"
  :titles="['可选权限', '已选权限']"
></gf-transfer>

校验与提交

我们可以通过在组件上传递校验规则来对表单进行校验。校验规则可以是内置规则，也可以是自定义规则。在校验过程中，如果有任何一个组件的校验不通过，则整个表单的校验都不通过。

以下是一个简单的例子，在 ti.growingform 的 input 组件上加入校验规则：

<gf-input
  v-model="formData.name"
  label="姓名"
  :rules="[{ message: '请输入姓名', required: true }]"
></gf-input>

在表单的提交时，我们可以通过调用组件的 validate 方法来进行校验。同时，我们可以在表单校验通过后，通过调用组件的 submit 方法来触发表单的提交。

以下是一个提交表单的例子：

-- -------------------- ---- -------
----------
  -----
    ---------
      -----------------------
      ----------
      ---------- -------- -------- --------- ---- ---
    ------------

    ----------
      --------------
      ---------------------
    -
      --
    ------------
  ------
-----------

--------
------ ------- -
  ---- -- -
    ------ -
      --------- -
        ----- --
      -
    -
  --

  -------- -
    ------------ -- -
      ---------------------------------- -- -
        -- --------------
        -------------------------------- -- -
          -- ------
        -- -- -- -
          -- ------
        --
      -- -- -- -
        -- -------
      --
    -
  -
-
---------

总结

通过本文的介绍，相信大家已经能够掌握如何使用 ti.growingform 来构建高质量的表单页面。在实际的开发过程中，请结合实际情况选择适合的组件及配置，并针对表单校验和提交的逻辑进行实现。

示例代码及详细说明可访问 ti.growingform 项目仓库了解。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a6d