前端vue uni-app基于picker封装的移动端通用增强选择器picker插件

摘要：
在前端开发中，选择器（Picker）是一个常见的组件，用于用户输入或选择数据。然而，为了满足不同的业务需求和用户界面设计，开发人员需要频繁地定制和修改选择器。cc-pickerView是一个基于uni-app的通用增强选择器，它提供了丰富的定制选项和事件处理，使得前端开发人员可以快速构建出满足业务需求的选择器组件。本文将详细介绍cc-pickerView的使用方法和特性，以及它在前端开发中的优势和应用场景。

一、引言
在移动应用和网页开发中，选择器（Picker）是一个重要的UI组件，用于让用户从预设的数据集合中选择一个值。然而，传统的选择器往往功能较为单一，无法满足日益复杂的业务需求和用户体验要求。为了解决这个问题，我们开发了cc-pickerView，一个基于uni-app的通用增强选择器。

截图如下：

二、cc-pickerView概述
cc-pickerView是基于uni-app框架的自定义组件，它提供了丰富的定制选项和事件处理，使得开发人员可以快速构建出满足业务需求的选择器组件。与传统的选择器相比，cc-pickerView具有以下优势：

1. 高度可定制：开发人员可以根据业务需求定制选择器的样式、数据范围、提示信息等。

2. 丰富的交互体验：支持多种类型的选择器，如单选、多选、范围选择等，并提供了丰富的交互效果和动画。

3. 事件驱动：通过事件处理机制，开发人员可以轻松地响应用户的交互行为，如选择改变、键盘弹出等。

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

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

1. 在页面中引入cc-pickerView组件：

cc-pickerView

使用方法

复制代码
<!-- leftTitle:左边标题 name：输入框名称  placeholder: 占位符 @change: 选择事件  value：选择值  range：选择范围  -->
<cc-pickerView leftTitle="房屋朝向" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
                :value="towardIndex" :range="towardArr"></cc-pickerView>

<cc-pickerView leftTitle="房屋楼层" name="layer" placeholder="请选择房屋朝向" @change="floorPickerChange"
                :value="floorIndex" :range="floorArr"></cc-pickerView>

<cc-pickerView leftTitle="房屋电梯" name="lift" placeholder="请选择房屋电梯" @change="liftPickerChange"
                :value="liftIndex" :range="liftArr"></cc-pickerView>

<cc-pickerView leftTitle="房屋装修" name="decorate" placeholder="请选择房屋装修" @change="decoratePickerChange"
                :value="decorateIndex" :range="decorateArr"></cc-pickerView>

HTML代码实现部分

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

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

            <!-- leftTitle:左边标题 name：输入框名称  placeholder: 占位符 @change: 选择事件  value：选择值  range：选择范围  -->
            <cc-pickerView leftTitle="房屋朝向" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
                :value="towardIndex" :range="towardArr"></cc-pickerView>

            <cc-pickerView leftTitle="房屋楼层" name="layer" placeholder="请选择房屋朝向" @change="floorPickerChange"
                :value="floorIndex" :range="floorArr"></cc-pickerView>

            <cc-pickerView leftTitle="房屋电梯" name="lift" placeholder="请选择房屋电梯" @change="liftPickerChange"
                :value="liftIndex" :range="liftArr"></cc-pickerView>

            <cc-pickerView leftTitle="房屋装修" name="decorate" placeholder="请选择房屋装修" @change="decoratePickerChange"
                :value="decorateIndex" :range="decorateArr"></cc-pickerView>

            <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 {
        components: {

        },
        data() {
            return {

                towardIndex: -1,
                floorIndex: -1,
                liftIndex: -1,
                decorateIndex: -1,

                towardArr: ['东', '南', '西', '北', '南北'],
                floorArr: ['低', '中', '高'],
                liftArr: ['有电梯', '无电梯'],
                decorateArr: ['普通装修', '精装修'],
            }
        },

        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>

在上面的示例中，我们定义了一个名为“房屋朝向”的选择器组件，用户可以从东、南、西、北、中选择一个。通过监听“change”事件，当用户改变选择时，我们可以获取到当前选择的朝向索引值，并执行相应的逻辑处理。

 

四、应用场景与优势
cc-pickerView适用于各种需要使用选择器的业务场景，如表单输入、数据筛选、参数设置等。其优势主要体现在以下几个方面：

1. 提升用户体验：通过提供丰富的定制选项和事件处理，cc-pickerView能够满足用户多样化的选择需求，提升应用的用户体验。

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

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

Dclound官网组件下载地址：

https://ext.dcloud.net.cn/plugin?id=12797

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

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