更新记录

1.0.0（2024-12-04） 下载此版本

• 首次发布
• 支持基础输入功能
• 支持自定义主题颜色（边框、背景、文字、图标、占位符）
• 支持自定义圆角大小
• 支持前后图标配置
• 支持前后插槽
• 支持一键清空
• 支持密码输入
• 支持禁用状态
• 支持 Vue2/Vue3
• 支持多端运行（H5、App、各类小程序）
• 依赖 uni-icons 组件

平台兼容性

wht-input 增强输入框组件

介绍

wht-input 是一个功能强大的输入框组件，支持自定义主题颜色、圆角、图标、插槽等特性，适配多端。

平台支持

• App Vue
• H5
• 微信小程序
• 支付宝小程序
• 钉钉小程序
• QQ小程序
• 字节小程序

安装方式

下载插件后，导入项目即可使用

基本用法

基础示例

<template>
    <view class="content">
        <!-- 基础输入框 -->
        <wht-input v-model="input1" placeholder="默认输入框"></wht-input>
        <!-- 带图标的输入框 -->
        <wht-input v-model="input2" prefix-icon="search" placeholder="搜索框"></wht-input>
        <!-- 自定义主题色 -->
        <wht-input v-model="input3" border-color="#409eff" text-color="#409eff" icon-color="#409eff"
            placeholder="自定义主题色"></wht-input>
        <!-- 带插槽的输入框 -->
        <wht-input v-model="input4" placeholder="带插槽的输入框">
            <template #prefix>￥</template>
            <template #suffix>.00</template>
        </wht-input>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                input1: '',
                input2: '',
                input3: '',
                input4: ''
            }
        }
    }
</script>

API

Props

Events

Slots

注意事项

1. 组件依赖 uni-icons，请确保项目中已安装该组件
2. 在 nvue 页面中可能存在部分样式不生效的情况
3. 部分平台可能不支持某些特定的 type 类型