更新记录

v1.0（2020-03-18）

1.可定义左侧提示文字 2.可定义中间区域 3.可定义右侧内容 4.可修改组件圆角值 5.可设置字体大小 6.可设置颜色 7.可查看密码 8.可使用正则表达式进行数据校验

平台兼容性

使用方式

在 script 中引用组件 代码块： orgInputText。

import orgInputText from '../../components/org-input-text/org-input-text';

export default {
    components: {orgInputText}
}

在 template 中使用组件 ,（其中部分示例 用到了uniIcons 需要额外在script中引入组件）

<template>
    <view class="content">
        <view>点击右侧的对勾和错勾会有相关的验证信息</view>
        <view class="test">
            <view class="text">
                1.普通使用(绑定默认输入值)
            </view>
            <view>
                <org-input-text left-text="用户姓名" :value="value" @input="value=$event"></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                2.普通使用(不显示清除按钮)
            </view>
            <view>
                <org-input-text left-text="用户姓名" :value="value" :show-clear="false"></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                3.普通使用(修改默认占位信息)
            </view>
            <view>
                <org-input-text left-text="用户姓名" placeholder="修改后的占位信息" ></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                4.普通使用(使用密码框,设置组件圆角)
            </view>
            <view>
                <org-input-text left-text="密 码" border-radius="80rpx" :is-password="true" placeholder="请输入密码"  ></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                5.普通使用(设置左侧文本背景颜色,设置清除按钮颜色)
            </view>
            <view>
                <org-input-text labe-bg="#ef00ef" btn-color="#ef00ef"  left-text="密码" :is-password="true" placeholder="请输入密码"  ></org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                6.高级使用(自定义左侧文本为图片) 需要使用uniIcons
            </view>
            <view>
                <org-input-text left-text="姓名" :is-password="true" >
                    <!-- 使用插槽，自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>
                </org-input-text>
            </view>
        </view>
        <view class="test">
            <view class="text">
                7.高级使用(自定义左侧文本为图片，中间内容任意格式) 需要使用uniIcons
            </view>
            <view>
                <org-input-text left-text="姓名" :is-password="true" >
                    <!-- 使用插槽，自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>

                    <!-- 使用插槽，自定义中间显示图标 -->
                    <view slot="content" style="padding: 0rpx 10rpx 0rpx 20rpx;">
                        中间自定义信息
                    </view>
                </org-input-text>
            </view>
        </view>

        <view class="test">
            <view class="text">
                8.高级使用(自定义左侧文本为图片，中间内容任意格式，右侧插入内容) 需要使用uniIcons
            </view>
            <view>
                <org-input-text left-text="姓名" :is-password="true" >
                    <!-- 使用插槽，自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>

                    <!-- 使用插槽，自定义中间显示图标 -->
                    <view slot="content" style="padding: 0rpx 10rpx 0rpx 20rpx;">
                        中间自定义信息
                    </view>

                    <!-- 使用插槽，自定义中间显示图标 -->
                    <view slot="right" style="padding:20rpx 10rpx 0rpx 20rpx;">
                        右
                    </view>
                </org-input-text>
            </view>
        </view>

        <view class="test">
            <view class="text">
                9.高级使用(添加校验规则)
            </view>
            <view>
                <org-input-text left-text="密码" :is-password="true" 
                :check-info="checkInfo"
                >
                    <!-- 使用插槽，自定义左侧文本 -->
                    <view slot="left" style="padding: 20rpx 10rpx 0rpx 20rpx;">
                        <uni-icons type="person" size="30" color="#6666"></uni-icons>
                    </view>
                </org-input-text>
            </view>
        </view>
    </view>
</template>

属性说明 （源码中部分属性说明不够清楚，请以下面说明为准）

orgInputText 属性说明：

插槽

事件说明：

效果图