写一个Vue Popup组件

最新推荐文章于 2023-12-31 14:20:41 发布

霜如明月

最新推荐文章于 2023-12-31 14:20:41 发布

阅读量3.1k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/89313316

版权

本文介绍了如何在Vue中编写一个Popup组件，详细阐述了组件的设计思路，包括两种不同的调用方式——无需二次确认和需要二次确认。通过配置标题、内容、按钮等参数，组件可灵活使用。利用transition进行动画处理，并通过props传递参数，组件包装时使用vue的extend方法，结合Promise处理回调事件，确保了组件的易用性和灵活性。

摘要由CSDN通过智能技术生成

组件长这样

主要有标题、内容、按钮个数、按钮颜色、按钮文案这些可配置项

期望的调用方式一

不需要等待用户二次确认

import Modal from 'common/components/modal'
 
handleModal() {
 Modal({
  title: '赚取收益？',
  content: '根据您的授权金额和计息天数计算得出(还未到账)。实际以到账金额为准。',
  confirmText: '我知道了'
 })
}

期望的调用方式二

需要等待用户二次确认

import Modal from 'common/components/modal'
 
async handleModal() {
 await Modal({
  title: '确定现在申请结束吗？',
  content: '申请后预计1-5个工作日可退出',
  cancelColor: '#ff7400',
  confirmColor: '#000',
  showCancel: true
 })
}