cv-form-item

简要

表单单项

示例

::: demo

<template>
  <div style="padding: 20px; margin-bottom: 100px">
    <h1>cv-form-base 表单组件</h1>
    <br />
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" labelWidth="125">
      <cv-form-item label="单行文本" prop="text222" required labelWidth="155">
        <cv-input-text v-model="formData.text222" />
        <template #tip>提示语aasd</template>
      </cv-form-item>
      <cv-form-item label="用户名" required>
        <cv-input-text label="" v-model="formData.username" />
      </cv-form-item>
      <cv-form-item label="密码" required>
        <cv-input-password v-model="formData.password" />
      </cv-form-item>
      <cv-form-item label="确认密码" required>
        <cv-input-password v-model="formData.password2" />
      </cv-form-item>
      <cv-form-item label="邮箱" required>
        <cv-input-email v-model="formData.email" />
      </cv-form-item>
      <cv-form-item label="手机" required>
        <cv-input-mobile v-model="formData.phone1" />
      </cv-form-item>
      <cv-form-item label="身份证" required>
        <cv-input-idcard v-model="formData.idcard" />
      </cv-form-item>
      <cv-form-item label="数字" required>
        <cv-input-number v-model="formData.number" />
      </cv-form-item>
      <cv-form-item label="小数点" required>
        <cv-input-digit v-model="formData.number" />
      </cv-form-item>
      <cv-form-item label="文本域" required>
        <cv-textarea v-model="formData.textarea" />
      </cv-form-item>
      <cv-form-item label="文本域按钮" required>
        <cv-textarea-btn v-model="formData.textareabtn">
          <cv-btn-base type="primary" disabled>主要按钮</cv-btn-base>
          <cv-btn-base type="success" disabled>成功按钮</cv-btn-base>
        </cv-textarea-btn>
      </cv-form-item>
      <cv-form-item label="文本按钮" required>
        <cv-input-btn label="名称" v-model="formData.btn2">
          <cv-btn-base icon="ElIconDelete" type="primary">主要按钮</cv-btn-base>
          <cv-btn-base type="info">信息按钮</cv-btn-base>
        </cv-input-btn>
      </cv-form-item>
      <cv-form-item label="单选框-基本" required>
        <cv-radio-group v-model="formData.radiobase1" :dataLists="radioData" />
      </cv-form-item>
      <cv-form-item label="单选框-性别" required>
        <cv-radio-opt-base v-model="formData.radiosex" />
      </cv-form-item>
      <cv-form-item label="单选框-按钮" required>
        <cv-radio-group v-model="formData.radiobutton" :dataLists="setCity" />
      </cv-form-item>
      <cv-form-item label="多选框-基本" required>
        <cv-checkbox-group v-model="formData.checkboxbase" :dataLists="dataLists" />
      </cv-form-item>
      <cv-form-item label="多选框-所有" required>
        <cv-checkbox-all v-model="formData.checkboxall" :dataLists="dataLists" />
      </cv-form-item>
      <cv-form-item label="多选框-按钮" required>
        <cv-checkbox-group type="button" v-model="formData.checkboxbtn" :dataLists="dataLists" />
      </cv-form-item>
      <cv-form-item label="下拉选择-基础" required>
        <cv-select-base label="选一个" v-model="formData.selectBaseVal1" />
      </cv-form-item>
      <cv-form-item label="下拉选择-可多选" required>
        <cv-select-base label="可多选" v-model="formData.selectBaseVal2" multiple :multiple-limit="2" :dataLists="selectList" />
      </cv-form-item>
      <cv-form-item label="验证码-短信" required>
        <cvCodeSms v-model="formData.codesms" :mobile="formData.phone1" />
      </cv-form-item>
    </cv-form-base>

    <cv-btn-base @click="hanldeSubmit">按钮</cv-btn-base>
  </div>
</template>

<script>
export default {
  watch: {
    formData() {
      console.log(this.formData);
    }
  },
  data() {
    return {
      // 表单数据
      formRules: {
        text222: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      formData: {},
      radioData: [
        { label: '爱填不填', value: '1' },
        { label: '必填', value: '2' },
        { label: 'c', value: '3', checked: true }
      ],
      setCity: [{ label: '北京' }, { label: '上海', checked: true }, { label: '广州' }, { label: '深圳', disabled: true }],
      dataLists: [{ label: '北京' }, { label: '上海' }, { label: '广州' }, { label: '深圳' }, { label: '杭州' }],
      // 选择器数据
      selectList: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎', disabled: true },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ]
    };
  },
  methods: {
    hanldeSubmit() {
      this.$refs['refFormBase'].validate((valid) => {
        if (valid) {
          console.log('baseForm的数据', this.formData);
        }
      });
    }
  }
};
</script>

:::

属性

属性名	类型	默认值	说明	可选值
label	String	-	字段名	-
labelWidth	String	80px	字段区域宽度，上下排列无效
offset	Number	0	指定栅格左侧间隔的栏数	-
col	Number	24	栅格在一行中占据的宽度比，默认占满一行	-
rules	String	-	验证规则
tip	String	-	字段提示/说明，不设置则没有提示	-
require	Boolean	-	是否必填（字段名前显示星号）	-