Tantalum UI

Appearance

Return to top
On this page

Input 输入框

注：

  • 支持表单，具体可参考 Form。
vue
<template>
  <ta-group title="基础用法">
    <div class="exp-input-box">
      <ta-input type="text" focus placeholder="请输入文本" />
      <ta-input type="text" modelValue="禁用" disabled />
      <ta-input type="text" placeholder="showLimit=true" showLimit showClear />
    </div>
  </ta-group>
  <ta-group title="textarea">
    <div class="exp-input-box">
      <ta-input type="textarea" placeholder="showLimit=true" showLimit maxlength="200" />
    </div>
  </ta-group>
  <ta-group title="Slot prepend/append">
    <div class="exp-input-box">
      <ta-input type="text" focus placeholder="请输入网址">
        <template #prepend>https://</template>
      </ta-input>
      <ta-input type="text" focus placeholder="请输入网址">
        <template #append>.com</template>
      </ta-input>
    </div>
  </ta-group>
  <ta-group title="与 Cell 组合">
    <ta-cell label="文本">
      <ta-input type="text" placeholder="请输入文本" />
    </ta-cell>
  </ta-group>
  <ta-group title="设置 type 类型">
    <ta-cell label="文本 text">
      <ta-input type="text" placeholder="请输入文本" />
    </ta-cell>
    <ta-cell label="电话 tel">
      <ta-input type="tel" placeholder="请输入电话" />
    </ta-cell>
    <ta-cell label="整数 digit">
      <ta-input type="digit" placeholder="请输入整数" />
    </ta-cell>
    <ta-cell label="数字 number">
      <ta-input type="number" placeholder="请输入数字" />
    </ta-cell>
    <ta-cell label="搜索 search">
      <ta-input type="search" placeholder="请输入要搜索的内容" />
    </ta-cell>
    <ta-cell label="密码 password">
      <ta-input type="password" placeholder="请输入密码" />
    </ta-cell>
    <ta-cell label="文本 textarea">
      <ta-input type="textarea" placeholder="请输入多行文本" />
    </ta-cell>
  </ta-group>
  <ta-group title="其他">
    <ta-cell label="只读 readonly">
      <ta-input type="text" modelValue="只读文本" readonly />
    </ta-cell>
    <ta-cell label="禁用 disabled">
      <ta-input type="text" modelValue="禁用文本" disabled />
    </ta-cell>
    <ta-cell label="可清除 showClear">
      <ta-input type="text" placeholder="请输入文本" modelValue="文本内容" showClear />
    </ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="input">
      <ta-input type="text" placeholder="请输入文本" showClear v-model="value" @input="onInput" />
    </ta-cell>
    <ta-cell label="change">
      <ta-input
        type="text"
        placeholder="请输入文本"
        showClear
        v-model="changeValue"
        @change="onInput"
      />
    </ta-cell>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { showToast } from '@/index'

export default defineComponent({
  name: 'ExpInput',
  setup() {
    const value = ref('')
    const changeValue = ref('')

    function onInput(value: string) {
      showToast(`当前值为：${value}`)
    }

    return {
      value,
      changeValue,
      onInput
    }
  }
})
</script>

Import

js
import { TaInput } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
v-modelstring | number''否
namestring否标识
typestring'text'否类型
placeholderstring否输入框为空时占位符
disabledbooleanfalse否是否禁用
readonlybooleanfalse否是否只读
maxlengthstring | number140否最大长度
focusbooleanfalse否是否获取焦点
show-clearbooleanfalse否是否展示清除图标

type 的合法值

值说明
text文本
digit整数
number数字
password密码
search搜索
password密码

Events

事件描述回调函数参数
input输入值改变时触发value: string
change输入值改变且失焦后触发，含点击清空按钮value: string
focus获取焦点时触发e: FocusEvent
blur移出焦点时触发e: FocusEvent

Slots

前置元素（#prepend）

vue
<ta-input>
  <template #prepend>https://</template>
</ta-input>

注：也可以传入 Icon，比如常见的搜索。

后置元素（#append）

vue
<ta-input>
  <template #append>.com</template>
</ta-input>