Vue自定义确认/提示框代码实例与实现

在本文档中，作者分享了如何在Vue.js中实现自定义的弹框效果，主要关注于确认框和提示框两种类型的构建。该示例利用Vue组件的方式，通过`<template>`部分展示了HTML结构，并结合`<script>`部分中的Vue实例和数据属性来控制弹框的行为。 首先，我们看到一个名为`<transition>`的元素，它与Vue的过渡动画相关联，确保当弹框出现或消失时有平滑的过渡效果。`name="confirm-fade"`表明使用的是名为"confirm-fade"的预定义动画。 在`<template>`中，关键部分是`<div v-if="isShowConfirm">`，通过`isShowConfirm`布尔属性来控制弹框的显示状态。当`isShowConfirm`为`true`时，弹框才会渲染。这个组件包含三个主要部分： 1. **确认框或提示框内容**：由`<h3>`和`<p>`组成，分别用于显示标题和内容。`v-show`指令根据`titleText`是否为空来决定标题是否显示。 2. **操作区**：包含两个按钮，根据`type`值不同，有不同的行为。如果`type`为"confirm"，则会有一个取消按钮（`.my-cancel-btn`），点击后触发`clickFun('clickCancel')`方法，文本为`cancelText`；同时还有一个确认按钮（`.confirm-btn`），点击后执行`clickFun('clickConfirm')`，文本为`confirmText`。 3. **外部数据传递**：组件接收一个名为`outerData`的可选参数，用于与外部组件进行通信，这在实际应用中可能用于传递额外的数据或处理用户交互的结果。 在`<script>`部分，定义了一个名为`export default`的对象，其中包含了`data()`函数，返回一个包含所需数据的对象。这些数据包括弹框的状态（`isShowConfirm`）、标题、内容、按钮文字以及弹框类型。 总结来说，这个文档提供了一个基础的Vue组件模板，演示了如何创建自定义的确认框和提示框功能，通过动态数据和条件渲染来适应不同的场景。这对于任何正在学习或想要扩展Vue应用中的交互性组件的开发者来说，都是一个实用的参考。