表單編輯器。

引入

import { Field } from 'mint-ui';

Vue.component(Field.name, Field);

例子

基礎用法

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

設置校驗狀態(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)容（例如添加驗證碼）

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

API

Slot