Sard Uniapp

Appearance

在新窗口打开⤴

Input输入框

介绍 ​

接收用户输入的文本信息。

引入 ​

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是否显示清空按钮booleanfalse
show-clear-only-focus是否只在聚焦时显示清空按钮booleanfalse
show-count是否展示字数booleanfalse
inlaid嵌入式状态booleanfalse
borderless是否隐藏边框booleanfalse
readonly只读状态booleanfalse
focused是否显示获焦样式，用于结合自定义键盘使用时显示高亮效果booleanfalse
min-height输入框最小高度string-
placeholder输入框占位符内容string-
placeholder-style输入框占位符样式string-
placeholder-class输入框占位符类名string-
disabled禁用状态booleanfalse
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number140
focus获取焦点boolean-
cursor-spacing指定光标与键盘的距离number30
cursor指定 focus 时的光标位置number-1
confirm-type设置键盘右下角按钮的文字"send" | "search" | "next" | "go" | "done"'done'
confirm-hold点击键盘右下角按钮时是否保持键盘不收起booleanfalse
selection-start光标起始位置number-1
selection-end光标结束位置number-1
adjust-position键盘弹起时，是否自动上推页面booleantrue
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
auto-blur键盘收起时，是否自动失去焦点booleanfalse
ignore-composition-event是否忽略组件内对文本合成系统事件的处理booleantrue
inputmode用户在编辑元素或其内容时可能输入的数据类型的提示'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url''text'
auto-height文本域自动高度booleanfalse
fixed如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏booleantrue
disable-default-padding是否去掉 iOS 下的默认内边距booleanfalse
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 数字键盘是否随机排列booleanfalse
controlled是否为受控组件。为 true 时，value 内容会完全受 setData 控制booleanfalse
always-system是否强制使用系统键盘和 Web-view 创建的 input 元素booleanfalse
validate-event是否触发表单验证booleantrue
show-eye 1.21.2+type 为 password 时，是否显示眼睛图标按钮booleanfalse
enableNative 1.23.5+(支付宝小程序)是否启用原生input元素booleanfalse

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);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao