最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue弹窗组件的实现示例代码
时间:2022-06-25 15:41:14 编辑:袖梨 来源:一聚教程网
vue弹窗组件的样子
我们先看一下,我们要实现出来的弹窗组件长什么样子:
呐,我们要用vue组件实现的弹窗就是这个样子,跟我们用js插件实现的效果一样,下面我们开始讲述怎么实现一个通用的vue弹窗组件。
实现vue弹窗组件需要的知识
是vue组件,当然最基础的是vue的知识,我假设大家是有一定vue功底的,然后你还需要了解:
1、vue的事件系统,vue组件间的单项数据流,props从父组件向子组件传递数据,子组件通过事件emit向父组件传递事件,父组件通过on监听子组件的事件来处理具体事务。
2、具名插槽slot,通过name属性来接收不同的父组件传递过来的内容,具名插槽接收两个数据,一是弹窗的标题,二是弹窗的显示内容。
vue弹窗组件的实现代码
vue弹窗的具体实现代码采用单页面组件的形式写的,具体代码如下:
标题 这里是弹框内容
组件中模版代码很简单,其中主要的就是两个具名插槽slot;两个按钮触发两个事件,这两个事件通过$emit上传到父组件。根据父组件传递过来的type属性来决定是否显示取消按钮。
对于具名插槽和$emit事件系统不理解的可以去vue官网查看,这里不多做赘述了。
vue弹窗组件的使用
在父组件里面使用弹窗组件也是很方便的,如果你是bootstrap的使用者或者爱好者,你会对这种使用方式感到熟悉和亲切。
下面我展示使用代码:
alertconfirm提示 我是一个alert提示弹窗确认 {{msg}}
这里我们需要先通过import引入modal弹窗组件,再在父组件里面通过components属性声明使用此组件。
然后在template模版中通过Modal标签使用弹窗组件;
在弹窗组件上通过type来设置弹窗的特性;
通过:showstate属性来标识弹窗的打开和关闭;
通过@took来设置确定按钮点击后的操作;
通过@tocancel来确定取消按钮点击后的操作;
在Modal标签中通过内容上的slot属性来标识内容是标题还是显示内容,slot='tlt'中的文字将会作为弹窗标题显示,slot='text'的文字将会作为弹窗的正文显示;
在这里你也可以通过{{msg}}插值表达式的形式来把内容和父组件的数据绑定到一块;
在script中我们通过data中的两个变量showa和showb来标识弹框的打开和关闭;
页面中的按钮事件中通过设置showa和showb的值来打开和关闭弹窗。
vue弹窗组件结语
这样一个vue弹窗组件就算完成了,使用简单灵活,哪里需要引入到里面就可以使用了,而且其中的内容和标题可以自由设置,而且vue弹窗组件相对于js弹窗插件来说实现起来更简单,更清晰。只是我们需要很好的掌握vue提供的特性以及能够按照vue所在的思想框架进行思考。而vue开中的重要思想就是:我们操作数据,页面变化dom操作交给vue来处理。相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21