# sf-form

> sf-form components

Latest version **0.1.0** (published 2017-02-24) · 0 weekly downloads

## Install

```sh
npm install sf-form
pnpm add sf-form
yarn add sf-form
bun add sf-form
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-02-24 |
| First published | 2017-02-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | qz |
| Maintainers | qq136786817 |

## Links

- npm: https://www.npmjs.com/package/sf-form
- npm.io page: https://npm.io/package/sf-form

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.1.10
- [async-validator](https://npm.io/package/async-validator.md) ^1.6.8

## Recent versions

- 0.1.0 (latest) — 2017-02-24
- 0.0.9 — 2017-02-24
- 0.0.8 — 2017-02-24
- 0.0.7 — 2017-02-24
- 0.0.6 — 2017-02-24
- 0.0.5 — 2017-02-24
- 0.0.4 — 2017-02-24
- 0.0.3 — 2017-02-24
- 0.0.2 — 2017-02-24
- 0.0.1 — 2017-02-24

## README

# 七鱼form组件

### 基础用法

:::ysfdoc sf-form组件 包括  *input* *checkbox* *radio*  *switch* *form验证*  
```html
<sf-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
      <sf-form-item label="Title" prop="name">
        <sf-input v-model="ruleForm.name"></sf-input>
      </sf-form-item>
      <sf-form-item label="Checkbox" prop="city">
        <sf-checkbox-group v-model="ruleForm.city">
          <sf-checkbox v-for="item in cities" :label="item.key">{{item.value}}</sf-checkbox>
        </sf-checkbox-group>
      </sf-form-item>
      <sf-form-item label="Radio" prop="radio">
        <sf-radio-group v-model="ruleForm.radio">
          <sf-radio label="1">Radio1</sf-radio>
          <sf-radio label="2">Radio2</sf-radio>
        </sf-radio-group>
      </sf-form-item>
      <sf-form-item label="Textarea" prop="textarea">
        <sf-input type="textarea" :autosize="true" v-model="ruleForm.textarea"></sf-input>
      </sf-form-item>
      <sf-form-item label="Switch" prop="switch">
        <sf-switch v-model="ruleForm.switch" ></sf-switch>
      </sf-form-item>
      <sf-form-item>
        <sf-button @click.native="submitForm('ruleForm')">立即创建</sf-button>
        <sf-button @click.native="resetForm('ruleForm')">重置</sf-button>
      </sf-form-item>
    </sf-form>
    <script>
  export default {
    name: 'app',
    data(){
      return {
        cities: [
          {key: 1, value: "北京"},
          {key: 2, value: "上海"},
          {key: 3, value: "天津"},
          {key: 4, value: "杭州"},
        ],
        ruleForm: {
          name: '',
          city: [],
          radio: '',
          textarea: '',
          switch:true
        },
        rules: {
          name: [
            {required: true, message: '请输入title', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          city: [
            {type: 'array', required: true, message: '请选择city', trigger: 'change'}
          ],
          radio: [
            {required: true, message: '请选择radio', trigger: 'change'}
          ],
          textarea: [
            {required: true, message: '请填写textarea', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm);
          } else {
            console.log('error');
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
  ```
:::

### Form Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| model   | 表单数据对象 | object      |                  —                |  — |
| rules    | 表单验证规则 | object | — | — |
| inline    | 行内表单模式 | boolean | — | false |
| label-position | 表单域标签的位置 | string |  right/left/top            | right |
| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |
| show-message  | 是否显示校验错误信息 | boolean | — | true |

### Form Methods

| 方法名      | 说明          | 参数
|---------- |-------------- | --------------
| validate | 对整个表单进行校验的方法 | Function(callback: Function(boolean))
| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | -

### Form-Item Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| prop    | 表单域 model 字段 | string    | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
| rules    | 表单验证规则 | object | — | — |
| error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
| show-message  | 是否显示校验错误信息 | boolean | — | true |


### Input Attributes

| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
|-------------  |---------------- |---------------- |---------------------- |-------- |
| type         | 类型   | string  | text/textarea | text |
| value         | 绑定值           | string, number  | — | — |
| maxlength     | 最大输入长度      | number          |  —  | — |
| minlength     | 最小输入长度      | number          | — | — |
| placeholder   | 输入框占位文本    | string          | — | — |
| disabled      | 禁用            | boolean         | — | false   |
| size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | large, small, mini  | — |
| rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
| autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
| auto-complete | 原生属性，自动补全 | string | on, off | off |
| name | 原生属性 | string | — | — |
| max | 原生属性，设置最大值 | * | — | — |
| min | 原生属性，设置最小值 | * | — | — |
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
| autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |

### Input Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| change | 在 Input 值改变时触发 | (value: string \| number) |


### Radio Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | Radio 的 value   | string,number    |       —        |      —   |
| disabled  | 是否禁用    | boolean   | — | false   |
| name | 原生 name 属性 | string    |      —         |     —    |

### Radio-group Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| size     | Radio 按钮组尺寸   | string  | large, small  |    —     |
| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |

### Radio-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |

### Radio-button Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | Radio 的 value  | string,number  |        —       |     —    |
| disabled  | 是否禁用    | boolean   | — | false   |


### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| disabled  | 是否禁用    | boolean   | — | false   |
| width  | switch 的宽度（像素）    | number   | — | 166（有文字）/ 158（无文字） |
| on-text  | switch 打开时的文字    | string   | — | 启用 |
| off-text  | switch 关闭时的文字    | string   | — | 停用 |
| on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
| off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
| name  | switch 对应的 name 属性    | string   | — | — |

### Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| change  | switch 状态发生变化时的回调函数    | 新状态的布尔值 |


### Checkbox Attributes
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string    |       —        |     —    |
| true-label | 选中时的值   | string, number | — |     —    |
| false-label | 没有选中时的值   | string, number    |      —         |     —    |
| name | 原生 name 属性 | string    |      —         |     —    |
| disabled  | 按钮禁用    | boolean   |  — | false   |
| checked  | 当前是否勾选    | boolean   |  — | false   |
| indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |

### Checkbox-group Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| change  | 当绑定值变化时触发的事件 | event 事件对象 |

---
_Source: https://npm.io/package/sf-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._