Field - 表单编辑器

2021-01-13 14:54 更新
表单编辑器。

引入

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="网站" 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>

API

参数 说明 类型 可选值 默认值
type 输入框类型 String text, number, email, url, tel, date, datetime, password, textarea text
label 标签 String
value 绑定表单输入值 String
rows 类型为 textarea 时可指定高度(显示行数) Number
placeholder 占位内容 String
disableClear 禁用 clear 按钮 Booean false
readonly readonly Boolean false
disabled disabled Boolean false
state 校验状态 String error, success, warning
attr 设置原生属性,例如 :attr="{ maxlength: 10 }" Object

Slot

name 描述
- 显示的 HTML 内容


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部