写一个Vue弹出组件

　　

　　

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

　　

写一个Vue弹出组件

　　

<强> 写一个Vue弹出组件

　　

<强>

　　

不需要等待用户二次确认

　　 　　 　　从“通用/组件/导入模态模态的 　　 　　handleModal () { 　　模态({ 　　标题:“赚取收益?” 　　内容:“根据您的授权金额和计息天数计算得出(还未到账)。实际以到账金额为准。’, 　　confirmText:“我知道了” 　　}) 　　} 　　 　　

　　

需要等待用户二次确认

　　 　　 　　从“通用/组件/导入模态模态的 　　 　　异步handleModal () { 　　等待模态({ 　　标题:“确定现在申请结束吗?’, 　　内容:“申请后预计1 - 5个工作日可退出”, 　　cancelColor:“# ff7400 ', 　　confirmColor: # 000, 　　showCancel:真 　　}) 　　} 　　 　　

　　

<代码>通用/组件/模态/modal.vue

　　

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

　　
handleConfirm()二次确认事件我们不放这里实现,具体原因后面会讲 　　 　　 　　& lt; template> 　　& lt;过渡name=" modal-pop比; 　　 　　& lt; div类="包装" 　　v-show=翱杉北? 　　 　　& lt; div类=澳Ｌ北? 　　 　　& lt; h4>{{标题}}& lt;/h4> 　　 　　& lt; p>{{内容}}& lt;/p> 　　 　　& lt; div类=癰tn”比; 　　& lt;跨度v=" showCancel " 　　@click="可见=false " 　　:在{{cancelText}} & lt;/span> 　　& lt;跨度@click=" handleConfirm () 　　:在{{confirmText}} & lt;/span> 　　& lt;/div> 　　 　　& lt;/div> 　　 　　& lt;/div> 　　 　　& lt;/transition> 　　& lt;/template> 　　 　　& lt;风格lang=吧佟北? 　　@ import”。/modal.less '; 　　& lt;/style> 　　 　　

定义好道具参数列表,可见作为组件内部状态控制弹框打开关闭

　　 　　 　　出口默认{ 　　道具:[ 　　“标题”, 　　“内容”, 　　“showCancel”, 　　“cancelColor”, 　　“cancelText”, 　　“confirmText”, 　　“confirmColor” 　　), 　　 　　数据(){ 　　返回{ 　　可见:假 　　} 　　} 　　} 　　 　　

　　

<代码>通用/组件/模态/index.js

　　

先利用vue的扩展拿到刚编写的模板

　　 　　 　　从“Vue”进口Vue 　　 　　const ModalConstructor=Vue.extend(要求(’。/modal.vue ')) 　　 　　const模态=(选择={})=比;{ 　　让_m=new ModalConstructor ({el: document.createElement (div)}) 　　} 　　 　　出口默认模态 　　 　　

配置好默认参数,并将可见的状态打开以显示弹框,最终插入页面

　　 　　 　　从“Vue”进口Vue 　　 　　const ModalConstructor=Vue.extend(要求(’。/modal.vue ')) 　　 　　const模态=(选择={})=比;{ 　　让_m=new ModalConstructor ({el: document.createElement (div)}) 　　 　　_m。标题=选择。标题| |”提示” 　　_m。内容=选择。内容| |” 　　_m。showCancel=选择。showCancel | |假 　　_m。cancelText=选择。cancelText | |”取消” 　　_m。cancelColor=选择。cancelColor | | # 000的 　　_m。confirmText=选择。confirmText | |”确定的 　　_m。confirmColor=选择。confirmColor | | # ff7400” 　　_m。可见=true 　　 　　document.body.appendChild (_m el)美元。 　　} 　　 　　出口默认模态 　　 　　

用户点击二次确认事件后,为了方便组件外部捕捉,这里使用承诺包装回调事件

　　
这样handleConfirm()放在这里实现是不是就方便很多了 　　 　　 　　从“Vue”进口Vue 　　 　　const ModalConstructor=Vue.extend(要求(’。/modal.vue ')) 　　 　　const模态=(选择={})=比;{ 　　让_m=new ModalConstructor ({el: document.createElement (div)}) 　　 　　_m。标题=选择。标题| |”提示” 　　_m。内容=选择。内容| |” 　　_m。showCancel=选择。showCancel | |假 　　_m。cancelText=选择。cancelText | |”取消” 　　_m。cancelColor=选择。cancelColor | | # 000的 　　_m。confirmText=选择。confirmText | |”确定的 　　_m。confirmColor=选择。confirmColor | | # ff7400” 　　_m。可见=true 　　 　　document.body.appendChild (_m el)美元。 　　 　　返回新的承诺(解决=比;{ 　　(_m返回。handleConfirm=()=比;{ 　　_m。可见=false 　　解决() 　　}) 　　}) 　　} 　　 　　出口默认模态

写一个Vue弹出组件