🔥 遇见我们的新项目 t0ggles - 您终极的项目管理工具！ 🔥

列表输入 Vue 组件

表单元素允许您创建灵活而美观的表单布局。表单元素只是众所周知的列表视图（列表 和 列表项 Vue 组件），但具有几个额外的组件。

列表输入组件

以下组件包含在内

  • ListInput - 列表项输入元素

ListInput 属性

名称类型默认值描述
accept字符串 | 数字

输入的原生“accept”属性的值

autocapitalize字符串

输入的原生“autocapitalize”属性的值

autocomplete字符串

输入的原生“autoComplete”属性的值

autocorrect字符串

输入的原生“autocorrect”属性的值

autofocus布尔值

输入的原生“autofocus”属性的值

autosave字符串

输入的原生“autosave”属性的值

clearButton布尔值false

添加输入清除按钮

colors对象

包含 Tailwind CSS 颜色类别的对象

colors.bgIos字符串''
colors.bgMaterial字符串'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.errorBorder字符串'border-red-500'
colors.errorText字符串'text-red-500'
colors.labelTextFocusIos字符串''
colors.labelTextFocusMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
colors.labelTextIos字符串''
colors.labelTextMaterial字符串'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineBorderFocusIos字符串'border-primary'
colors.outlineBorderFocusMaterial字符串'border-md-light-primary dark:border-md-dark-primary'
colors.outlineBorderIos字符串'border-black border-opacity-30 dark:border-white dark:border-opacity-30'
colors.outlineBorderMaterial字符串'border-md-light-on-surface dark:border-md-dark-on-surface'
colors.outlineLabelBgIos字符串'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.outlineLabelBgMaterial字符串'bg-md-light-surface dark:bg-md-dark-surface'
component字符串'li'

组件的 HTML 元素

disabled布尔值

将输入标记为禁用

dropdown布尔值false

渲染额外的下拉图标（适用于select 输入）

error字符串

输入“错误”的内容

floatingLabel布尔值false

创建浮动标签

info字符串

输入“信息”的内容

inputClass字符串

额外的输入样式

inputId字符串

输入的 id 属性

inputmode字符串

输入的原生“inputmode”属性的值

inputStyleCSSProperties

额外的输入类

label字符串

标签内容

max字符串 | 数字

输入的原生“max”属性的值

maxlength字符串 | 数字

输入的原生“maxlength”属性的值

min字符串 | 数字

输入的原生“min”属性的值

minlength字符串 | 数字

输入的原生“minlength”属性的值

multiple布尔值

输入的原生“multiple”属性的值

name字符串

输入名称

outline布尔值未定义

渲染带边框的轮廓样式输入，覆盖outlineIos 和 outlineMaterial

outlineIos布尔值false

在 iOS 主题中渲染带边框的轮廓样式输入

outlineMaterial布尔值false

在 Material 主题中渲染带边框的轮廓样式输入

pattern字符串

输入的原生“pattern”属性的值

placeholder字符串 | 数字

输入占位符

readonly布尔值

将输入标记为只读

required布尔值

将输入标记为必填

size字符串 | 数字

输入的原生“size”属性的值

spellcheck字符串

输入的原生“spellcheck”属性的值

step字符串 | 数字

输入的原生“step”属性的值

tabindex字符串 | 数字

输入的原生“tabindex”属性的值

type字符串'text'

输入类型

value任何

输入值

ListInput 事件

名称类型描述
blurfunction(e)

blur 事件处理程序

changefunction(e)

change 事件处理程序

clearfunction(e)

clear 事件处理程序

focusfunction(e)

focus 事件处理程序

inputfunction(e)

input 事件处理程序

ListInput 插槽

名称描述
error

输入“错误”的内容

info

输入“信息”的内容

input

自定义输入元素

label

标签内容

media

列表项“媒体”区域的内容（例如图标）

示例

FormInputs.vue
<template>
  <k-page>
    <k-navbar title="Form Inputs" />


    <k-block-title>Default</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


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


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


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


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


      <k-list-input
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


      <k-list-input
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


    <k-block-title>Outline</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input outline label="Name" type="text" placeholder="Your name">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


      <k-list-input
        outline
        label="Password"
        type="password"
        placeholder="Your password"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


      <k-list-input outline label="URL" type="url" placeholder="URL">
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


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


      <k-list-input
        outline
        label="Birthday"
        type="date"
        default-value="2014-04-30"
        placeholder="Please choose..."
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


      <k-list-input
        outline
        label="Textarea"
        type="textarea"
        placeholder="Bio"
        input-class="!h-20 resize-none"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


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


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


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


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


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


    <k-block-title>Outline + Floating Labels</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        outline
        label="Name"
        floating-label
        type="text"
        placeholder="Your name"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


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


      <k-list-input
        outline
        label="URL"
        floating-label
        type="url"
        placeholder="URL"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>


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


    <k-block-title>Validation + Additional Info</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="Name"
        type="text"
        placeholder="Your name"
        info="Basic string checking"
        :value="name.value"
        :error="
          name.changed && !name.value.trim() ? 'Please specify your name' : ''
        "
        @input="onNameChange"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


    <k-block-title>Clear Button</k-block-title>
    <k-list inset-ios strong-ios>
      <k-list-input
        label="TV Show"
        type="text"
        placeholder="Your favorite TV show"
        info="Type something to see clear button"
        :value="demoValue"
        :clear-button="demoValue.length > 0"
        @input="onDemoValueChange"
        @clear="onDemoValueClear"
      >
        <template #media>
          <demo-icon />
        </template>
      </k-list-input>
    </k-list>


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


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


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


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


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


      <k-list-input
        label="Password"
        type="password"
        placeholder="Your password"
      />


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


      <k-list-input label="URL" type="url" placeholder="URL" />
    </k-list>


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


      <k-list-input type="password" placeholder="Your password" />


      <k-list-input type="email" placeholder="Your e-mail" />


      <k-list-input type="url" placeholder="URL" />
    </k-list>


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


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


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


      <k-list-input type="url" placeholder="URL" info="Your website URL" />
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlockTitle,
    kList,
    kListInput,
  } from 'konsta/vue';
  import DemoIcon from '../components/DemoIcon.vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlockTitle,
      kList,
      kListInput,
      DemoIcon,
    },
    setup() {
      const name = ref({ value: '', changed: false });
      const demoValue = ref('');


      const onNameChange = (e) => {
        name.value = { value: e.target.value, changed: true };
      };
      const onDemoValueChange = (e) => {
        demoValue.value = e.target.value;
      };
      const onDemoValueClear = () => {
        demoValue.value = '';
      };


      return {
        name,
        demoValue,
        onNameChange,
        onDemoValueChange,
        onDemoValueClear,
      };
    },
  };
</script>
代码许可证 MIT.
2022 © Konsta UI by nolimits4web.