- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

### 基本用法

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

form: {"name":"","region":"","date1":"","date2":"","delivery":false,"type":[],"resource":"","desc":""}

活动名称
活动区域

- 区域一
- 区域二

活动时间
-
即时配送
活动性质
美食/餐厅线上活动
地推活动
线下主题活动
单纯品牌曝光
特殊资源
线上品牌商赞助
线下场地免费
活动形式

    import { BeForm } from '@brewer/beerui';
    let form = {
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: ''
    }
    let onSubmit = () => {
      console.log(form);
    };

    <BeForm
    	bind:model={form}
    	labelWidth="80px"
    >
    	<BeFormItem label='活动名称'>
    		<BeInput bind:value={form.name} />
    	</BeFormItem>
    	<BeFormItem label='活动区域'>
    		<BeSelect bind:value={form.region}>
    			<BeOption label="区域一" value="shanghai"></BeOption>
    			<BeOption label="区域二" value="beijing"></BeOption>
    		</BeSelect>
    	</BeFormItem>
    	<BeFormItem label='活动时间'>
    		<div class='flex'>
    			<BeDatePicker bind:value={form.date1} placeholder='选择日期' selectMode="date" />
    			<span class='px-10'>-</span>
    			<BeTimePicker bind:value={form.date2}/>
    		</div>
    	</BeFormItem>
    	<BeFormItem label='即时配送'>
    		<BeSwitch bind:checked={form.delivery} />
    	</BeFormItem>
    	<BeFormItem label='活动性质'>
    		<BeCheckboxGroup bind:checked={form.type}>
    			<BeCheckbox label="美食/餐厅线上活动" name="type"></BeCheckbox>
    			<BeCheckbox label="地推活动" name="type"></BeCheckbox>
    			<BeCheckbox label="线下主题活动" name="type"></BeCheckbox>
    			<BeCheckbox label="单纯品牌曝光" name="type"></BeCheckbox>
    		</BeCheckboxGroup>
    	</BeFormItem>
    	<BeFormItem label='特殊资源'>
    		<BeRadioGroup bind:checked={form.resource}>
    			<BeRadio label="线上品牌商赞助"></BeRadio>
    			<BeRadio label="线下场地免费"></BeRadio>
    		</BeRadioGroup>
    	</BeFormItem>
    	<BeFormItem label='活动形式'>
    		<BeTextarea bind:value={form.desc}></BeTextarea>
    	</BeFormItem>
    	<BeFormItem>
    		<BeButton type='primary' on:click={onSubmit}>立即创建</BeButton>
    		<BeButton>取消</BeButton>
    	</BeFormItem>
    </BeForm>

显示代码

### 行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

formInline: {"user":"","region":""}

审批人
活动区域

- 区域一
- 区域二

设置 inline 属性可以让表单域变为行内的表单域

    <BeForm
    	bind:model={formInline}
    	inline
    >
    	<BeFormItem label='审批人'>
    		<BeInput bind:value={formInline.user} />
    	</BeFormItem>
    	<BeFormItem label='活动区域'>
    		<BeSelect bind:value={formInline.region}>
    			<BeOption label="区域一" value="shanghai"></BeOption>
    			<BeOption label="区域二" value="beijing"></BeOption>
    		</BeSelect>
    	</BeFormItem>
    	<BeFormItem>
    		<BeButton type='primary' on:click={onSubmitInline}>查询</BeButton>
    	</BeFormItem>
    </BeForm>

显示代码

### 对齐方式

根据具体目标和制约因素，选择最佳的标签对齐方式。

formLabelAlign: {"name":"","region":"","type":""}

左对齐
右对齐
顶部对齐

名称
活动区域

- 区域一
- 区域二

活动形式
通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

    let labelPosition = 'right'
    let formLabelAlign = {
      name: '',
      region: '',
      type: ''
    }

    <BeForm
    	bind:model={formLabelAlign}
    	{labelPosition}
    	inline
    >
    	<BeFormItem label='名称'>
    		<BeInput bind:value={formLabelAlign.name} />
    	</BeFormItem>
    	<BeFormItem label='活动区域'>
    		<BeSelect bind:value={formLabelAlign.region}>
    			<BeOption label="区域一" value="shanghai"></BeOption>
    			<BeOption label="区域二" value="beijing"></BeOption>
    		</BeSelect>
    	</BeFormItem>
    	<BeFormItem label='活动形式'>
    		<BeInput bind:value={formLabelAlign.type} />
    	</BeFormItem>
    	<BeFormItem>
    		<BeButton type='primary' on:click={onSubmitInline}>查询</BeButton>
    	</BeFormItem>
    </BeForm>

显示代码

### 表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

ruleForm: {"name":"","region":"","date1":"","date2":"","delivery":false,"type":[],"resource":"","desc":""}

活动名称
活动区域

- 区域一
- 区域二

活动时间
-
即时配送
活动性质
美食/餐厅线上活动
地推活动
线下主题活动
单纯品牌曝光
特殊资源
线上品牌商赞助
线下场地免费
活动形式
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator， 如果是数组或对象请在当前组件中加入 validateEvent=false，否则它将在对象改变时同步验证。 https://github.com/sveltejs/svelte/issues/7579

    let ruleForm = {
    	name: '',
    	region: '',
    	date1: '',
    	date2: '',
    	delivery: false,
    	type: [],
    	resource: '',
    	desc: ''
    }
    let rules = {
    	name: [
    		{ required: true, message: '请输入活动名称', trigger: 'change' },
    		{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
    	],
    	region: [
    		{ required: true, message: '请选择活动区域', trigger: 'change' }
    	],
    	date1: [
    		{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
    	],
    	date2: [
    		{ required: true, message: '请选择时间', trigger: 'change' }
    	],
    	type: [
    		{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
    	],
    	resource: [
    		{ required: true, message: '请选择活动资源', trigger: 'change' }
    	],
    	desc: [
    		{ required: true, message: '请填写活动形式', trigger: 'blur' }
    	]
        }
    let ruleFormDom = null
    const submitRules = () => {
    ruleFormDom.validate((valid) => {
    	if (valid) {
    		alert('submit!');
    	} else {
    		console.log('error submit!!');
    		return false;
    	}
    });
    }
        const resetForm = () => {
    	ruleForm = {
    		name: '',
    		region: '',
    		date1: '',
    		date2: '',
    		delivery: false,
    		type: [],
    		resource: '',
    		desc: ''
    	}
    	setTimeout(() => {
    		ruleFormDom.resetFields();
    	}, 60)
    }

    <BeForm
    	bind:model={ruleForm}
    	bind:rules={rules}
    	bind:this={ruleFormDom}
    	on:submit={submitRules}
    >
    	<BeFormItem label='活动名称' prop='name'>
    		<BeInput bind:value={ruleForm.name} />
    	</BeFormItem>
    	<BeFormItem label='活动区域' prop='region'>
    		<BeSelect bind:value={ruleForm.region}>
    			<BeOption label="" value={null}></BeOption>
    			<BeOption label="区域一" value="shanghai"></BeOption>
    			<BeOption label="区域二" value="beijing"></BeOption>
    		</BeSelect>
    	</BeFormItem>
    	<BeFormItem label='活动时间' required>
    		<div class='flex'>
    			<BeFormItem prop='date1'>
    				<BeDatePicker bind:value={ruleForm.date1} placeholder='选择日期' selectMode="date" />
    			</BeFormItem>
    			<span class='px-10'>-</span>
    			<BeFormItem prop='date2'>
    				<BeTimePicker bind:value={ruleForm.date2}/>
    			</BeFormItem>
    		</div>
    	</BeFormItem>
    	<BeFormItem label='即时配送' prop='delivery'>
    		<BeSwitch bind:checked={ruleForm.delivery} />
    	</BeFormItem>
    	<BeFormItem label='活动性质' prop='type'>
    		<BeCheckboxGroup bind:checked={ruleForm.type} validateEvent={false}>
    			<BeCheckbox label="美食/餐厅线上活动"></BeCheckbox>
    			<BeCheckbox label="地推活动"></BeCheckbox>
    			<BeCheckbox label="线下主题活动"></BeCheckbox>
    			<BeCheckbox label="单纯品牌曝光"></BeCheckbox>
    		</BeCheckboxGroup>
    	</BeFormItem>
    	<BeFormItem label='特殊资源' prop='resource'>
    		<BeRadioGroup bind:checked={ruleForm.resource}>
    			<BeRadio label="线上品牌商赞助"></BeRadio>
    			<BeRadio label="线下场地免费"></BeRadio>
    		</BeRadioGroup>
    	</BeFormItem>
    	<BeFormItem label='活动形式' prop='desc'>
    		<BeTextarea bind:value={ruleForm.desc}></BeTextarea>
    	</BeFormItem>
    	<BeFormItem>
    		<BeButton type='primary' on:click={submitRules}>立即创建</BeButton>
    		<BeButton>取消</BeButton>
    	</BeFormItem>
    </BeForm>

显示代码

# REPL

### Attributes

### Form-Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
ref | 获得对表单元素的引用 | Element | - | null
description | 辅助性文字 | string | - | ''
inline | 行内表单模式 | boolean | true/false | false
labelWidth | 表单域标签的宽度 | string | - | 80px
model | 获得表单元素绑定的值 | any | - | null
rules | 获得表单元素绑定的验证规则 | any | - | null
labelPosition | 表单域标签的位置 | string | '' | 'top' | 'left' | 'right' | ''
validateOnRuleChange | 规则改变时验证 | boolean | true/false | true
hideRequiredAsterisk | 是否隐藏必填字段的标签旁边的红色星号 | boolean | true/false | false

### Methods

事件名称 | 说明 | 回调参数
--- | --- | ---
validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))
validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string))
resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | null
clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string)

### Form-Item Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 model 中的字段 | -
label | 标签文本 | string | - | -
inline | 行内表单模式 | boolean | true/false | false
labelWidth | 表单域标签的宽度 | string | - | 80px
required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | true/false | false
rules | 表单验证规则 | object | - | -
trigger | 行内必填 触发事件 | string | click/hover | ''
message | 行内必填 提示信息 | string | - | ''

### Slot

name | 说明
--- | ---
icon | 标题前的icon