Form

nly-form 是一个表单控件,会为置于其中的其他表单控件提供一些辅助型功能,比如布局,验证等等。

简介

确保置于 nly-form 中的 nly-form-input 设置正确的 prop type,以便 nly-form 可以直接控制验证信息

<template>
  <div>
    <nly-form @submit="onSubmit" @reset="onReset" v-if="show">
      <nly-form-group
        id="input-group-1"
        label="邮件:"
        label-for="input-1"
        description="请输入您的邮件地址"
      >
        <nly-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></nly-form-input>
      </nly-form-group>

      <nly-form-group id="input-group-2" label="姓名:" label-for="input-2">
        <nly-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="Enter name"
        ></nly-form-input>
      </nly-form-group>

      <nly-form-group id="input-group-3" label="Food:" label-for="input-3">
        <nly-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></nly-form-select>
      </nly-form-group>

      <nly-button type="submit" variant="primary">Submit</nly-button>
      <nly-button type="reset" variant="danger">Reset</nly-button>
    </nly-form>
    <nly-card class="mt-3" header-variant="info" header-outline>
      <nly-card-header>
        输入结果
      </nly-card-header>
      <nly-card-body>
        <pre class="m-0">{{ form }}</pre>
      </nly-card-body>
    </nly-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: "",
          name: "",
          food: null
        },
        foods: [
          { text: "请选择", value: null },
          "作者帅",
          "作者屌大",
          "作者大佬",
          "牛逼"
        ],
        show: true
      };
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault();
        alert(JSON.stringify(this.form));
      },
      onReset(evt) {
        evt.preventDefault();
        this.form.email = "";
        this.form.name = "";
        this.form.food = null;
        this.show = false;
        this.$nextTick(() => {
          this.show = true;
        });
      }
    }
  };
</script>

<!-- 简介 .name -->
<!-- form.vue -->

inline 水平表格

使用 inline prop 来使得表单内的输入框,标签,按钮等处于水平,您可能需要设置 mr-*, ml-* 等自带的 css 类来控制表单组件的间距

<div>
  <nly-form inline>
    <label class="sr-only" for="inline-form-input-name">名字</label>
    <nly-input
      id="inline-form-input-name"
      class="mb-2 mr-sm-2 mb-sm-0"
      placeholder="Jane Doe"
    ></nly-input>

    <label class="sr-only" for="inline-form-input-username">用户名</label>
    <nly-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
      <nly-input
        id="inline-form-input-username"
        placeholder="Username"
      ></nly-input>
    </nly-input-group>

    <nly-button variant="primary">保存</nly-button>
  </nly-form>
</div>

<!-- inline.name -->
<!-- inline.vue -->

下拉选择框同样支持

<div>
  <nly-form inline>
    <label class="mr-sm-2" for="inline-form-custom-select-pref"
      >Preference</label
    >
    <nly-form-select
      id="inline-form-custom-select-pref"
      class="mb-2 mr-sm-2 mb-sm-0"
      :options="[{ text: 'Choose...', value: null }, 'One', 'Two', 'Three']"
      :value="null"
    ></nly-form-select>
    <nly-button variant="primary">保存</nly-button>
  </nly-form>
</div>

<!-- inline.name -->
<!-- inline.vue -->

屏幕阅读器隐藏标签

如果您可以屏幕阅读器上的效果,您可以使用 .sr-only 来在普通屏幕上隐藏标签。您还可以使用 aria-label, aria-labelledby 或者 title attrs 来代替 .sr-only。如果这些属性都没有,屏幕阅读器会自动关联 placeholder 来代替 label 。

表单简介

nly-form-text 组件可以为表单提供一简介提示描述文字, 默认颜色是 muted, 默认标签是 small

<div>
  <nly-form @submit.stop.prevent>
    <label for="text-password">Password</label>
    <nly-input
      type="password"
      id="text-password"
      aria-describedby="password-help-block"
    ></nly-input>
    <nly-form-text id="password-help-block" text-variant="yellow">
      Your password must be 8-20 characters long, contain letters and numbers,
      and must not contain spaces, special characters, or emoji.
    </nly-form-text>
  </nly-form>
</div>

<!-- form-text.name -->
<!-- form-text.vue -->

valid feedback 验证提示

nly-form-feedback 会给对应的表单组件提供一个彩色的文本信息来说明表单组件所处的状态,会渲染在表单组件的后面,并且是同一级。 如果需要强制显示对应的 feedback, 可以设置 prop force-show 为 true 或者设置 state prop 为 invalid, warning, valid, novalid ,也可以给父元素添加 .was-validated css 类.

nly-input-group 除外,因为 adminlte 3input-group 本身并不支持 feedback , nly-input-group 最外层封装了一层 <div> 才使得 input-group 支持 feedback详情

<template>
  <div>
    <nly-form @submit.stop.prevent>
      <label for="feedback-user">User ID</label>
      <nly-input
        v-model="userId"
        :valid="validation"
        id="feedback-user"
      ></nly-input>
      <nly-form-feedback state="invalid">
        Your user ID must be 5-12 characters long.
      </nly-form-feedback>
      <nly-form-feedback state="valid">
        Looks Good.
      </nly-form-feedback>
    </nly-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userId: ""
      };
    },
    computed: {
      validation() {
        return this.userId.length > 4 && this.userId.length < 13
          ? "valid"
          : "invalid";
      }
    }
  };
</script>

<!-- valid.name -->
<!-- valid.vue -->

如果使用 nly-form-feedback,需要同级元素设置 .is-valid, .is-invalid, .is-warning css 类, prop state 的取值请注意

  • valid 代表正确验证提示

  • invalid 代表错误验证提示

  • warning 代表警告提示

datalist

如果浏览器支持 <datalist>nly-form-datalist 组件会创建一个 <datalist> 元素来为表单控件提供输入选项。

可以使用 options prop 给 nly-form-datalist 组件提供下拉选项,也可以直接插入 <option> 标签给 nly-form-datalist 提供下拉选项

<template>
  <label for="input-with-list">Input with datalist</label>
  <nly-form-input list="input-list" id="input-with-list"></nly-form-input>
  <nly-form-datalist id="input-list" :options="options"></nly-form-datalist>
</template>

<script>
  export default {
    data() {
      return {
        options: ["Apple", "Banana", "Grape", "Kiwi", "Orange"]
      };
    }
  };
</script>

<!-- datalist.name -->
<!-- datalist.vue -->

组件参数

props 参数

props类型默认值描述
id
Stringnull设置id
inline
Booleanfalse表单inline布局,设置true标签、控件,按钮都会处于一个水平线上
novalidate
Booleanfalse禁用浏览器html5表单验证机制,默认禁用。设置true,禁用浏览器html5表单验证机制
validated
Booleanfalse添加表单自动验证类。设置true,表单会添加was-validated。将会自动触发控件的feedback
role
String'form'role属性

Events

EventArgumentsDescription
submit
  1. event - 原生提交事件
提交表单数据

props 参数

props类型默认值描述
id
String设置id
tag
String'span'标签
tooltip
Booleanfalse设置为true时,feedback呈现方式为tooltip,呈现级别对应props valid的值
force-show
Booleanfalse强制显示feedback
state
String'valid'控制组件validation状态。可选 'valid','invalid','warning','novalid'。设置为'novalid'时,没有validation提示
aria-live
String对屏幕阅读客户端设置 aria-live 区域。可选 'polite','assertive'
role
Stringrole属性
text
Stringfeedback validation文本内容

props 参数

props类型默认值描述
id
String设置id
tag
String'small'标签
text-variant
String'muted'文字颜色,可选 primary, secondary, success, info, warning, danger, light, dark, lightblue, navy, olive, lime, fuchsia, maroon, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, white, gray, graydark
inline
Booleanfalse设置 true 为 inline 元素,设置 false 为 block 元素

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-form>NlyFormnly-adminlte-vue
<nly-form-feedback>NlyFormFeedbacknly-adminlte-vue
<nly-form-text>NlyFormTextnly-adminlte-vue

例子

import { NlyForm } from 'nly-adminlte-vue'
Vue.component('nly-form', NlyForm)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
FormPluginnly-adminlte-vue

例子

import { FormPlugin } from 'nly-adminlte-vue'
Vue.use(FormPlugin)