Tuniao UI Uniapp V3

Appearance

12:13

TnInput-输入框 ​

此组件用于输入文字，支持单行和多行文本输入

一般情况下应该在TnFormItem中配合使用

组件位置 ​

typescript
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
typescript
import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基本使用 ​

  • 通过type设置输入框类型，默认是text
  • 通过placeholder设置输入框为空时的占位符
  • 通过border设置是否显示边框，默认为true
  • 通过size设置输入框的尺寸，可选值为sm、lg
    • 通过height设置文本框的高度，默认单位为 rpx，可以传递带单位的字符串
  • 通过text-align设置文字的对齐方向，默认值为left
vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" />
</template>

设置尺寸为 sm ​

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" size="sm" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" size="sm" />
</template>

文本居中对齐 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput
    v-model="inputValue"
    placeholder="请输入用户名"
    text-align="center"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput
    v-model="inputValue"
    placeholder="请输入用户名"
    text-align="center"
  />
</template>

隐藏边框 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" :border="false" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" :border="false" />
</template>

边框显示为下边框 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" underline />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" underline />
</template>

输入框类型 ​

通过type属性修改输入框类型

  • text 文本输入框
  • number 数字输入框
  • idcard 身份证输入框，仅支持微信、支付宝、百度、QQ 小程序
  • digit 带小数点的数字键盘，仅支持 App 的 nvue 页面、微信、支付宝、百度、头条、QQ 小程序
  • textarea 文本域输入框
  • password 密码输入框
  • select选择框模式

textarea 文本域 ​

设置type属性的值为textarea即可设置为文本域

通过设置height和auto-height参数修改文本域输入框的高度，默认是auto-height为开启状态，文本框会根据内容的高度进行自动设置高度

注意

在type为textarea的状态下，height和auto-height属性是互斥的，设置了height之后auto-height将会失效

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" type="textarea" placeholder="请输入描述" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" type="textarea" placeholder="请输入描述" />
</template>

设置固定高度的文本域 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput
    v-model="inputValue"
    type="textarea"
    placeholder="请输入描述"
    height="150"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput
    v-model="inputValue"
    type="textarea"
    placeholder="请输入描述"
    height="150"
  />
</template>

文本域下键盘显示换行 ​

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput
    v-model="inputValue"
    type="textarea"
    placeholder="请输入描述"
    confirm-type=""
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput
    v-model="inputValue"
    type="textarea"
    placeholder="请输入描述"
    confirm-type=""
  />
</template>

密码输入框 ​

设置type属性的值为password即可设置为密码输入框

在该状态下，可以通过show-password属性来控制是否显示隐藏和显示按钮的选项，默认为true开启

vue
<script lang="ts" setup>
import { ref } from 'vue'

const password = ref('')
</script>

<template>
  <TnInput v-model="password" type="password" placeholder="请输入密码" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const password = ref('')
</script>

<template>
  <TnInput v-model="password" type="password" placeholder="请输入密码" />
</template>

配合 picker 进行使用 ​

设置type属性的值为select即可将TnInput设置选择框

在该模式下可以通过click事件判断是否点击了输入框

vue
<script lang="ts" setup>
import { ref } from 'vue'

const pickerData = ['图鸟UI vue2', '图鸟UI vue3']
const pickerValue = ref('')
const showPicker = ref(false)
const openPicker = () => {
  showPicker.value = true
}
</script>

<template>
  <TnInput
    v-model="pickerValue"
    type="select"
    placeholder="请选择需要使用tuniaoUI版本"
    @click="openPicker"
  />

  <TnPicker
    v-model="pickerValue"
    v-model:open="showPicker"
    :data="pickerData"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const pickerData = ['图鸟UI vue2', '图鸟UI vue3']
const pickerValue = ref('')
const showPicker = ref(false)
const openPicker = () => {
  showPicker.value = true
}
</script>

<template>
  <TnInput
    v-model="pickerValue"
    type="select"
    placeholder="请选择需要使用tuniaoUI版本"
    @click="openPicker"
  />

  <TnPicker
    v-model="pickerValue"
    v-model:open="showPicker"
    :data="pickerData"
  />
</template>

显示清除按钮 ​

设置clearable为true可以在有内容的情况下点击家按钮清空输入的内容

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" clearable />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名" clearable />
</template>

前后插槽 ​

设置slot为prefix或者suffix插槽来设置输入框前后内容

vue
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名">
    <template #prefix> 管理员 </template>
  </TnInput>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const inputValue = ref('')
</script>

<template>
  <TnInput v-model="inputValue" placeholder="请输入用户名">
    <template #prefix> 管理员 </template>
  </TnInput>
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const mobile = ref('')
</script>

<template>
  <TnInput v-model="mobile" placeholder="请输入手机号码">
    <template #suffix>
      <TnButton>获取验证码</TnButton>
    </template>
  </TnInput>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const mobile = ref('')
</script>

<template>
  <TnInput v-model="mobile" placeholder="请输入手机号码">
    <template #suffix>
      <TnButton>获取验证码</TnButton>
    </template>
  </TnInput>
</template>

API ​

Props ​

属性名说明类型默认值可选值
model-value/v-model绑定值String | Number--
type输入框类型Stringtextnumber、idcard 、 digit、textarea 、 password 、select
disabled是否禁止输入Booleanfalsetrue
size输入框尺寸大小String | Number-sm \ lg
height输入框高度，默认单位为 rpx，可以传入带单位的尺寸值String | Number--
text-align文字对齐方式Stringleftright
placeholder输入框占位文本String--
placeholder-style输入框占位文本的样式Object--
border是否显示边框Booleantruefalse
border-color边框颜色，在border为true时有效，支持图鸟内置的边框颜色、hex、rgb、rgbaString--
underline显示为下划线边框Booleanfalsetrue
maxlength最大可输入长度，设置为 -1 的时候不限制最大长度Number-1-
auto-height根据内容自动调整高度，仅在 textarea 模式下生效，如果设置了 height 则优先级最高Booleantruefalse
confirm-type设置键盘右下角按钮的文字，仅在使用系统键盘时生效，当把confirm-type设置为空白时显示换行按钮，详细见https://uniapp.dcloud.net.cn/component/input.html#confirm-typeStringdone、send、search、next、go、return
focus获取焦点Booleanfalsetrue
clearable是否展示清除按钮Booleanfalsetrue
show-password是否显示切换密码显示/隐藏按钮，仅在 type="password" 时生效Booleantruefalse
cursor-spacing指定光标与键盘的距离，单位 pxNumber0-
selection-start光标起始位置，自动聚集时有效，需与selection-end搭配使用Number-1-
selection-end光标结束位置，自动聚集时有效，需与selection-start搭配使用Number-1-
show-confirm-bar是否展示键盘上方带有”完成“按钮那一栏Booleantruefalse
right-icon显示输入框右图标String-图标有效值
trim自动去除两端空格Booleantruefalse
show-word-limit显示字数统计，只有在 textarea 模式下且设置maxlength时生效Booleanfalsetrue
word-limit-color字数统计文字颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
validate-event输入时是否触发表单验证Booleantruefalse
custom-style自定义样式Object--
custom-class自定义类名String--

Events ​

事件名说明类型
input输入框输入内容事件(value: string | number) => void
change输入框输入内容发生修改事件(value: string | number) => void
click输入框点击事件，仅在type为select时有效() => void
focus输入框聚焦事件(e: InputFocusEvent) => void
blur输入框失焦事件(e: InputBlurEvent) => void
clear点击清除按钮事件() => void
confirm点击键盘右下角按钮事件(value: string | number) => void

Slots ​

插槽名说明
prefix输入框前面内容
suffix输入框后面内容

InputFocusEvent ​

参数说明
detail.value输入框内容
detail.height键盘高度

InputBlurEvent ​

参数说明
detail.value输入框内容

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI