前端Vue自定义询问弹框和输入弹框

前端组件化开发：以cc-defineDialogBox组件为例

随着技术的发展，开发的复杂度也越来越高。传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。为了解决这个问题，前端开发社区提出了组件化开发的理念。通过组件化开发，可以将大型应用分解为一系列独立且可复用的组件，每个组件可以单独开发、测试、维护，并且可以随意组合，大大提高了开发效率和可维护性。

组件化开发对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文将通过介绍一个前端Vue组件——cc-defineDialogBox，来深入探讨前端组件化开发的应用和实践。

cc-defineDialogBox组件介绍

cc-defineDialogBox是一个自定义的询问弹框和输入弹框组件，适用于需要用户确认或者输入信息的情况。使用该组件可以方便地在uni-app平台上实现询问弹框和输入弹框的功能

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

 

 

效果图如下：

 

使用方法

使用cc-defineDialogBox组件非常简单，只需按照以下步骤进行操作：

1. 在uni-app项目中的需要使用该组件的页面中引入cc-defineDialogBox组件。

html复制代码

	<!-- 提示框 -->
	<cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>

1. 在父组件中定义ref属性，将组件引用到父组件中。这里我们使用ref="DialogBox"将组件引用为DialogBox。
2. 在父组件中实现需要展示询问弹框或输入弹框的方法。在方法中调用this.$refs['DialogBox'].confirm()方法来展示弹框。
3. 在confirm()方法中传入配置参数，例如title、content、DialogType等，来定义弹框的标题、内容、类型等属性。
4. 在询问弹框或输入弹框关闭时，可以通过回调函数获取用户输入的结果。

下面是一个示例父组件的代码：

javascript复制代码

	<template>
	<div>
	<!-- 提示框 -->
	<cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>
	<button @click="showDialogBox">显示询问弹框</button>
	<button @click="showDialogBoxInput">显示输入弹框</button>
	</div>
	</template>
	<script>
	export default {
	methods: {
	// 显示询问弹框
	showDialogBox() {
	this.$refs['DialogBox'].confirm({
	title: '请确认您填写的手机号',
	content: '手机号码：13999999999?',
	DialogType: 'inquiry',
	animation: 0
	}).then((res) => {
	console.log('res = ', JSON.stringify(res));
	})
	},
	// 显示输入弹框
	showDialogBoxInput() {
	this.$refs['DialogBox'].confirm({
	title: '更改昵称',
	placeholder: '请输入修改的昵称',
	value: this.nickname,
	DialogType: 'input',
	animation: 0
	}).then((res) => {
	// 输入框返回值res
	this.nickname = res.value;
	})
	},
	}
	}
	</script>

在上述代码中，我们通过引用cc-defineDialogBox组件并在父组件中使用按钮点击事件来展示询问弹框和输入弹框。在询问弹框和输入弹框关闭时，通过回调函数获取用户输入的结果并进行相应的操作。

HTML代码实现部分

<template>
    <view class="content">

        <!-- 提示框 -->
        <cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>

        <!-- 显示询问弹框 -->
        <button @click="showDialogBox"
            style="width: 160px; height: 50px;background-color: antiquewhite; margin-top: 26px;">显示询问弹框</button>

        <!-- 显示输入弹框 -->
        <button @click="showDialogBoxInput"
            style="width: 160px; height: 50px;background-color: antiquewhite; margin-top: 26px;">显示输入弹框</button>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                nickname: 'Hello'
            }
        },
        () {

        },
        methods: {

            // 显示询问弹框
            showDialogBox() {

                this.$refs['DialogBox'].confirm({
                    title: '请确认您填写的手机号',
                    content: '手机号码：13999999999?',
                    DialogType: 'inquiry',
                    animation: 0
                }).then((res) => {

                    console.log('res = ', JSON.stringify(res));
                })
            },

            // 显示输入弹框
            showDialogBoxInput() {

                this.$refs['DialogBox'].confirm({
                    title: '更改昵称',
                    placeholder: '请输入修改的昵称',
                    value: this.nickname,
                    DialogType: 'input',
                    animation: 0
                }).then((res) => {
                    // 输入框返回值res
                    this.nickname = res.value;
                })
            },

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;

    }
</style>

结合业务特性的模块拆分策略

对于cc-defineDialogBox组件来说，结合业务特性的模块拆分策略主要是根据具体的业务需求进行划分。例如，可以根据业务场景的不同，将询问弹框和输入弹框拆分为独立的模块，每个模块可以独立开发、测试、维护，并且可以随意组合。这样可以更好地支持业务的复杂性和可扩展性。

模块间的交互方式

在组件化开发中，模块间的交互方式也是非常重要的一环。对于cc-defineDialogBox组件来说，模块间的交互主要是通过回调函数进行。例如，在询问弹框关闭时，可以通过回调函数将用户输入的结果返回给父组件，

构建系统

构建系统是组件化开发中的重要一环，它可以提高开发效率和代码的可维护性。对于cc-defineDialogBox组件来说，可以使用uni-app的构建系统来进行构建和打包。通过配置构建系统的配置文件，可以优化组件的代码结构、压缩代码大小、提高加载速度等。并且可以通过uni-app插件市场发布该组件，供其他人使用。通过构建系统，可以将组件的代码进行优化和压缩，提高代码的性能和可读性。

总结

组件化开发是前端开发的重要趋势，能够提高开发效率和可维护性