Vue实现了一个命令弹出组件功能

前言

弹出窗口组件是日常工作中非常常见的组件，但是其他人仍然在使用它。在业余时间，你可以简单地自己实现一个弹出窗口组件

涉及的知识点：扩展，$mount，$el

用法：

这个。$Confirm({ title: '自定义标题' })。然后(res={ console.log(res)})目录结构

Index.vue:组件布局、风格、交互逻辑

挂载组件并公开方法

学习点

在此之前，了解所涉及的知识点

1.扩展

使用这个api，引入的vue组件可以被改变成vue构造器，它可以在实例化后很容易地被扩展

2.$mount

我们希望弹出组件在使用时显示出来，所以我们需要动态地向主体添加元素。您可以通过使用$mount方法手动挂载vue实例，该方法仅与extend结合使用，这也是弹出组件的必要性的关键。

3.$el

既然要添加dom元素，只需要通过实例的$el属性获取dom元素，然后使用native方法添加节点~

代码实现

index.vue

template Div class=' wrap ' Div class=' main ' Div class=' content ' { title } }/Div class=' BTN-grounp ' Div class=' BTN cancel ' @ click=' cancelText ' { cancelText } }/Div class=' BTN confirm ' @ click=' confirm ' { { confirm text } }/Div/Div/templatestiportdefault { name : }，data(){ return { title 3: '这是一个弹出窗口，confirmText: '}，methods : { show(CB){ type of CB==' function ' CB . call(this，this)返回new Promise(resolve={ this . resolve=resolve })}，confirm(){ this . resolve(' confirm ')this . hide()}，cancel(){ this . resolve(' cancel ')this . hide()}，hide(){ document . body . removechild(this。这个。$destroy() } }，}/script style scoped . wrap { position :已修复；top : 0；底部：0；left:0right:0display:flexjustice-content : center；align-items:居中；background: rgba(0，0，0， 3)；}.主{宽度：30%；padding: 10px背景# fffbox-shadow : 0 10px 1px # DDD；border-radius : 5px；}.内容{ color: # 424242font-size : 20px；}.BTN-grounp { margin-top : 15px；display:flexjustice-content :灵活端；}.BTN { margin-left : 15px；padding: 5px 20pxborder-radius : 5px；font-size : 16px；color: # fff}.确认{ background: lightblue}.取消{ background: lightcoral}/styleindex.js

从“vue”导入vue，从“导入确认”。/index.vue '让新实例=null//将vue组件更改为构造函数让确认构造函数=vue . extend(confirm)让init=(options)={ //实例化组件newinstance=newconfirm构造函数()//合并配置选项Object.assign(newInstance，Options) //加载domdocument.body.appendchild(新实例。$ el)}让调用者=(选项)={//options是配置选项if(！newInstance){ init(options) }返回new instance . show(VM={ new instance=null })}导出默认值{ install(vue){ vue . prototype . $ Confirm=caller } } main . js

我上面展示的对象包含安装方法。这里可以使用Vue.use注册组件(使用Vue.use后会找到调用它的install方法)，在Vue原型上挂载组件调用方法。

从“”导入确认。/components/confirm' vue.use(确认)写在最后

这个弹窗组件比较简单，还有很多地方需要改进，有时间可以再做一次~

摘要

如上所述，边肖给大家介绍的Vue实现了一个命令式的弹出组件功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！