cv-form-item ¶
简要 ¶
示例 ¶
vue
<template>
<view style="padding: 10px">
<cv-form-base ref="refFormBase" :rules="formRules" :model="formData">
<cv-form-item label="文本">
<cv-input-text v-model="formData.name" />
</cv-form-item>
<cv-form-item label="小数金额">
<cv-input-digit v-model="formData.price" />
</cv-form-item>
<cv-form-item label="数字">
<cv-input-number v-model="formData.number" />
</cv-form-item>
<cv-form-item label="密码">
<cv-input-password v-model="formData.password" />
</cv-form-item>
<cv-form-item label="多行文本">
<cv-textarea v-model="formData.textarea" />
</cv-form-item>
<cv-form-item label="时间">
<cv-time-base v-model="formData.time1" />
</cv-form-item>
<cv-form-item label="日期">
<cv-date-base v-model="formData.date1" />
</cv-form-item>
<cv-form-item label="时间日期">
<cv-datetime-base v-model="formData.datetime1" />
</cv-form-item>
<cv-form-item label="时间日期">
<cv-datetime-linkage v-model="formData.datetime2" />
</cv-form-item>
<cv-form-item label="图片">
<cv-upload-image v-model="formData.img" :src="formData.img_cdn" />
</cv-form-item>
<cv-form-item label="多图上传" labelPosition="top">
<cv-upload-image v-model="formData.more" uploadType="more" maxlength="10" />
</cv-form-item>
<cv-form-item label="大图上传" labelPosition="top">
<cv-upload-image v-model="formData.big" uploadType="big" uploadTitle="大图" :uploadTip="uploadTip" />
</cv-form-item>
<cv-form-item label="label">显示内容</cv-form-item>
</cv-form-base>
</view>
</template>
<script>
export default {
data() {
return {
formRules: {},
formData: {},
uploadTip: {
dimension: '比例:750*375像素;',
format: '格式:jpg/png;',
size: '大小:小于2MB'
}
};
}
};
</script>
属性 ¶
- 撒打算大
属性名 | 类型 | 默认值 | v |
---|---|---|---|
label | String | - | 字段名 |
labelWidth | Number | 60 | label宽度,上下排列无效 |
labelPosition | String | left | 布局方式:可选 left、top |
require | Boolean | false | 是否必填 |
message | String | - | 错误提示 |
messageDisplay | Boolean | false | 错误提示是否显示 |
插槽 ¶
插槽名 | 说明 | 插槽作用域 |
---|---|---|
tip | 提示 |