Form 表单

基本用法

<template>
  <plv-form
    :model="form"
    form-width="500px"
    label-width="80px">
    <!-- 邮箱 -->
    <plv-form-item label="邮箱" prop="email">
      <plv-input
        placeholder="请输入邮箱"
        v-model="form.email" />
    </plv-form-item>
    <!-- 日期 -->
    <plv-form-item label="日期" prop="date" tips-text="这是日期的一个描述">
      <plv-date-picker
        placeholder="请选择日期"
        v-model="form.date" />
    </plv-form-item>
    <!-- 分类 -->
    <plv-form-item label="分类" prop="type">
      <plv-select
        placeholder="请选择分类"
        v-model="form.type">
        <plv-select-option label="分类一" value="type1" />
        <plv-select-option label="分类二" value="type2" />
        <plv-select-option label="分类三" value="type3" />
      </plv-select>
    </plv-form-item>
    <!-- 性别 -->
    <plv-form-item label="性别" prop="sex" label-height="16px">
      <plv-radio-group v-model="form.sex">
        <plv-radio label="男" value="boy" />
        <plv-radio label="女" value="girl" />
      </plv-radio-group>
    </plv-form-item>
    <!-- 开关 -->
    <plv-form-item
      label="开关"
      label-height="20px"
      vertical-gutter="16px"
      content-inner-width="32px"
      tips-text="这是一个开关的提示"
      tips-inline>
      <plv-switch v-model="form.lock" />
    </plv-form-item>
    <!-- 爱好 -->
    <plv-form-item label="爱好" prop="hobby" label-height="18px">
      <plv-checkbox-group v-model="form.hobby">
        <plv-checkbox label="运动" value="sport" />
        <plv-checkbox label="阅读" value="read" />
        <plv-checkbox label="电影" value="film" />
      </plv-checkbox-group>
    </plv-form-item>
    <!-- 提交 -->
    <plv-form-item>
      <plv-button>提交</plv-button>
    </plv-form-item>
  </plv-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        date: '',
        type: '',
        sex: '',
        lock: true,
        hobby: [],
      }
    };
  },
};
</script>

显示代码

表单验证-组件式

<template>
  <plv-form
    ref="form"
    :model="form"
    form-width="500px"
    label-width="80px"
    :rules="rules">
    <!-- 邮箱 -->
    <plv-form-item label="邮箱" prop="email" required>
      <plv-input
        placeholder="请输入邮箱"
        v-model="form.email" />
    </plv-form-item>
    <!-- 日期 -->
    <plv-form-item label="日期" prop="date">
      <plv-date-picker
        placeholder="请选择日期"
        v-model="form.date" />
    </plv-form-item>
    <!-- 分类 -->
    <plv-form-item label="分类" prop="type" required>
      <plv-select
        placeholder="请选择分类"
        v-model="form.type">
        <plv-select-option label="分类一" value="type1" />
        <plv-select-option label="分类二" value="type2" />
        <plv-select-option label="分类三" value="type3" />
      </plv-select>
    </plv-form-item>
    <!-- 性别 -->
    <plv-form-item label="性别" prop="sex" label-height="16px">
      <plv-radio-group v-model="form.sex">
        <plv-radio label="男" value="boy" />
        <plv-radio label="女" value="girl" />
      </plv-radio-group>
    </plv-form-item>
    <!-- 爱好 -->
    <plv-form-item label="爱好" prop="hobby" label-height="18px">
      <plv-checkbox-group v-model="form.hobby">
        <plv-checkbox label="运动" value="sport" />
        <plv-checkbox label="阅读" value="read" />
        <plv-checkbox label="电影" value="film" />
      </plv-checkbox-group>
    </plv-form-item>
    <!-- 提交 -->
    <plv-form-item>
      <plv-button @click="handleSubmit">提交</plv-button>
    </plv-form-item>
  </plv-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        date: '',
        type: '',
        sex: 'boy',
        hobby: [],
      },
      rules: {
        email: [
          { type: 'string', message: '请输入邮箱', required: true },
          { type: 'email', message: '请输入正确的邮箱格式' }
        ],
        date: [
          { type: 'date', message: '请选择日期', required: true }
        ],
        type: { type: 'string', message: '请选择分类', required: true },
        hobby: { type: 'array', message: '请选择爱好', required: true },
      }
    };
  },

  methods: {
    handleSubmit() {
      this.$refs.form.validate().then(() => {
        this.$toast.success('提交成功');
      }).catch(() => {});
    }
  }
};
</script>

显示代码

表单验证-JS

<template>
  <div>
    <plv-input-url class="demo-form-input-url" v-model="value.url" />
    <plv-button @click="validate">验证表单数据</plv-button>
  </div>
</template>

<script>
  import { Form } from 'polyv-ui';

  export default {
    data() {
      return {
        rules: {
          url: [
            { type: 'string', message: '请输入链接地址', required: true },
            { type: 'url', message: '请输入正确的链接地址' },
          ]
        },

        value: {
          url: ''
        }
      };
    },

    methods: {
      validate() {
        const error = Form.validate(this.rules, this.value);
        if (error) {
          this.$toast.error(error);
        } else {
          this.$toast.success('成功');
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
.demo-form-input-url {
  margin-bottom: 16px;
}
</style>

显示代码

表单验证规则请参考async-validator (opens new window)

Form Attributes

参数	说明	类型	可选值	默认值
model	表单数据对象	Object	-	-
form-width	表单宽度	String	-	100%
label-width	表单标签宽度	String	-	-
label-height	表单标签高度	String	-	40px
vertical-gutter	表单垂直方向上的距离	String	-	20px
content-inner-width	表单内容宽度	String	-	20px
rules	表单验证规则	Object	-	-

FormItem Attributes

参数	说明	类型	可选值	默认值
prop	表单项字段名	String	-	-
label	标签文本	String	-	-
label-width	表单标签宽度，优先级大于 Form	String	-	-
label-height	表单标签高度，优先级大于 Form	String	-	=
vertical-gutter	表单垂直方向上的距离，优先级大于 Form	String	-	-
content-inner-width	表单内容宽度，优先级大于 Form	String	-	-
rules	表单验证规则，优先级大于 Form	Object	-	-
tips-text	表单项文本描述	String	-	-
tips-inline	表单项文本描述是否行内样式	Boolean	-	false
tips-margin-small	小型文本描述上边距	Boolean	-	false
tips-margin	文本描述上边距，优先级最高，tips-inline下无效	String	-	-
required	表单项是否为必填，true 下 label 显示 “*”	Boolean	-	false

FormItem Slots

name	说明	参数
tips	提示插槽	-