Vue2.0封装自定义Model组件实战

"这篇文章除了介绍Vue 2.0如何封装model组件，还提供了具体的需求分析、设计方案以及模板和脚本实现。" 在Vue 2.0中，封装model组件是为了创建一个可复用的模态对话框或者弹窗组件，它可以方便地在项目中用于各种场景，如信息提示、数据输入等。通过封装，我们可以将组件的样式、逻辑和模板统一管理，提高代码的复用性和维护性。 需求分析： 1. 简易场景 - 例如备注或修改密码，通常需要在屏幕中央显示，内容较少。 2. 复杂场景 - 如添加、修改或展示信息，可能需要固定距离屏幕顶部的位置，并且当内容过多时支持滚动。 3. 共性需求 - 包括标题显示、关闭按钮以及点击遮罩层或关闭按钮可以隐藏模型组件。 设计方案： 1. Prop传参 - 通过props传递必要的参数，如`title`（标题）、`show`（显示/隐藏状态）、`width`（宽度）和`type`（布局方式，如居中或顶部）。 2. 自定义事件 - 使用自定义事件来处理关闭model的操作，例如`close`事件。 3. Slot分发 - 通过`slot`来让内容区域可自定义，用户可以在model组件内部插入任意内容。 4. 滚动穿透处理 - 当模型组件打开并具有滚动条时，需要确保外部页面的滚动事件不会影响模型组件的显示。 具体实现： 模板部分： ```html <div class="model-mask" v-show="show"> <div :class="[type==='top'?'model-wrapper-top':'model-wrapper']" @click="close"> <div :class="[type==='top'?'model-container-top':'model-container']" :style="{width:width+'px'}"> <div class="model-header"> <span>{{title}}</span> <i class="close-empty" @click="close"> <Icon type="ivu-icon ivu-icon-ios-close-empty" size="25"/> </i> </div> <div class="model-body"> <slot></slot> </div> </div> </div> </div> ``` 脚本部分： ```javascript export default { name: 'MyModel', props: { title: String, show: Boolean, width: [Number, String], type: { type: String, default: 'center', // 默认居中显示 validator(value) { return ['center', 'top'].includes(value); } } }, methods: { close() { this.$emit('close'); // 触发关闭事件 } } } ``` 在这个实现中，组件接收`title`和`show`作为基础属性，`width`用来设置模型的宽度，`type`决定模型是居中还是在顶部。`close`方法被触发时会触发一个`close`事件，允许父组件响应并关闭模型。 通过这种方式，我们创建了一个高度定制化的model组件，可以适应多种场景，同时保持代码的简洁和可维护。在实际项目中，还可以根据需要添加更多的功能，比如动画效果、确认按钮等。