vue弹出组件的实现示例代码

vue弹出窗口组件的外观

让我们看看我们想要实现的弹出窗口组件是什么样子的：

嗯，我们想用vue组件实现的弹出窗口就是这样的，和我们用js插件实现的效果是一样的。让我们来谈谈如何实现一个通用的vue弹出窗口组件。

实现vue弹出组件所需的知识

它是一个vue组件。当然，最基本的是vue知识。我假设每个人都有一定的vue基础，然后你需要明白：

1.vue的事件系统，vue组件之间的单一数据流，props将数据从父组件传输到子组件，子组件通过事件发送器将事件传输到父组件，父组件监控子组件的事件以处理特定的事务。

2.命名槽通过名称属性接收不同父组件传输的内容。命名槽接收两条数据，一条是弹出窗口的标题，另一条是弹出窗口的显示内容。

vue弹出窗口组件的实现代码

vue弹出窗口的具体实现代码以单页组件的形式编写，具体代码如下：

模板Div class=' MD-cont ' v-show=' showstate ' Div class=' MD-wrapper ' Div class=' MD-title '槽名=' TLT '标题/槽/Div class=' MD-text '槽名=' text '以下是弹出框/槽/Div class='页脚' Div v v-if=' type=' confirm ' ' @ click=' to cancel ' class=' MD-BTN ' cancel/Div class=' MD-BTN ' @ click=' take ' ok/Div/Div/Div}，took:function(){ this。$ emit(' take ')；} } }/script style scoped . MD-cont { position : fixed；left:0right : 0；top:0bottom : 0；z-index : 500；background:rgba(0，0，0，0.3)；文本对齐：居中；飞越：隐藏；white-space : no rap；}.{ content : }之后的MD-cont :display : inline-block；宽度：0；高度：100%；visibility:隐藏；垂直对齐：毫米；}.MD-wrapper { display : inline-block；垂直对齐：毫米；背景# fffcolor: # 333333font-size :0.34 rem；填充-top :0.2 rem；border-radius : 0.1 em；最大宽度：100%；}.MD-title { font-size :0.34 rem；文本对齐：居中；线高：0.6雷姆；}.MD-text { font-size :0.25 rem；文本对齐：居中；线高：0.4毫米；padding:0.2rem 0.5rem}.页脚{ display:flexborder-top:0.01rem实心# E5E 5；线高：0.88雷姆；color: # 488BF1font-size :0.32 rem；}.MD-BTN { flex :1；}.md-btn。MD-BTN { border-left :0.01 rem solid # E5E 5；}/style组件中的模板代码很简单，主要是两个命名槽slot；两个按钮触发两个事件，这两个事件通过$emit上传到父组件。根据父组件传递的类型属性，决定是否显示取消按钮。

对于那些系统不理解的命名槽和$emit事件，可以去vue官网查看，这里就不赘述了。

vue弹出窗口组件的使用

在父组件中使用弹出组件也非常方便。如果您是引导用户或粉丝，您会对这种用法感到熟悉和友好。

下面我展示了使用代码：

template Div class=' aft-box ' Div class=' aft-flex aft-PD ' Div class=' aft-BTN ' @ click=' alerts ' alerts/Div/Div class=' aft-flex aft-PD ' Div class=' aft-BTN aft-blue ' @ click=' confirm ' confirm/Div/Div模态类型=' alerts ' @ take=' okfall ' 3: show state=' showa ' span slot=' TLT ' prompt/span Div slot=' text '我是一个警报提示弹出窗口/Div/text/Modal ' export default { name : ' container '，components: { Modal }，data(){ return { showa:false，Showc:false，msg: '我有两个按钮，分别是确认弹出窗口' }}，方法： {alerts () {this。昭和=真；}，确认(){ this.showc=trueThis.msg='我有两个按钮，是确认弹出窗口'；}，okfall(){ this . showa=false；}，okfall2(){ this.msg='点击确认按钮，2秒后弹出窗口关闭'；setTimeout(()={ this . showc=false；},2000);}，cancel fall(){ this . showc=false；} } }/script style . aft-box { display : flex；线高：0.65雷姆；font-size :0.26 rem；color: # 333padd :0.5 rem 0；}.aft-flex { flex :1；}.aft-PD { padd :0.5 rem 0.1 rem；}.aft-BTN { display : block；线高：0.88雷姆；文本对齐：居中；color: # fffborder-radius : 0.12 rem；背景# FFB63B}.aft-blue { background : # 488 bf1；}/style这里，我们需要先导入模态弹出组件，然后通过父组件中的components属性声明来使用它。

然后通过模板模板中的Modal标签使用弹出窗口组件；

在弹出窗口组件上按类型设置弹出窗口的特征；

弹出窗口的打开和关闭由：showstate属性标识；

通过@ took点击确定按钮后设置操作；

单击“取消”按钮后，使用@tocancel确定操作；

在模式标签中，内容的槽属性标识内容是标题还是显示内容。slot='tlt '中的文本将显示为弹出标题，slot='text '中的文本将显示为弹出正文。

在这里，您还可以以{{msg}}插值表达式的形式将内容绑定到父组件的数据。

在脚本中，我们使用数据中的两个变量showa和showb来标识项目符号框的打开和关闭；

在页面的按钮事件中，通过设置showa和showb的值来打开和关闭弹出窗口。

vue弹出窗口组件的结论

这样的vue弹出组件就算完成了，使用起来也简单灵活，需要介绍的地方都可以用，内容和标题都可以自由设置。而且，与js弹出插件相比，vue弹出组件实现起来更简单、更清晰。只是我们需要很好的把握vue提供的特性，能够按照vue的思想框架去思考。vue的重要思想是我们操作数据，页面变化的dom操作由vue处理。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。