Vue 2.0封装Model组件实战：遮罩、居中与滚动处理

"本文主要讲解了在Vue 2.0中如何封装一个可复用的model组件，以满足不同场景下的需求，如垂直居中、顶部固定以及具有标题和关闭功能的对话框。通过单文件组件的方式，将模板、逻辑和样式封装在一起，方便在项目中多次使用。" 在Vue 2.0中，为了提高代码的复用性和可维护性，我们可以创建一个通用的model组件。这个组件可以根据传入的参数和场景来调整自身的显示样式和功能。以下是实现该组件的关键步骤和设计思路： 1. **需求分析**： - **简单场景**：如备注或修改密码，组件需要在屏幕中央显示。 - **复杂场景**：如添加、修改或展示信息，组件需距离屏幕顶部200px，并且在内容过多时可以滚动。 - **共性需求**：包含标题、关闭图标，点击确定、关闭或遮罩层时隐藏组件。 2. **组件结构**： - **wrapper**：用于全屏遮罩，点击时隐藏组件。 - **inner**：根据`type`属性决定是垂直居中还是顶部固定。 - **title**：动态显示标题。 - **content**：内容区域，可以通过`slot`进行自定义。 3. **Prop传参**： - `title`：接收标题字符串。 - `show`：控制组件是否显示，布尔值。 - `width`：组件宽度，数字类型。 - `type`：控制组件布局，可能的值有'center'（垂直居中）和'top'（顶部固定）。 4. **自定义事件**： - 需要定义一个关闭model的事件，例如`@close`，在父组件中触发时隐藏组件。 5. **slot分发**： - 使用`<slot>`标签来允许用户自定义model内部的内容。 6. **滚动穿透处理**： - 当model显示时，可能需要防止body的滚动，这通常通过CSS实现，比如设置body的`overflow`属性。 7. **具体实现**： - 在`template`部分，编写HTML结构，包括各部分的class和事件绑定。 - 在`script`部分，定义组件的`name`、`props`和`data`。数据中可能包括用于记录滚动位置的变量。 - 可能还需要在`methods`中定义`close`方法，处理关闭逻辑。 通过以上步骤，我们就能创建一个高度可配置和可复用的model组件，适应多种业务场景。在实际项目中，根据需求还可以进一步扩展，比如增加动画效果、确认按钮的处理等。