输入/表单元素 Vue 组件

表单元素允许您创建灵活且美观的表单布局。表单元素只是众所周知的列表视图 (列表和列表项Vue 组件) 但带有一些额外的组件。

查看 Framework7 的输入 / 表单元素以便了解其外观。

输入组件

包含以下组件：

f7-list-input- 列表项输入元素
f7-input- 输入元素

输入属性

属性	类型	默认	描述
<f7-list-input> 属性
media	字符串		列表项媒体图像 URL
label	字符串		输入的标签文本
浮动标签	布尔值	false	启用浮动标签
outline	布尔值	false	使输入轮廓
input	布尔值	true	是否应该渲染输入元素。如果您想在内部使用自定义输入，请禁用。
type	字符串		输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型： textarea- 渲染 textarea 元素 select- 渲染 select 元素 datepicker- 在输入聚焦时打开日历on input focus colorpicker- 在输入聚焦时打开颜色选择器on input focus texteditor- 在输入聚焦时打开文本编辑器on input focus
resizable	布尔值	false	使 textarea 可调整大小
inputStyle	字符串对象		输入的 "style" 属性的值，如果您需要传递额外的样式
clear-button	布尔值	false	添加输入清除按钮，点击时将清除输入值
validate	布尔值	false	当启用时，输入值将根据传递的 "pattern" 或根据输入类型在更改时进行验证。如果您使用自定义验证并在显示/隐藏错误消息的位置需要更多控制，则最好禁用验证并使用`error-message`与`error-message-force`props.
输入时验证	布尔值	false	当启用时，输入仅在失去焦点时进行验证。
onValidate	函数		输入验证时执行的回调，返回布尔值指示输入是否有效。 `<f7-list-input type="email" validate :onValidate="(isValid) => setInputValid(isValid)" />`
错误消息	字符串		当输入值无效时显示的自定义错误消息
强制错误消息	布尔值	false	强制错误消息为强制。在您使用自定义验证并希望在需要时显示/隐藏错误消息的情况下很有用
info	字符串		带有关输入信息的自定义附加文本
name	字符串		输入名称
占位符	字符串		输入占位符
id	字符串		包装元素 ID 属性
输入 ID	字符串		输入元素 ID 属性
值	字符串数字数组对象		输入值。如果`type="datepicker"`则值必须作为日历接受的 - 日期数组，例如`:value="[new Date()]"` 如果`type="colorpicker"`则值必须作为颜色选择器接受的 - 颜色对象，例如`:value="{hex: '#ff0000'}"` 如果`type="texteditor"`则值应为 HTML 字符串
inputmode	字符串		输入的本地 "inputmode" 属性的值
size	字符串数字		输入的本地 "size" 属性的值
pattern	字符串		输入的本地 "pattern" 属性的值
accept	字符串数字		输入的本地 "accept" 属性的值
autocomplete	字符串		输入的本地 "autocomplete" 属性的值
autofocus	布尔值	false	输入的本地 "autofocus" 属性的值
autosave	字符串		输入的本地 "autosave" 属性的值
禁用	布尔值	false	将输入标记为禁用
max	字符串数字		输入的本地"max"属性的值
min	字符串数字		输入的本地"min"属性的值
step	字符串数字		输入的本地"step"属性的值
maxlength	字符串数字		输入的本地"maxlength"属性的值
minlength	字符串数字		输入的本地"minlength"属性的值
multiple	布尔值	false	输入的本地"multiple"属性的值
只读	布尔值	false	将输入标记为只读
required	布尔值	false	将输入标记为必填
tabindex	字符串数字		输入的本地"tabindex"属性的值
不存储数据	布尔值	false	允许在使用时忽略输入值被存储表单存储
忽略存储数据	布尔值	false	与上一个相同
wrap	布尔值	true	当启用时，它将被包装在`<li>`元素之前插入元素
日历参数	对象		带有日历参数当使用时`type="datepicker"`
颜色选择器参数	对象		带有颜色选择器参数当使用时`type="colorpicker"`
文本编辑器参数	对象		带有文本编辑器参数当使用时`type="texteditor"`
<f7-input> 属性
outline	布尔值	false	使输入轮廓
wrap	布尔值	true	定义输入是否应被包装在`<div class="input">`元素中。
type	字符串		输入类型。所有默认的 HTML5 输入类型，以及一些特殊的类型： textarea- 渲染 textarea 元素 select- 渲染 select 元素 datepicker- 在输入聚焦时打开日历on input focus colorpicker- 在输入聚焦时打开颜色选择器on input focus texteditor- 在输入聚焦时打开文本编辑器on input focus
resizable	布尔值	false	使 textarea 可调整大小
inputStyle	字符串对象		输入的 "style" 属性的值，如果您需要传递额外的样式
clear-button	布尔值	false	添加输入清除按钮，点击时将清除输入值
validate	布尔值	false	当启用时，输入值将根据传递的 "pattern" 或根据输入类型在更改时进行验证。如果您使用自定义验证并在显示/隐藏错误消息的位置需要更多控制，则最好禁用验证并使用`error-message`与`error-message-force`props.
输入时验证	布尔值	false	当启用时，输入仅在失去焦点时进行验证。
onValidate	函数		输入验证时执行的回调，返回布尔值指示输入是否有效。 `<f7-input type="email" validate :onValidate="(isValid) => setInputValid(isValid)" />`
错误消息	字符串		当输入值无效时显示的自定义错误消息
强制错误消息	布尔值	false	强制错误消息为强制。在您使用自定义验证并希望在需要时显示/隐藏错误消息的情况下很有用
info	字符串		带有关输入信息的自定义附加文本
name	字符串		输入名称
占位符	字符串		输入占位符
id	字符串		包装元素 ID 属性
输入 ID	字符串		输入元素 ID 属性
值	字符串数字		输入值。如果`type="datepicker"`则值必须作为日历接受的 - 日期数组，例如`:value="[new Date()]"` 如果`type="colorpicker"`则值必须作为颜色选择器接受的 - 颜色对象，例如`:value="{hex: '#ff0000'}"` 如果`type="texteditor"`则值应为 HTML 字符串
inputmode	字符串		输入的本地 "inputmode" 属性的值
size	字符串数字		输入的本地 "size" 属性的值
pattern	字符串		输入的本地 "pattern" 属性的值
accept	字符串数字		输入的本地 "accept" 属性的值
autocomplete	字符串		输入的本地 "autocomplete" 属性的值
autofocus	布尔值	false	输入的本地 "autofocus" 属性的值
autosave	字符串		输入的本地 "autosave" 属性的值
已选中	布尔值	false	将输入标记为选中
禁用	布尔值	false	将输入标记为禁用
max	字符串数字		输入的本地"max"属性的值
min	字符串数字		输入的本地"min"属性的值
step	字符串数字		输入的本地"step"属性的值
maxlength	字符串数字		输入的本地"maxlength"属性的值
minlength	字符串数字		输入的本地"minlength"属性的值
multiple	布尔值	false	输入的本地"multiple"属性的值
只读	布尔值	false	将输入标记为只读
required	布尔值	false	将输入标记为必填
tabindex	字符串数字		输入的本地"tabindex"属性的值
不存储数据	布尔值	false	允许在使用时忽略输入值被存储表单存储
忽略存储数据	布尔值	false	与上一个相同
日历参数	对象		带有日历参数当使用时`type="datepicker"`
颜色选择器参数	对象		带有颜色选择器参数当使用时`type="colorpicker"`
文本编辑器参数	对象		带有文本编辑器参数当使用时`type="texteditor"`

输入事件

事件	参数	描述
<f7-list-input>, <f7-input> 事件
focus	(event)	当用户聚焦到输入时触发。
blur	(event)	当用户失去输入焦点时触发。
input	(event)	输入值改变时立即触发。注意：输入事件在beforeinput、keypress、keyup、keydown事件之后触发。
change	(event)	如果值改变，则在blur时触发。
输入:清除	(event)	当输入清除按钮被点击时触发
文本区域:调整大小	(event)	如果可调整大小的文本区域被调整大小，则触发。`event.detail`将包含对象`initialHeight`, `currentHeight`和`scrollHeight`属性
输入:为空	(event)	当输入值变为空时触发
输入:非空	(event)	当输入值变为非空时触发
日历:更改	(值)	当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。`type="datepicker"` Calendar value changed. As an argument it receives array with selected dates.
颜色选择器:更改	(值)	当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。`type="colorpicker"` Color Picker value changed. As an argument it receives object with Color Picker value.
文本编辑器:更改	(值)	当文本编辑器值改变时触发。作为参数，它接收文本编辑器值（HTML字符串）。`type="texteditor"` Text Editor value changed. As an argument it receives Texteditor value (HTML string).

输入插槽

<f7-list-input>有额外的插槽用于自定义元素：

default- 在情况下type="select"或type="textarea"- 元素将被放置在select或textarea标签内。
info- 元素将被插入到包含信息消息的容器中
error-message- 元素将被插入到包含错误消息的容器中
label- 元素将被插入到包含输入标签的容器中
input- 元素将替换输入元素（inputprop也必须设置为false)
root-start- 元素将被插入到<li>元素之前插入元素
root / root-end- 元素将被插入到<li>元素之前插入元素
content-start- 元素将被插入到<div class="item-content">元素之前插入元素
content / content-end- 元素将被插入到<div class="item-content">元素之前插入元素
inner-start- 元素将被插入到<div class="item-inner">元素之前插入元素
inner / inner-end- 元素将被插入到<div class="item-inner">元素之前插入元素
media- 元素将被插入到<div class="item-media">元素之前插入元素

输入 v-model

f7-list-input和f7-inputVue 组件支持v-modelonvalueprop:

<template>
  <p>Name is {{ name }}</p>
  <p>Email is {{ email }}</p>
  ...
  <f7-list-input
    label="Name"
    type="text"
    placeholder="Your name"
    clear-button
    v-model:value="name"
  />

  <f7-input
    type="text"
    placeholder="Your email"
    clear-button
    v-model:value="email"
  />
  ...
</template>
<script>
  export default {
    data() {
      name: '',
      email: '',
    },
    ...
  };
</script>

示例

inputs.vue

<template>
  <f7-page>
    <f7-navbar title="Form Inputs"></f7-navbar>

    <f7-block-title>Full Layout / Stacked Labels</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Password" type="password" placeholder="Your password" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="E-mail" type="email" placeholder="Your e-mail" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="URL" type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Phone" type="tel" placeholder="Your phone number" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Gender" type="select" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </f7-list-input>

      <f7-list-input label="Birthday" type="date" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Date time" type="datetime-local" placeholder="Please choose...">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Range" :input="false">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <template #input>
          <f7-range :value="50" :min="0" :max="100" :step="1" />
        </template>
      </f7-list-input>

      <f7-list-input label="Textarea" type="textarea" placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Resizable" type="textarea" resizable placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Floating Labels</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" floating-label type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="URL" floating-label type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input label="Resizable" floating-label type="textarea" resizable placeholder="Bio">
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Floating Labels + Outline Inputs</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Password"
        floating-label
        type="password"
        placeholder="Your password"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="E-mail"
        floating-label
        type="email"
        placeholder="Your e-mail"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input outline label="URL" floating-label type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Phone"
        floating-label
        type="tel"
        placeholder="Your phone number"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
      <f7-list-input
        outline
        label="Bio"
        floating-label
        type="textarea"
        resizable
        placeholder="Bio"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Validation + Additional Info</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        info="Default validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Fruit"
        type="text"
        placeholder="Type 'apple' or 'banana'"
        required
        validate
        pattern="apple|banana"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
        <template #info>
          <span>Pattern validation (<b>apple|banana</b>)</span>
        </template>
      </f7-list-input>

      <f7-list-input
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        info="Default e-mail validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="URL"
        type="url"
        placeholder="Your URL"
        info="Default URL validation"
        required
        validate
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input
        label="Number"
        type="text"
        placeholder="Enter number"
        info="With custom error message"
        error-message="Only numbers please!"
        required
        validate
        pattern="[0-9]*"
        clear-button
      >
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Icon + Input</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input type="text" placeholder="Your name" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input type="password" placeholder="Your password" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input type="email" placeholder="Your e-mail" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>

      <f7-list-input type="url" placeholder="URL" clear-button>
        <template #media>
          <f7-icon icon="demo-list-icon" />
        </template>
      </f7-list-input>
    </f7-list>

    <f7-block-title>Label + Input</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input label="Name" type="text" placeholder="Your name" clear-button></f7-list-input>

      <f7-list-input
        label="Password"
        type="password"
        placeholder="Your password"
        clear-button
      ></f7-list-input>

      <f7-list-input
        label="E-mail"
        type="email"
        placeholder="Your e-mail"
        clear-button
      ></f7-list-input>

      <f7-list-input label="URL" type="url" placeholder="URL" clear-button></f7-list-input>
    </f7-list>

    <f7-block-title>Only Inputs</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input type="text" placeholder="Your name" clear-button></f7-list-input>

      <f7-list-input type="password" placeholder="Your password" clear-button></f7-list-input>

      <f7-list-input type="email" placeholder="Your e-mail" clear-button></f7-list-input>

      <f7-list-input type="url" placeholder="URL" clear-button></f7-list-input>
    </f7-list>

    <f7-block-title>Inputs + Additional Info</f7-block-title>
    <f7-list strong-ios dividers-ios inset-ios>
      <f7-list-input
        type="text"
        placeholder="Your name"
        info="Full name please"
        clear-button
      ></f7-list-input>

      <f7-list-input
        type="password"
        placeholder="Your password"
        info="8 characters minimum"
        clear-button
      ></f7-list-input>

      <f7-list-input
        type="email"
        placeholder="Your e-mail"
        info="Your work e-mail address"
        clear-button
      ></f7-list-input>

      <f7-list-input
        type="url"
        placeholder="URL"
        info="Your website URL"
        clear-button
      ></f7-list-input>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7List,
  f7Icon,
  f7ListInput,
  f7Range,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7Icon,
    f7ListInput,
    f7Range,
  },
};
</script>

改进此文档

在本页上

输入组件
输入属性
输入事件
输入插槽
输入 v-model
示例