Mint UI 表單編輯器-Field

表單編輯器。

引入

import { Field } from 'mint-ui';

Vue.component(Field.name, Field);

例子

基礎(chǔ)用法

<mt-field label="用戶名" placeholder="請(qǐng)輸入用戶名" v-model="username"></mt-field>
<mt-field label="郵箱" placeholder="請(qǐng)輸入郵箱" type="email" v-model="email"></mt-field>
<mt-field label="密碼" placeholder="請(qǐng)輸入密碼" type="password" v-model="password"></mt-field>
<mt-field label="手機(jī)號(hào)" placeholder="請(qǐng)輸入手機(jī)號(hào)" type="tel" v-model="phone"></mt-field>
<mt-field label="網(wǎng)站" placeholder="請(qǐng)輸入網(wǎng)址" type="url" v-model="website"></mt-field>
<mt-field label="數(shù)字" placeholder="請(qǐng)輸入數(shù)字" type="number" v-model="number"></mt-field>
<mt-field label="生日" placeholder="請(qǐng)輸入生日" type="date" v-model="birthday"></mt-field>
<mt-field label="自我介紹" placeholder="自我介紹" type="textarea" rows="4" v-modal="introduction"></mt-field>

設(shè)置校驗(yàn)狀態(tài)

<mt-field label="郵箱" state="success" v-model="email"></mt-field>
<mt-field label="郵箱" state="error" v-model="email"></mt-field>
<mt-field label="郵箱" state="warning" v-model="email"></mt-field>

自定義內(nèi)容（例如添加驗(yàn)證碼）

<mt-field label="驗(yàn)證碼" v-model="captcha">
  <img src="../assets/100x100.png" height="45px" width="100px">
</mt-field>

API

Slot