写一个某视频剪辑软件弹出菜单组件

组件长这样

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

期望的调用方式一

不需要等待用户二次确认

从"公共/组件/模态" HandleModal(){ Modal({ title : })导入模态赚取收益？content: '根据您的授权金额和计息天数计算得出（还未到账)。实际以到账金额为准",确认文本："我知道了' })}期望的调用方式二

需要等待用户二次确认

从公共/组件/模式' async handleModal(){ await Modal({ title : ')导入情态的确定现在申请结束吗？content: '申请后预计1-5个工作日可退出，cancelColor: '#ff7400 '，confirmColor: '#000 '，showCancel: true })模板长这样

公共/组件/模态/模态。某视频剪辑软件

这里用过渡来包裹动画，填好配置参数就行了

手柄确认()二次确认事件我们不放这里实现，具体原因后面会讲模板转换名称=' modal-pop ' div class=' wrap ' v-show=' visible ' div class=' modal ' H3 { { title } }/H3 p { { content } }/p div class=' btns ' span v-if=' show cancel ' @ click=' visible=false ' : style=' color : $ { cancelColor } ` ' { { cancelText } }/span @ click=' handleConfirm()' : style=' ' color 33333:/modal“少”；/style定义好小道具参数列表，可见作为组件内部状态控制弹框打开关闭

导出默认值{ prop :[' title '，' content '，' showCancel '，' cancelColor '，' cancelText '，' confirmColor' ]，data(){ return { visible : false } } }组件包装

公共/组件/模态/索引。射流研究…

先利用某视频剪辑软件的扩展拿到刚编写的模板

从“Vue”const ModalConstructor=Vue。扩展(需要(')导入Vue ./modal。vue '))const Modal=(opts={ })={ let _ m=new Modal constructor({ El : document。createelement(' div ')})导出默认情态的配置好默认参数，并将看得见的状态打开以显示弹框，最终插入页面

从“Vue”const ModalConstructor=Vue。扩展(需要(')导入Vue ./Modal。vue '))const Modal=(opts={ })={ let _ m=new Modal constructor({ El : document。创建元素(' div ' })_ m . title=opts。标题| | '提示_ m . content=opts。内容| | ' ' _ m . show cancel=opts。显示取消| | false _ m .取消文本=opts。取消文本| | '取消_ m . cancelcolor=opts。cancelcolor | | ' # 000 ' _ m .确认文本=opts。确认文本| | '确定_ m .确认颜色=opts。确认颜色| | ' # ff 7400 ' _ m . visible=真实文档。尸体。appendchild(_ m . $ El)}导出默认模式用户点击二次确认事件后，为了方便组件外部捕捉，这里使用承诺包装回调事件

这样手柄确认()放在这里实现是不是就方便很多了从“Vue”const ModalConstructor=Vue。扩展(需要(')导入Vue ./Modal。vue '))const Modal=(opts={ })={ let _ m=new Modal constructor({ El : document。创建元素(' div ' })_ m . title=opts。标题| | '提示_ m . content=opts。内容| | ' ' _ m . show cancel=opts。显示取消| | false _ m .取消文本=opts。取消文本| | '取消_ m . cancelcolor=opts。cancelcolor | | ' # 000 ' _ m .确认文本=opts。确认文本| | '确定_ m .确认颜色=opts。确认颜色| | ' # ff 7400 ' _ m . visible=真实文档。尸体。appendchild(_ m . $ El)返回新的promise(resolve={ return(_ m . handle confirm=()={ _ m . visible=false resolve()})})导出默认模式最终长这样

从公共/组件/模式' async handleModal(){ await Modal({ title : ')导入情态的确定现在申请结束吗？content: '申请后预计1-5个工作日可退出，cancelColor: '#ff7400 '，confirmColor: '#000 '，showCancel: true })控制台。日志('用户确认了!')}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。