vue-simpleform
A Vue component for building form
Installation
NPM
$npm install --save @hanhdt/vue-simpleform
YARN
$yarn add @hanhdt/vue-simpleform
CDN
https://unpkg.com/@hanhdt/vue-simpleform@0.4.0/dist/vue-simpleform.umd.js
Provided Components
-
SimpleForm
: This is main component which will generally create HTMLform
tag -
FormInput
: The form input component utility -
Loading
: A loading component is called when the form is busy
Usages
Props descriptions
-
SimpleForm
-
title
: This is displayed as Form's title in the<h2>
element -
operation
: The asynchronous function called when the form is submitted. It is returned in a promise-style -
valid
: A Boolean to prevent calling the operation if the form is not valid
-
-
FormInput
-
name
: form input's name -
inputClass
: the customed class -
placeholder
: input's placeholder -
type
: type of input tag rendered
-
SimpleForm
component in existing Vue project
Using Import package
in the main.js
, import the package as a global component.
import '@hanhdt/vue-simpleform'
SimpleForm
component into *.vue
template
Add <SimpleForm
class="form"
:title="title"
:operation="() => console.log('form submit')"
:valid="valid">
<!-- FORM TEXT INPUT -->
<FormInput
name="title"
v-model="title"
placeholder="Short title (max 100 chars)"
maxlength="100"
:text="title"
required />
<!-- FORM TEXTAREA INPUT -->
<FormInput
type="textarea"
name="description"
v-model="description"
placeholder="Describe your problem in details"
rows="4" />
<template slot="actions">
<!-- BUTTON ACTIONS -->
<button type="submit">
Submit
</button>
</template>
</SimpleForm>