赞助方成为赞助方

Vue 组件的输入/表单元素

表单元素允许你创建灵活和漂亮的表单布局。表单元素仅仅是众所周知的列表视图（列表和列表项 Vue 组件），但是拥有少量附加组件。

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

输入组件

包含以下组件

输入属性

属性类型默认值描述
<f7-list-input> 属性
媒体字符串列表项媒体图片 URL
标签字符串输入标签文本
浮动标签布尔值假启用浮动标签
边框布尔值假使输入边框化
输入布尔值真是否要渲染输入元素。如果您要在内部使用自定义输入，请禁用此功能。
类型字符串输入类型。所有默认 HTML5 输入类型和一些特殊类型
  • 文本区域 - 渲染文本区域元素
  • 选择 - 渲染选择元素
  • 日期选择器 - 在输入焦点上打开日历
  • 颜色选择器 - 在输入焦点上打开颜色选择器
  • 文本编辑器 - 在输入焦点上打开文本编辑器
可缩放布尔值假使文本区域可缩放
输入样式字符串
对象		输入的“style”属性值，如果您需要传递额外的样式
清除按钮布尔值假添加输入清除按钮，单击该按钮将清除输入值
验证布尔值假启用后，输入值将根据传递的“pattern”或输入类型在更改时进行验证。如果您使用自定义验证并且需要进一步控制显示/隐藏错误消息的位置，那么最好禁用验证并使用 error-message 与 error-message-force 属性配合使用。
失焦时验证布尔值假启用后，输入仅在失焦时进行验证。
onValidate函数在输入验证时执行回调，返回布尔值指示输入是否有效。
<f7-list-input
  type="email"
  validate
  :onValidate="(isValid) => setInputValid(isValid)"
/>
错误消息字符串当输入值无效时显示的自定义错误消息
错误消息强制布尔值假强制错误消息。这在您使用自定义验证并希望在需要时显示/隐藏错误消息时很有用
信息字符串有关输入的自定义附加信息文本
名称字符串输入名称
占位符字符串输入占位符
ID字符串包装元素 ID 属性
输入 ID字符串输入元素 ID 属性
值字符串
数字
数组
对象

输入值。

如果 type="datepicker"，则必须将值传递为日历接受的内容 - 带有日期的数组，例如 :value="[new Date()]"

如果 type="colorpicker"，则必须将值传递为颜色选择器接受的内容 - 带有颜色的对象，例如 :value="{hex: '#ff0000'}"

如果 type="texteditor"，则值应为 HTML 字符串

输入模式字符串输入的原生“inputmode”属性的值
大小字符串
数字		输入的原生“size”属性的值
图案字符串输入的原生“pattern”属性的值
接受字符串
数字		输入的原生“accept”属性的值
自动完成字符串输入的原生“autocomplete”属性的值
自动对焦布尔值假输入的原生“autofocus”属性的值
autosave字符串输入的原生“autosave”属性的值
disabled布尔值假将输入标记为已禁用
max字符串
数字		输入的原生“max”属性的值
min字符串
数字		输入的原生“min”属性的值
step字符串
数字		输入的原生“step”属性的值
maxlength字符串
数字		输入的原生“maxlength”属性的值
minlength字符串
数字		输入的原生“minlength”属性的值
multiple布尔值假输入的原生“multiple”属性的值
readonly布尔值假将输入标记为只读
required布尔值假将输入标记为必填项
tabindex字符串
数字		输入的原生“tabindex”属性的值
no-store-data布尔值假当与表单存储配合使用时允许忽略输入值存储
ignore-store-data布尔值假与上一个相同
wrap布尔值真启用时，将包装在<li>元素中
calendar-params对象当type="datepicker"时使用的具有日历参数的对象
color-picker-params对象当type="colorpicker"时使用的具有颜色选择器参数的对象
text-editor-params对象当type="texteditor"时使用的具有文本编辑器参数的对象
<f7-input>属性
边框布尔值假使输入边框化
wrap布尔值真定义是否用<div class="input">元素包装输入。
类型字符串输入类型。所有默认 HTML5 输入类型和一些特殊类型
  • 文本区域 - 渲染文本区域元素
  • 选择 - 渲染选择元素
  • 日期选择器 - 在输入焦点上打开日历
  • 颜色选择器 - 在输入焦点上打开颜色选择器
  • 文本编辑器 - 在输入焦点上打开文本编辑器
可缩放布尔值假使文本区域可缩放
输入样式字符串
对象		输入的“style”属性值，如果您需要传递额外的样式
清除按钮布尔值假添加输入清除按钮，单击该按钮将清除输入值
验证布尔值假启用后，输入值将根据传递的“pattern”或输入类型在更改时进行验证。如果您使用自定义验证并且需要进一步控制显示/隐藏错误消息的位置，那么最好禁用验证并使用 error-message 与 error-message-force 属性配合使用。
失焦时验证布尔值假启用后，输入仅在失焦时进行验证。
onValidate函数在输入验证时执行回调，返回布尔值指示输入是否有效。
<f7-input
  type="email"
  validate
  :onValidate="(isValid) => setInputValid(isValid)"
/>
错误消息字符串当输入值无效时显示的自定义错误消息
错误消息强制布尔值假强制错误消息。这在您使用自定义验证并希望在需要时显示/隐藏错误消息时很有用
信息字符串有关输入的自定义附加信息文本
名称字符串输入名称
占位符字符串输入占位符
ID字符串包装元素 ID 属性
输入 ID字符串输入元素 ID 属性
值字符串
数字

输入值。

如果 type="datepicker"，则必须将值传递为日历接受的内容 - 带有日期的数组，例如 :value="[new Date()]"

如果 type="colorpicker"，则必须将值传递为颜色选择器接受的内容 - 带有颜色的对象，例如 :value="{hex: '#ff0000'}"

如果 type="texteditor"，则值应为 HTML 字符串

输入模式字符串输入的原生“inputmode”属性的值
大小字符串
数字		输入的原生“size”属性的值
图案字符串输入的原生“pattern”属性的值
接受字符串
数字		输入的原生“accept”属性的值
自动完成字符串输入的原生“autocomplete”属性的值
自动对焦布尔值假输入的原生“autofocus”属性的值
autosave字符串输入的原生“autosave”属性的值
checked布尔值假将输入标记为选中
disabled布尔值假将输入标记为已禁用
max字符串
数字		输入的原生“max”属性的值
min字符串
数字		输入的原生“min”属性的值
step字符串
数字		输入的原生“step”属性的值
maxlength字符串
数字		输入的原生“maxlength”属性的值
minlength字符串
数字		输入的原生“minlength”属性的值
multiple布尔值假输入的原生“multiple”属性的值
readonly布尔值假将输入标记为只读
required布尔值假将输入标记为必填项
tabindex字符串
数字		输入的原生“tabindex”属性的值
no-store-data布尔值假当与表单存储配合使用时允许忽略输入值存储
ignore-store-data布尔值假与上一个相同
calendar-params对象当type="datepicker"时使用的具有日历参数的对象
color-picker-params对象当type="colorpicker"时使用的具有颜色选择器参数的对象
text-editor-params对象当type="texteditor"时使用的具有文本编辑器参数的对象

输入事件

事件参数描述
<f7-list-input>，<f7-input>事件
focus(event)当用户聚焦到输入时触发。
blur(event)当用户失去输入焦点时触发。
输入(event)input
当输入的值发生更改时立即触发。注意：输入事件在beforeinput、keypress、keyup、keydown事件之后触发。(event)change
如果值发生更改，则在失去焦点时触发。(event)input:clear
点击输入清除按钮时触发(event)textarea:resize
如果可调整大小的文本区域调整了大小，则触发。event.detail将包含具有initialHeight、currentHeight和scrollHeight属性的对象(event)input:empty
输入值为空时触发(event)input:notempty
输入值不为空时触发calendar:change(value)
当type="datepicker"的Calendar值发生更改时触发。作为参数，它接收一个数组，其中包含选定的日期。calendar:changecolorpicker:change
当type="colorpicker"的Color Picker值发生更改时触发。作为参数，它接收一个包含颜色选择器值的对象。calendar:changetexteditor:change

当type="texteditor"的Text Editor值发生更改时触发。作为参数，它接收文本编辑器值（HTML字符串）。

输入插槽

输入 v-model

f7-list-input 和 f7-input Vue 组件支持 v-model on value prop

<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>
改善本文档
在本页