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里字的样式我不知道怎么改。