更新记录

1.0.0（2025-02-18） 下载此版本

发布初版

平台兼容性

Input 输入框

组件名: xt-input

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <view>
            <view>基本用法</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal"> </xt-input>
            </view>
        </view>
        <view>
            <view>禁用状态</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal" disabled> </xt-input>
            </view>
        </view>
        <view>
            <view>只读状态</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal" readonly> </xt-input>
            </view>
        </view>
        <view>
            <view>一键清空</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal" clearable> </xt-input>
            </view>
        </view>
        <view>
            <view>圆角输入框</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal" round> </xt-input>
            </view>
        </view>
        <view>
            <view>内容格式化</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal2" :formatter="onFormatter"> </xt-input>
            </view>
        </view>
        <view>
            <view>前后插槽</view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal">
                    <template #prepend>
                        <view>
                            <xt-icon></xt-icon>
                        </view>
                    </template>
                </xt-input>
            </view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal">
                    <template #append>
                        <view>
                            <xt-icon></xt-icon>
                        </view>
                    </template>
                </xt-input>
            </view>
            <view style="margin-top: 10rpx;">
                <xt-input v-model="inputVal">
                    <template #prepend>
                        <view>
                            <xt-icon></xt-icon>
                        </view>
                    </template>
                    <template #append>
                        <view>
                            <xt-icon></xt-icon>
                        </view>
                    </template>
                </xt-input>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                inputVal: 'XT-INPUT',
                inputVal2: 'XT-INPUT',
            }
        },
        methods: {
            onFormatter() {
                return '格式化内容'
            }
        }
    }
</script>
<style lang="scss">
    .xt {
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
    }
</style>

API

各参数具体可选值,请查询uniapp官网

uniapp官网-input

格式化函数

onFormatter(e) {
  // 格式化逻辑
  e = '格式化内容'
  /****/
  // 最后返回即可
                return e
        }

Events