@acato/vue-form-elements 中文文档教程

Question

Introduction

Vue 表单元素是一组可以在 Vue.js 项目中使用的表单元素。 例如，您可以创建复选框 组、单选按钮组和滑块。 所有这些元素都支持 Vue 的表单输入绑定 (https://vuejs.org/v2/guide/forms.html) 所以你可以在它们上使用 v-model。 该包装带有最小的样式。

Installation

Package installation

将包添加到您的项目：

yarn add @acato/vue-form-elements
# or NPM:
# npm install --save @acato/vue-form-elements

Registering it to Vue.js

在您的代码中，添加以下行：

import Vue from 'vue';
import VueFormElements from '@acato/vue-form-elements';

Vue.use(VueFormElements, {
    requiredLabel: '*',
    optionalLabel: '(optional)',
});

这会将包中的所有元素添加到您的项目。 或者，您可以只添加您需要的组件：

import Vue from 'vue';
import VFESlider from '@acato/vue-form-elements/vue/elements/vfe-slider';

// globally
Vue.component('vfe-slider', VFESlider);

// within a component
...
    {
        props: {...},
        methods: {...},
        ...
        components: {
            'vfe-slider': VFESlider,
            ...
        }
    }
...

Add minimal styling

一些表单元素，例如（非本地）选择框和自动完成，需要最少的样式才能成为 可用。 在您的 sass 中导入此样式：

@import '@acato/vue-form-elements/scss/vue-form-elements';

如果您不需要所有默认样式，请只包含您想要包含的元素的样式。 那里 有一些 sass 变量可以让你轻松地为元素着色。 请在以下位置查看这些变量 <代码>@acato/vue-form-elements/scss/_variables.scss。

Basic usage

为方便起见，您可以使用 vfe-form-input-组件（见下文）将标签和特定输入合二为一。 这 有一些优点，因为它可以节省时间，例如标签会自动指向正确的输入 标签的属性。 但是，也可以创建单独的输入和标签：

vfe-label

创建标签。

Properties:

• label String
• forInput? String
• required? Boolean

Usage:

<vfe-label label="Email" for-input="user_email"></vfe-label>

vfe-instructions

创建说明文本。

Properties:

• instructions String | HTML

Usage:

<vfe-instructions instructions="You can find your username in the e-mail you've received."></vfe-instructions>

vfe-input

创建文本、数字、电子邮件或密码输入。

Properties:

• type "text" | "number" | "email" | "password",
• name String
• id? string (defaults to input name)
• value? String | Number
• settings? VFEInputSettings (default: new VFEInputSettings())
• placeholder? String | Number
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)
• required? Boolean

Usage:

<vfe-input type="email" name="user_email" placeholder="example@domain.com" v-model="user.email"></vfe-input>

vfe-textarea

创建一个文本区域。

Properties:

• name String
• id? string (defaults to input name)
• value? String
• placeholder? String
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)
• required? Boolean

Usage:

<vfe-textarea name="description" placeholder="Typ your text here..." v-model="description"></vfe-textarea>

vfe-checkbox

创建一个复选框。

Properties:

• name String
• id? string (defaults to input name)
• value? any (default: true)
• checked? Boolean (default: false)
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-checkbox name="newsletter" v-model="user.subscribeToNewsletter"></vfe-input>

或者：

<vfe-checkbox name="terms_and_conditions" :value="{Object}" v-model="user.acceptsTermsAndConditions"></vfe-input>

vfe-radio-button

创建一个单选按钮。

Properties:

• name String
• id? string (defaults to input name)
• value? any (default: true)
• checked? Boolean (default: false)
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-radio-button name="selected_option" :value="{Object}" v-model="user.selectedOption"></vfe-radio-button>

vfe-native-select

创建本机选择 ()。

Properties:

• name String
• id? string (defaults to input name)
• options Array<any>
• value? any
• settings? VFESelectSettings (default: new VFESelectSettings())
• placeholder? String
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-native-select name="favorite_color" :options="colors" :settings="settings" v-model="user.favoriteColor"></vfe-native-select>

// using an array of plain strings, resulting value will be the color name
const colors = ['red', 'blue', ...];

// using an array of objects, resulting value will be the color id
import VFESelectSettings from '@acato/vue-form-elements/vue/settings/vfe-select-settings';

const colors = [{ id: 1, name: 'red'}, { id: 2, name: 'blue'}, ... ];
const settings = new VFESelectSettings({
    label: 'name',
    value: 'id',
});

vfe-select

创建一个可以轻松设置样式的选择。

Properties:

与 fve-native-select 相同。

Usage:

与 fve-native-select 相同，但使用 fve-select-tag。

vfe-checkbox-group

创建一个复选框组。

Properties:

• name String
• id? string (defaults to input name)
• options Array<any>
• value? Array<any>
• settings? VFECheckboxGroupSettings (default: new VFECheckboxGroupSettings())
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-checkbox-group name="cities_ive_been" :options="cities" :settings="settings" v-model="user.citiesBeen"></vfe-checkbox-group>

// using an array of plain strings, resulting value will be the color name
const cities = ['London', 'Paris', 'Berlin', ...];

// using an array of objects, resulting value will be the color id
import VFECheckboxGroupSettings from '@acato/vue-form-elements/vue/settings/vfe-checkbox-group-settings';

const cities = [{ id: 1, name: 'London'}, { id: 2, name: 'Paris'}, { id: 2, name: 'Berlin'}, ... ];
const settings = new VFECheckboxGroupSettings({
    label: 'name',
    value: 'id',
});

vfe-radio-button-group

创建单选按钮组。

Properties:

• name String
• id? string (defaults to input name)
• options Array<any>
• value? any
• settings? VFERadioButtonGroupSettings (default: new VFERadioButtonGroupSettings())
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-radio-button-group name="favorite_city" :options="cities" :settings="settings" v-model="user.favoriteCity"></vfe-radio-button-group>

// using an array of plain strings, resulting value will be the color name
const cities = ['London', 'Paris', 'Berlin', ...];

// using an array of objects, resulting value will be the color id
import VFERadioButtonGroupSettings from '@acato/vue-form-elements/vue/settings/vfe-radio-button-group-settings';

const cities = [{ id: 1, name: 'London'}, { id: 2, name: 'Paris'}, { id: 2, name: 'Berlin'}, ... ];
const settings = new VFERadioButtonGroupSettings({
    label: 'name',
    value: 'id',
});

vfe-slider

创建滑块或范围滑块。

Properties:

• type "default" | "range" (default: default)
• name String
• id? string (defaults to input name)
• value? default slider: Number | range slider: Object{min: Number, max: Number}
• settings? VFESliderSettings (default: new VFESliderSettings())
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

默认滑块：

<vfe-slider name="age" :settings="settings" v-model="user.age"></vfe-slider>

import VFESliderSettings from '@acato/vue-form-elements/vue/settings/vfe-slider-settings';

const settings = new VFESliderSettings({
  min: 0,
  max: 130,
  step: 1,
});

范围滑块：

<vfe-slider type="range" name="budget" :settings="settings" v-model="budget"></vfe-slider>

import VFESliderSettings from '@acato/vue-form-elements/vue/settings/vfe-slider-settings';

const settings = new VFESliderSettings({
  min: 0,
  max: 10,
  precision: 2,
  minRange: 0.5,
});

vfe-options-slider

创建选项滑块或选项范围滑块。

Properties:

• type "default" | "range" (default: default)
• name String
• id? string (defaults to input name)
• options Array<any>
• value? default slider: any | range slider: Object{min: any, max: any}
• settings? VFEOptionsSliderSettings (default: new VFEOptionsSliderSettings())
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

默认选项滑块：

<vfe-options-slider name="review" :options="scores" :settings="settings" v-model="user.review"></vfe-options-slider>

import VFEOptionsSliderSettings from '@acato/vue-form-elements/vue/settings/vfe-options-slider-settings';

const scores = [
  { score: 0, label: 'Slecht' },
  { id: 5, label: 'Gemiddeld' },
  { id: 10, label: 'Goed' },
];
const settings = new VFEOptionsSliderSettings({
  value: 'score',
  orderBy: 'score',
});

范围选项滑块：

<vfe-options-slider type="range" name="price_range" :options="prices" :settings="settings" v-model="search.priceRange"></vfe-options-slider>

import VFEOptionsSliderSettings from '@acato/vue-form-elements/vue/settings/vfe-options-slider-settings';

const scores = [
  { maxPercentage: 25, label: '$' },
  { maxPercentage: 50, label: '$$' },
  { maxPercentage: 75, label: '$$$' },
  { maxPercentage: 100, label: '$$$$' },
];
const settings = new VFEOptionsSliderSettings({
  orderBy: 'maxPercentage',
});

vfe-autocomplete

创建自动完成表单输入。

Properties:

• name String
• id? string (defaults to input name)
• source VFEAutocompleteSource
• value? any
• settings? VFEAutocompleteSettings (default: new VFEAutocompleteSettings())
• placeholder? String
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-autcomplete name="hometown" :source="source" :settings="settings" v-model="user.hometown"></vfe-autcomplete>

import VFEAutocompleteSettings from '@acato/vue-form-elements/vue/settings/vfe-autocomplete-settings';
import VFEAutocompleteSource from '@acato/vue-form-elements/vue/helpets/vfe-autocomplete-source';

const citySearchRequest = (query) => { ... };
const source = new VFEAutocompleteSource(citySearchRequest, results => results.hits);
const settings = new VFEAutocompleteSettings({
    label: 'name',
    value: 'id',
    debounce: '500',
    limit: '10',
    noResultsText: 'Can\'t find city or town with that name',
});

vfe-swapbox

创建一个由两个选项列表组成的交换框表单输入。 第一个列表是当前选择的选项，第二个列表是 可用选项。 用户可以将选项从一个列表交换到另一个列表，因此 选择和取消选择选项。

Properties:

• name String
• id? string (defaults to input name)
• options Array<any>
• value? Array<any>
• settings? VFESwapboxSettings (default: new VFESwapboxSettings())
• hasValidationError? Boolean (default: false)
• disabled? Boolean (default: false)

Usage:

<vfe-swapbox name="selected_options" :options="options" :settings="settings" v-model="selectedOptions"></vfe-swapbox>

vfe-date-picker

基于 https://github.com/charliekassel/vuejs-datepicker 创建日期选择器表单输入。 但适用于 Moment.js-objects (https://momentjs.com/) 而不是 vanilla Date-objects。

Properties:

• 名称 String

• id？ string（默认为输入名称）

• 值？ Moment

• 设置？ VFEDatePickerSettings（默认值：new VFEDatePickerSettings()）*

• hasValidationError？ Boolean（默认值：false）

• 已禁用？ Boolean（默认值：false）

• 查看 https://github.com/charliekassel/vuejs-datepicker 了解所有可能的设置。

Usage:

<vfe-date-picker name="start_date" :settings="settings" v-model="startDate"></vfe-date-picker>

vfe-validation-error

创建一个段落来显示验证错误。

Properties:

• message String

Usage:

<vfe-validation-error message="Email is required"></vfe-validation-error>

vfe-form-input

创建指定类型的标签+表单输入。

Properties:

• type "text" | "number" | "email" | "password" | "tel" | "url" | "date" | "time" | "datetime-local" | "month" | "week" | "textarea" | "checkbox" | "radio-button" | "native-select" | "select" | "checkbox-group" | "radio-button-group" | "slider" | "range-slider" | "options-slider" | "range-options-slider" | "autocomplete" | "swapbox" | "date-picker",
• label String
• instructions? String | HTML
• name? String (by default derived from label (snake case): "My form input" becomes 'myforminput')
• id? String (defaults to input name)
• validationError? String
• value? any
• placeholder? String | Number
• disabled? Boolean (default: false)
• required? Boolean
• checked? Boolean
• options? Array<any>
• source? VFEAutocompleteSource
• settings? VFEInputSettings | VFESelectSettings | VFERadioButtonGroupSettings | VFECheckboxGroupSettings | VFESliderSettings | VFEOptionsSliderSettings | VFEAutocompleteSettings | VFESwapboxSettings | VFEDatePickerSettings

Usage:

<vfe-form-input type="email" label="Email" placeholder="example@domain.com" label="Email is required"></vfe-form-input>

<vfe-form-input type="select" label="Favorite color" placeholder="-- select your favorite color --" :options="colors" :settings="settings"></vfe-form-input>

<vfe-form-input type="autocomplete" label="Hometown" :source="source" :settings="settings"></vfe-form-input>