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