​CC-EasyCommonInput： 基于uni-app原生input组件封装的增强实用输入框组件

CC-EasyCommonInput：基于uni-app原生input组件封装的增强实用输入框组件

摘要：
在前端开发中，输入框（Input）是一个常见的UI组件，用于获取用户输入的数据。然而，为了满足不同的业务需求和用户体验，开发人员需要频繁地定制和修改输入框的外观和功能。CC-EasyCommonInput是一个基于uni-app原生Input组件封装的增强通用输入框，它提供了丰富的定制选项和验证规则，使得前端开发人员可以快速构建出满足业务需求的高质量输入框组件。本文将详细介绍CC-EasyCommonInput的使用方法和特性，以及它在前端开发中的优势和应用场景。

一、引言
在移动应用和网页开发中，输入框是一个必不可少的组件，用于获取用户输入的数据。然而，传统的输入框往往功能较为单一，无法满足日益复杂的业务需求和用户体验要求。为了解决这个问题，我们开发了CC-EasyCommonInput，一个基于uni-app原生Input组件封装的通用增强输入框。

二、CC-EasyCommonInput概述
CC-EasyCommonInput是基于uni-app框架的自定义组件，它提供了丰富的定制选项和验证规则，使得开发人员可以快速构建出满足业务需求的高质量输入框组件。与传统的输入框相比，CC-EasyCommonInput具有以下优势：

1. 丰富的定制选项：支持设置输入框类型（如文本、数字、密码等）、是否显示密码、左边标题、右边标题等属性，以满足不同业务需求。

2. 内置验证规则：支持常见的验证规则，如必填项、长度限制、数字限制等，确保用户输入的数据符合预期格式。

3. 灵活的扩展性：提供事件回调机制，便于开发人员根据具体业务逻辑处理用户输入的数据。

4. 良好的用户体验：支持自定义占位符文本、自动聚焦、自动补全等特性，提升用户体验。

5. 跨平台兼容性：基于uni-app框架，CC-EasyCommonInput可以在多个平台上运行，如Android、iOS、微信小程序等。

三、使用方法
使用CC-EasyCommonInput非常简单，只需按照以下步骤进行操作：

1. 在页面中引入CC-EasyCommonInput组件：

2. 根据具体业务需求和设计要求，你可以定制更多的属性来丰富你的输入框组件。例如，你可以设置“type”属性来限制用户可以输入的类型，“leftTitle”和“rigTitle”属性来定义输入框的标题等。具体使用方法可以参考CC-EasyCommonInput的官方文档或示例代码。

cc-easyCommonInput

使用方法

复制代码<!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
<cc-easyCommonInput type="text" :password="false" leftTitle="姓名" name="name" value=""
                placeholder="请输入姓名"></cc-easyCommonInput>

<!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
<cc-easyCommonInput type="digit" leftTitle="身高" rigTitle="cm" name="height" value=""
                placeholder="请输入身高"></cc-easyCommonInput>

<!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
<cc-easyCommonInput type="number" leftTitle="手机号" name="phone" value=""
                placeholder="请输入手机号"></cc-easyCommonInput>

<!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
<cc-easyCommonInput :password="true" leftTitle="密码" name="pwd" value=""
                placeholder="请输入密码"></cc-easyCommonInput>

HTML代码实现部分

复制代码<template>
    <view class="content">

        <form @submit="formSubmit" @reset="formReset">

            <!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
            <cc-easyCommonInput type="text" :password="false" leftTitle="姓名" name="name" value=""
                placeholder="请输入姓名"></cc-easyCommonInput>

            <cc-easyCommonInput type="digit" leftTitle="身高" rigTitle="cm" name="height" value=""
                placeholder="请输入身高"></cc-easyCommonInput>

            <!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
            <cc-easyCommonInput type="number" leftTitle="手机号" name="phone" value=""
                placeholder="请输入手机号"></cc-easyCommonInput>

            <!-- type:输入框input类型 password:是否密码 leftTitle：左边标题 rigTitle：右边标题 name：输入框名字  value：输入框值  placeholder:占位符 -->
            <cc-easyCommonInput :password="true" leftTitle="密码" name="pwd" value=""
                placeholder="请输入密码"></cc-easyCommonInput>

            <cc-easyCommonInput leftTitle="住址" name="address" value="" placeholder="请输入地址"></cc-easyCommonInput>

            <cc-easyCommonInput type="digit" leftTitle="月租金" name="rentMonth" rigTitle="元/月" value=""
                placeholder="请输入月租金"></cc-easyCommonInput>

            <view class="uni-btn-v">
                <button class="botBtn" type="primary" form-type="submit">下一步</button>
                <view class="tipText"> 注意事项: 请确保您填写的信息真实无误 </view>

            </view>
        </form>

    </view>
</template>

<script>
    export default {

        data() {
            return {

            }
        },
        methods: {
            formSubmit: function(e) {
                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e));
                var formdata = e.detail.value;
                uni.showModal({
                    title: '温馨提示',
                    content: 'formsubmit事件携带数据为：' + JSON.stringify(e.detail.value)
                })

            },
            towardPickerChange: function(e) {
                this.towardIndex = e.target.value;
                console.log(e.target.value);
            },
            floorPickerChange: function(e) {
                this.floorIndex = e.target.value;
                console.log(e.target.value);
            },
            liftPickerChange: function(e) {
                this.liftIndex = e.target.value;
                console.log(e.target.value);
            },
            decoratePickerChange: function(e) {
                this.decorateIndex = e.target.value;
                console.log(e.target.value);
            },
        }
    }
</script>

四、应用场景与优势
CC-EasyCommonInput适用于各种需要使用输入框的场景，如表单填写、搜索框、评论框等。其优势主要体现在以下几个方面：

1. 提升用户体验：通过提供丰富的定制选项和验证规则，CC-EasyCommonInput能够满足用户多样化的输入需求，提升应用的用户体验。

2. 提高开发效率：相较于传统的输入框组件，CC-EasyCommonInput提供了更多的功能和灵活性，使得开发人员能够快速构建出满足业务需求的输入框组件，减少了开发时间和成本。

3. 增强跨平台兼容性：基于uni-app框架，CC-EasyCommonInput可以在多个平台上运行，无需针对不同平台进行重复开发，降低了跨平台开发的难度和维护成本。

 

下载完整组件地址：请关注我的微信技术公众号： 前端组件开发

欢迎加入“前端组件开发学习”交流群，一起学习成长！可关注  “前端组件开发” 公众号后，私信后申请入群。