mint ui的field用法和修改樣式的方法

field

表單編輯器。

適用於需要收集用戶信息的表單頁面，例如：

 

•  在script中引入：

import { Field } from 'mint-ui';

 

 

• 用法：

<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="網站" placeholder="請輸入網址" type="url" v-model="website"></mt-field>
<mt-field label="數字" placeholder="請輸入數字" 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>

 

• 設置校驗狀態

<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>

 

• 自定義內容（例如添加驗證碼）

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

 

• 修改field樣式的方法：

由於VUE的<style scoped>作用域問題,一般對mint的組件樣式所做的修改,都不生效。
方法：
使用>>>或者是/deep/。

.list /deep/ input{
    font-size: 0.875rem;
  }

>>>或/deep/加在類名前，可修改對應樣式。

label里字的樣式我不知道怎么改。