@tanzhenxing/zx-input NPM

zx-input 输入框组件

基于uni-app的增强输入框组件，支持各种表单输入场景，提供了丰富的功能和样式定制选项。

引入方式

// 在页面中导入
import zxInput from '@/components/zx-input/zx-input.vue'

// 注册组件
export default {
  components: {
    zxInput
  }
}

基础用法

基础输入框

<zx-input v-model="inputValue" placeholder="请输入内容"></zx-input>

禁用状态

<zx-input v-model="inputValue" disabled placeholder="禁用状态"></zx-input>

可清空输入框

<zx-input v-model="inputValue" clearable placeholder="可清空"></zx-input>

密码输入框

<zx-input v-model="password" password placeholder="请输入密码"></zx-input>

带图标的输入框

<zx-input v-model="inputValue" prefix-icon="uni-icon-search" placeholder="搜索内容"></zx-input>
<zx-input v-model="inputValue" suffix-icon="uni-icon-calendar" placeholder="选择日期"></zx-input>

不同尺寸

<zx-input v-model="inputValue" size="large" placeholder="大尺寸输入框"></zx-input>
<zx-input v-model="inputValue" placeholder="默认尺寸输入框"></zx-input>
<zx-input v-model="inputValue" size="small" placeholder="小尺寸输入框"></zx-input>

数据验证

<zx-input v-model="email" validate="isEmail" placeholder="请输入邮箱"></zx-input>

属性说明

属性名	类型	默认值	说明
modelValue	String/Number	''	输入框的值，可使用v-model双向绑定
size	String	''	输入框大小，可选值：large/small
name	String	''	表单控件名称
disabled	Boolean	false	是否禁用
type	String	'text'	输入框类型，可选值：text/number/idcard/digit/tel/safe-password/nickname
password	Boolean	false	是否是密码类型
placeholder	String	''	输入框占位文本
placeholderStyle	String	''	指定placeholder的样式
placeholderClass	String	''	指定placeholder的样式类
maxlength	Number	300	最大输入长度
cursorSpacing	Number/String	0	指定光标与键盘的距离
cursorColor	String	''	指定光标颜色
autoFocus	Boolean	false	自动获取焦点
focus	Boolean	false	获取焦点
confirmType	String	'done'	设置键盘右下角按钮的文字，可选值：send/search/next/go/done
confirmHold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起
adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面
holdKeyboard	Boolean	false	focus时，点击页面的时候不收起键盘
validate	String	''	数据验证规则，使用validator库中的方法名
borderSize	String	'1rpx'	边框线条大小
borderColor	String	'#ececec'	边框线条颜色
borderActiveColor	String	'#2979ff'	聚焦时边框颜色
borderErrorColor	String	'#ff0000'	验证错误时边框颜色
borderStyle	String	'solid'	边框样式
borderRadius	String	'10rpx'	边框圆角
clearable	Boolean	false	是否可清空
prefixIcon	String	''	前缀图标类名
suffixIcon	String	''	后缀图标类名

事件说明

事件名	说明	返回值
@update:modelValue	输入值变化时触发	输入框当前值
@input	输入时触发	event = {detail: {value: 值}}
@focus	输入框聚焦时触发	event 对象
@blur	输入框失去焦点时触发	event 对象
@confirm	点击完成按钮时触发	event 对象
@clear	点击清除按钮时触发	-
@click-prefix-icon	点击前缀图标时触发	event 对象
@click-suffix-icon	点击后缀图标时触发	event 对象

代码示例

完整表单示例

<template>
  <view class="form-container">
    <zx-input
      v-model="formData.username"
      placeholder="用户名"
      prefix-icon="uni-icon-person"
      clearable
      :maxlength="20"
      @confirm="submitForm"
    ></zx-input>
    
    <zx-input
      v-model="formData.password"
      placeholder="密码"
      password
      prefix-icon="uni-icon-locked"
      :maxlength="16"
      @confirm="submitForm"
    ></zx-input>
    
    <zx-input
      v-model="formData.email"
      placeholder="邮箱"
      validate="isEmail"
      prefix-icon="uni-icon-email"
      clearable
      @blur="checkEmail"
    ></zx-input>
    
    <button type="primary" @click="submitForm">提交</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({
  username: '',
  password: '',
  email: ''
});

function checkEmail() {
  // 邮箱验证逻辑
}

function submitForm() {
  // 表单提交逻辑
}
</script>