Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

输入框 TmInput

可以全局配置圆角风格.

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">输入框 TmInput</tm-text>
            <view>
                <tm-text>可以全局配置圆角风格,可扩展性高,样式精美完全对标tmui4.0</tm-text>
            </view>
        </tm-sheet>
        <tm-sheet>
            <tm-input v-model="val" placeholder="请输入值.."></tm-input>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">文本域</tm-text>
            <tm-input v-model="val" :maxlength="150" placeholder="请输入" type="textarea" show-char-count></tm-input>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">聚焦样式</tm-text>
            <tm-input class="mb-24" v-model="val" focusHighlight
            focusHighlightStyle="border:2px dashed rgb(255, 0, 0);"
             placeholder="我有自动聚焦边框点我"></tm-input>
            <tm-input v-model="val" focusHighlight
                focusHighlightStyle="border:2px dashed rgb(5, 121, 255);box-shadow:0 0 10px rgba(5, 121, 255,0.2) inset;"
                placeholder="自定聚焦点我"></tm-input>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">前缀图标显示清除图标</tm-text>
            <tm-input v-model="val" placeholder="请输入" left-icon="shield-check-fill" show-clear></tm-input>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">显示标签及输入类型</tm-text>
            <tm-input class="mb-16" type="digit" left-text="价格: " placeholder="请输入价格" left-icon="money-cny-circle-line"
                right-text="万元"></tm-input>
            <tm-input type="number" left-text="数量: " placeholder="请输入数量整数" left-icon="shopping-bag-4-line"
                right-text="万元"></tm-input>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">输入框样式</tm-text>
            <tm-input left-icon="user-shared-fill" class="mb-16" color="transparent"
                input-style="border:2px solid rgb(233 233 233);" placeholder="请输入用户名"></tm-input>
            <tm-input class="mb-24" left-icon="lock-password-fill" color="transparent" password
                input-style="border:2px solid rgb(233 233 233);" placeholder="请输入密码"></tm-input>
            <tm-button block icon="check-double-line">提交</tm-button>
        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">插槽自定义</tm-text>
            <tm-input round="88" class="mb-16" :maxlength="4" placeholder="请输入价格" left-icon="money-cny-circle-line">
                <template v-slot:leftIcon>
                    <tm-text class="pl-24" color="primary">验证码</tm-text>
                </template>
                <template v-slot:rightIcon>
                    <tm-button class="mr-6" height="76" width="100" round="88" color="primary" size="s">获取</tm-button>
                </template>
            </tm-input>
        </tm-sheet>

        <view style="height: 100rpx;"></view>
    </view>

</template>
<script setup lang="ts">
import { ref } from "vue";

const val = ref('');
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
modelValuestring|number""输入框的值
inputStylestring""输入框自定义的style样式
inputClassstring""输入框自定义的class样式
typestring-输入类型,可选值:text,number,idcard,digit,tel,safe-password,nickname,textarea:文本域
passwordbooleanfalse是否是密码框
showEyebooleanfalse显示密码小眼睛
placeholderstring"请输入或选择"输入框的占位文字
placeholderStylestring"color:#b1b1b1;"输入框的占位文字样式
placeholderClassstring""输入框的占位样式
alignstring"left"输入框的对齐方式,可选值:left,right,center
colorstring""输入框背景
darkBgColorstring"transparent"输入框暗黑背景,空值取全局的配置提供会覆盖全局的配色。默认是透明
fontSizestring"32"输入框字体大小
widthstring"auto"-
heightstring"auto"-
minHeightstring"88"-
inputPaddingstring"24"输入框内的左右间隙
roundstring|number|Array<string | number>""输入框圆角,默认空值取全局的配置
showClearbooleanfalse是否显示清除按钮
clearColorstring"#b1b1b1"清除按钮颜色
showCharCountbooleanfalse是否显示字符字统计
fontColorstring"#333333"字体颜色
darkFontColorstring""暗黑模式字体颜色,如果不填写自动反转
focusFontColorstring""激活时的字体颜色空值取全局主题色,并且darkFontColor会失效.如果填写none则不生效
leftIconstring""左图标的名称
iconColorstring""左图标的颜色默认空值取全局的主题色。
rightIconstring""右图标的名称
rightTextstring""右文字
leftTextstring""右文字
disabledbooleanfalse是否禁用
focusbooleanfalse是否聚焦
confirmTypestring"done"键盘右下解按钮文字,可以取值:send,search,next,done只对input有效,对textarea无效
cursorSpacingnumber0光标与键盘的距离,单位px
maxlengthnumber-1输入框的最大长度
confirmHoldbooleanfalse-
cursornumber0-
cursorColorstring""光标颜色,默认空值取全局配置
selectionStartnumber-1光标起始位置
selectionEndnumber-1光标结束位置
adjustPositionbooleantrue是否自动聚焦
autoBlurbooleanfalse是否自动失焦
ignoreCompositionEventbooleantrue-
alwaysEmbedbooleantrue强制input处于同层状态
holdKeyboardbooleanfalsefocus时,点击页面的时候不收起键盘
safePasswordCertPathstring""-
safePasswordLengthnumberNaN-
safePasswordTimeStampnumberNaN-
safePasswordNoncestring''-
safePasswordSaltstring''-
safePasswordCustomHashstring''-
randomNumberbooleanfalse-
controlledbooleanfalse-
alwaysSystembooleanfalse-
inputmodestring"text"input输入模式
autoHeightbooleanfalse-
fixedbooleanfalse-
showConfirmBarbooleanfalse-
focusHighlightboolean|stringtrue是否高亮聚焦当前输入框会使用全局的主题色为边框色。
focusHighlightStylestring''高亮聚焦当前输入框的样式默认为自动全局2pxsolid主题色,如果填写了以你的为准。

🌹 事件

事件名参数返回数据描述
linechange名称:evt,{height:0,heightRpx:0,lineCount:0},-输入框行数变化时触发(文本哉才有)
keyboardheightchange名称:height,键盘高度,-键盘高度变化时触发
confirm名称:value,输入的值,-点击完成按钮时触发
blur--失去焦点时触发
focus--获取焦点时触发
clear--清除事件
input名称:value,输入的值,-输入时候触发
update:modelValue名称:value,输入的值,-等同v-model

🌽 slot插槽

插槽名数据描述
left-左侧插槽
leftIcon-输入框左侧图标插槽
maxlength-输入框右侧显示字数
rightIcon-输入框内右侧图标
right-输入框右侧

🥗 ref方法

方法名参数返回值描述