首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

表单编辑器 | Field

表单编辑器。

引入

代码语言:javascript
复制
import { Field } from 'mint-ui';

Vue.component(Field.name, Field);

例子

基础用法

代码语言:javascript
复制
<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>

设置校验状态

代码语言:javascript
复制
<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>

自定义内容(例如添加验证码)

代码语言:javascript
复制
<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 内容

扫码关注腾讯云开发者

领取腾讯云代金券