介绍
接收用户输入的文本信息。
引入
js
import Input from 'sard-uniapp/components/input/input.vue'代码演示
基础使用
可以通过 v-model 绑定输入框的值,通过 placeholder 设置占位提示文字。
vue
<template>
<sar-input
v-model="value"
placeholder="请输入"
@input="onInput"
@change="onChange"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const onInput = (value: any) => {
console.log('input', value)
}
const onChange = (value: any) => {
console.log('change', value)
}
</script>vue
<template>
<sar-input
v-model="value"
placeholder="请输入"
@input="onInput"
@change="onChange"
/>
</template>
<script setup lang="js">
import { ref } from "vue";
const value = ref("");
const onInput = (value2) => {
console.log("input", value2);
};
const onChange = (value2) => {
console.log("change", value2);
};
</script>自定义样式
可以对其尺寸、颜色、背景色、边框等样式进行设置。
vue
<template>
<view style="padding: 10rpx 20rpx; background: var(--sar-gray-400)">
<sar-input
placeholder="搜索"
placeholder-style="color: rgba(0,0,0,.3)"
borderless
root-style="
height: 80rpx;
border-radius: 9999px;
background-color: #fff;
text-align: center;
color: #000;
"
/>
</view>
</template>类型
据 type 属性定义不同类型的输入框,默认值为 text。
vue
<template>
<sar-input placeholder="text" type="text" />
<sar-input placeholder="number" type="number" />
<sar-input placeholder="idcard" type="idcard" />
<sar-input placeholder="digit" type="digit" />
<sar-input placeholder="tel" type="tel" />
<sar-input placeholder="password" type="password" />
<sar-input placeholder="password show-eye" type="password" show-eye />
<sar-input
placeholder="password show-eye clearable"
type="password"
show-eye
clearable
/>
<sar-input placeholder="password" :type="isPlainText ? 'text' : 'password'">
<template #append>
<view @click="isPlainText = !isPlainText">
{{ isPlainText ? '显示密文' : '显示明文' }}
</view>
</template>
</sar-input>
<sar-input
placeholder="password clearable"
:type="isPlainText ? 'text' : 'password'"
clearable
>
<template #append>
<view @click="isPlainText = !isPlainText">
{{ isPlainText ? '显示密文' : '显示明文' }}
</view>
</template>
</sar-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isPlainText = ref(false)
</script>vue
<template>
<sar-input placeholder="text" type="text" />
<sar-input placeholder="number" type="number" />
<sar-input placeholder="idcard" type="idcard" />
<sar-input placeholder="digit" type="digit" />
<sar-input placeholder="tel" type="tel" />
<sar-input placeholder="password" type="password" />
<sar-input placeholder="password show-eye" type="password" show-eye />
<sar-input
placeholder="password show-eye clearable"
type="password"
show-eye
clearable
/>
<sar-input placeholder="password" :type="isPlainText ? 'text' : 'password'">
<template #append>
<view @click="isPlainText = !isPlainText">
{{ isPlainText ? '显示密文' : '显示明文' }}
</view>
</template>
</sar-input>
<sar-input
placeholder="password clearable"
:type="isPlainText ? 'text' : 'password'"
clearable
>
<template #append>
<view @click="isPlainText = !isPlainText">
{{ isPlainText ? '显示密文' : '显示明文' }}
</view>
</template>
</sar-input>
</template>
<script setup lang="js">
import { ref } from "vue";
const isPlainText = ref(false);
</script>可清除的
设置了 clearable 属性后,在输入框有值时会显示清除按钮。
vue
<template>
<sar-input placeholder="请输入" clearable />
</template>聚焦时显示清除按钮
只在输入框获取焦点时显示清除按钮。
vue
<template>
<sar-input
value="可清除的"
placeholder="可清除的"
clearable
showClearOnlyFocus
/>
</template>只读和禁用
只读或禁用时无法输入。
vue
<template>
<sar-input placeholder="禁用的" disabled />
<sar-input placeholder="只读的" readonly />
</template>插槽
可以通过前置或后置插槽添加额外的内容。
vue
<template>
<sar-input placeholder="请输入">
<template #prepend>
<sar-icon name="search" />
</template>
</sar-input>
<sar-input placeholder="请输入" clearable>
<template #append>
<sar-button size="small">发送验证码</sar-button>
</template>
</sar-input>
</template>去除边框
清除边框后页面看起来会很清爽。
vue
<template>
<sar-input placeholder="去除边框" borderless />
</template>嵌入的
inlaid 用于清除边框和内边距,以便可以嵌入到其他组件内。
vue
<template>
<sar-list>
<sar-list-item>
<sar-input inlaid clearable placeholder="请输入用户名" />
</sar-list-item>
<sar-list-item>
<sar-input inlaid clearable type="password" placeholder="请输入密码" />
</sar-list-item>
</sar-list>
</template>多行文本
设置 type="textarea" 可以换行输入。
vue
<template>
<sar-input placeholder="请输入" type="textarea" />
</template>自动高度
设置自动高度可以让文本域随输入内容变多而增高。 另外可以设置 minHeight 设置文本域的最小高度。
vue
<template>
<sar-input type="textarea" auto-height placeholder="自动高度" />
<sar-input
type="textarea"
autoHeight
placeholder="最小高度"
min-height="96rpx"
/>
</template>字数提示
设置 showCount 属性可以显示当前输入的字数和总字数; 设置 maxlength 可以限制输入的最大字数。
vue
<template>
<sar-input
type="textarea"
showCount
:maxlength="100"
clearable
placeholder="请输入"
/>
</template>API
InputProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| model-value (v-model) | 输入框值 | string | number | - |
| clearable | 是否显示清空按钮 | boolean | false |
| show-clear-only-focus | 是否只在聚焦时显示清空按钮 | boolean | false |
| show-count | 是否展示字数 | boolean | false |
| inlaid | 嵌入式状态 | boolean | false |
| borderless | 是否隐藏边框 | boolean | false |
| readonly | 只读状态 | boolean | false |
| focused | 是否显示获焦样式,用于结合自定义键盘使用时显示高亮效果 | boolean | false |
| min-height | 输入框最小高度 | string | - |
| placeholder | 输入框占位符内容 | string | - |
| placeholder-style | 输入框占位符样式 | string | - |
| placeholder-class | 输入框占位符类名 | string | - |
| disabled | 禁用状态 | boolean | false |
| maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | number | 140 |
| focus | 获取焦点 | boolean | - |
| cursor-spacing | 指定光标与键盘的距离 | number | 30 |
| cursor | 指定 focus 时的光标位置 | number | -1 |
| confirm-type | 设置键盘右下角按钮的文字 | "send" | "search" | "next" | "go" | "done" | 'done' |
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起 | boolean | false |
| selection-start | 光标起始位置 | number | -1 |
| selection-end | 光标结束位置 | number | -1 |
| adjust-position | 键盘弹起时,是否自动上推页面 | boolean | true |
| hold-keyboard | focus 时,点击页面的时候不收起键盘 | boolean | false |
| auto-blur | 键盘收起时,是否自动失去焦点 | boolean | false |
| ignore-composition-event | 是否忽略组件内对文本合成系统事件的处理 | boolean | true |
| inputmode | 用户在编辑元素或其内容时可能输入的数据类型的提示 | 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | 'text' |
| auto-height | 文本域自动高度 | boolean | false |
| fixed | 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true | boolean | false |
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏 | boolean | true |
| disable-default-padding | 是否去掉 iOS 下的默认内边距 | boolean | false |
| type | 输入框类型 | 'text' | 'password' | 'textarea' | 'number' |'idcard' | 'digit' | 'tel' | 'safe-password' | 'nickname' | 'text' |
| always-embed | 强制 input 处于同层状态 | boolean | - |
| safe-password-cert-path | 安全键盘加密公钥的路径,只支持包内路径 | string | - |
| safe-password-length | 安全键盘输入密码长度 | number | - |
| safe-password-time-stamp | 安全键盘加密时间戳 | number | - |
| safe-password-nonce | 安全键盘加密盐值 | string | - |
| safe-password-salt | 安全键盘计算 hash 盐值,若指定 custom-hash 则无效 | string | - |
| safe-password-custom-hash | 安全键盘计算 hash 的算法表达式 | string | - |
| random-number | 当 type 为 number, digit, idcard 数字键盘是否随机排列 | boolean | false |
| controlled | 是否为受控组件。为 true 时,value 内容会完全受 setData 控制 | boolean | false |
| always-system | 是否强制使用系统键盘和 Web-view 创建的 input 元素 | boolean | false |
| validate-event | 是否触发表单验证 | boolean | true |
| show-eye 1.21.2+ | type 为 password 时,是否显示眼睛图标按钮 | boolean | false |
| enableNative 1.23.5+ | (支付宝小程序)是否启用原生input元素 | boolean | false |
InputSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| prepend | 自定义输入框前面内容 | - |
| append | 自定义输入框后面内容 | - |
InputEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:model-value | 输入框值改变时触发 | (value: string) => void |
| input 1.9.2+ | 输入框值改变时触发 | (value: string) => void |
| change 1.9.2+ | 键盘非聚焦状态且内容改变时触发 | (value: string) => void |
| clear | 点击清除按钮时触发 | () => void |
| focus | 聚焦时触发 | (event: any) => void |
| blur | 失焦时触发 | (event: any) => void |
| linechange | 输入框行数变化时触发 | (event: any) => void |
| confirm | 点击完成时触发 | (event: any) => void |
| keyboardheightchange | 键盘高度发生变化的时候触发 | (event: any) => void |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-input-padding-y-sm: 6rpx;
--sar-input-control-font-size-sm: var(--sar-text-sm);
--sar-input-control-font-size-lg: var(--sar-text-lg);
--sar-input-padding-y: 10rpx;
--sar-input-padding-borderless-y: 12rpx;
--sar-input-padding-x: 24rpx;
--sar-input-border-radius: var(--sar-rounded);
--sar-input-border-color: var(--sar-border-color);
--sar-input-transition-duration: var(--sar-duration);
--sar-input-focused-border-color: var(--sar-primary);
--sar-input-control-font-size: var(--sar-text-base);
--sar-input-control-input-height: 48rpx;
--sar-input-control-line-height: var(--sar-leading-normal);
--sar-input-control-textarea-height: 168rpx;
--sar-input-placeholder-color: var(--sar-fourth-color);
--sar-input-prepend-margin-right: 16rpx;
--sar-input-append-margin-right: var(--sar-input-padding-x);
--sar-input-clear-margin-right: 0;
--sar-input-clear-padding-x: 16rpx;
--sar-input-clear-font-size: 32rpx;
--sar-input-clear-color: var(--sar-fourth-color);
--sar-input-eye-margin-left: 0;
--sar-input-eye-margin-right: 0;
--sar-input-eye-padding-x: 16rpx;
--sar-input-eye-font-size: 36rpx;
--sar-input-eye-color: var(--sar-fourth-color);
--sar-input-count-font-size: var(--sar-text-sm);
--sar-input-count-line-height: var(--sar-leading-tight);
--sar-input-count-color: var(--sar-tertiary-color);
}