用vue实现各类弹出框组件

发布时间:2019-01-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了用vue实现各类弹出框组件脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这里写图片描述

<h4 id="简单介绍一下vue中常用dialog组件的封装">简单介绍一下vue中常用dialog组件的封装:

实现动态传入内容,实现取消,确认等回调函数。

<h5 id="首先写一个基本的弹窗样式如上图所示">首先写一个基本的弹窗样式,如上图所示。

在需要用到弹窗的地方中引入组件:

<pre class="prettyprint"><code class=" hljs python"><span class="hljs-keyword">import dialogBar <span class="hljs-keyword">from <span class="hljs-string">'./dialog.vue'

<pre class="prettyprint"><code class=" hljs bash">components:{
<span class="hljs-string">'dialog-bar': dialogBar,},

<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">dialog-bar><span class="hljs-tag"></<span class="hljs-title">dialog-bar>

<h5 id="点击一个按钮显示弹窗并保证关闭弹窗后再次点击依旧显示">点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示

在弹窗组件中定义一个value值:v-model="sendVal",sendVal初始值为false。 在打开弹窗的方法中赋值:

<pre class="prettyprint"><code class=" hljs cs">openMask(){
<span class="hljs-keyword">this.sendVal = <span class="hljs-keyword">true;
}

在dialog.vue组件中做如下操作:

<pre class="prettyprint"><code class=" hljs cs">props: {
<span class="hljs-keyword">value: {} <span class="hljs-comment">// 注意此处获取的value对应的就是组件标签中的v-model
}

定义一个showMask变量用于控制是否显示弹窗

<pre class="prettyprint"><code class=" hljs cs">mounted(){
<span class="hljs-keyword">this.showMask = <span class="hljs-keyword">this.<span class="hljs-keyword">value; <span class="hljs-comment">// 在生命周期中,把获取的value值获取给showMash
},watch:{
<span class="hljs-keyword">value(newVal,oldVal){
<span class="hljs-keyword">this.showMask = newVal; <span class="hljs-comment">// 监测value的变化,并赋值。
},showMask(val) {
<span class="hljs-keyword">this.$emit(<span class="hljs-string">'input',val); <span class="hljs-comment">// 此处监测showMask目的为关闭弹窗时,重新更换value值,注意emit的事件一定要为input。
}
},

而要想关闭弹窗,只需要定义一个方法:

<pre class="prettyprint"><code class=" hljs cs">closeMask(){
<span class="hljs-keyword">this.showMask = <span class="hljs-keyword">false;
},

此刻已经可以实现弹窗的显示与退出。 下面我们要实现的是动态添加标题,内容等,在组件标签中加入title,content:

<pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">dialog-bar <span class="hljs-attribute">title=<span class="hljs-value">"我是标题" <span class="hljs-attribute">content=<span class="hljs-value">"我是内容"><span class="hljs-tag"></<span class="hljs-title">dialog-bar>

可以运用vue的数据双向绑定,更换title,content。 在dialog.vue中获取内容:

<pre class="prettyprint"><code class=" hljs css"><span class="hljs-tag">props: <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">value:<span class="hljs-value"> {},<span class="hljs-tag">content: <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">type:<span class="hljs-value"> String,default: <span class="hljs-string">''
},<span class="hljs-tag">title: <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">type:<span class="hljs-value"> String,

<pre class="prettyprint"><code class=" hljs handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div <span class="hljs-attribute">class=<span class="hljs-value">"dialog-title"><span class="hljs-expression">{{<span class="hljs-variable">title}}<span class="xml"><span class="hljs-tag"></<span class="hljs-title">div>
<span class="hljs-tag"><<span class="hljs-title">div <span class="hljs-attribute">class=<span class="hljs-value">"content" <span class="hljs-attribute">v-html=<span class="hljs-value">"content"><span class="hljs-tag"></<span class="hljs-title">div>

我们可以运用同样的原理来获取不同按钮中的自定名称。 下面我们利用传入的不同type来确定不同的按钮,并提供不同的回调函数。

<pre class="prettyprint"><code class=" hljs lasso"><span class="hljs-subst"><dialog<span class="hljs-attribute">-bar title<span class="hljs-subst">=<span class="hljs-string">"我是标题" content<span class="hljs-subst">=<span class="hljs-string">"我是内容" <span class="hljs-keyword">type<span class="hljs-subst">=<span class="hljs-string">"danger" dangerText<span class="hljs-subst">=<span class="hljs-string">"这是删除按钮"<span class="hljs-subst">></dialog<span class="hljs-attribute">-bar<span class="hljs-subst">>

如传入type为danger,我们可以在dialog.vue中props获取type,并定义一个如下按钮:

<pre class="prettyprint"><code class=" hljs handlebars"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div <span class="hljs-attribute">v-if=<span class="hljs-value">"type == 'danger'" <span class="hljs-attribute">class=<span class="hljs-value">"danger-btn" @<span class="hljs-attribute">click=<span class="hljs-value">"dangerBtn">
<span class="hljs-expression">{{<span class="hljs-variable">dangerText}}<span class="xml">
<span class="hljs-tag"></<span class="hljs-title">div>

<pre class="prettyprint"><code class=" hljs cs">dangerBtn(){
<span class="hljs-keyword">this.$emit(<span class="hljs-string">'danger'); <span class="hljs-comment">// 发送一个danger事件作为回调函数
<span class="hljs-keyword">this.closeMask(); <span class="hljs-comment">// 关闭弹窗
},

在标签中定义danger的回调并做一些操作:

<pre class="prettyprint"><code class=" hljs lasso"><span class="hljs-subst"><dialog<span class="hljs-attribute">-bar title<span class="hljs-subst">=<span class="hljs-string">"我是标题" content<span class="hljs-subst">=<span class="hljs-string">"我是内容" <span class="hljs-keyword">type<span class="hljs-subst">=<span class="hljs-string">"danger" dangerText<span class="hljs-subst">=<span class="hljs-string">"这是删除按钮" @danger<span class="hljs-subst">=<span class="hljs-string">"clickDanger()"<span class="hljs-subst">></dialog<span class="hljs-attribute">-bar<span class="hljs-subst">>

<pre class="prettyprint"><code class=" hljs erlang"><span class="hljs-function"><span class="hljs-title">clickDanger<span class="hljs-params">(){
<span class="hljs-title">console.<span class="hljs-title">log<span class="hljs-params">(<span class="hljs-string">"这里是回调函数")
},

同样原理可以获取和增添一些其他的操作:

<pre class="prettyprint"><code class=" hljs haskell"> props: {
value: {},// 类型包括 defalut 默认, danger 危险, confirm 确认,
<span class="hljs-typedef"><span class="hljs-keyword">type:<span class="hljs-container">{
<span class="hljs-title">type: <span class="hljs-type">String,<span class="hljs-title">default: '<span class="hljs-title">default'
},
content: {
<span class="hljs-typedef"><span class="hljs-keyword">type: <span class="hljs-type">String,
<span class="hljs-default"><span class="hljs-keyword">default: ''
},title: {
<span class="hljs-typedef"><span class="hljs-keyword">type: <span class="hljs-type">String,confirmText: {
<span class="hljs-typedef"><span class="hljs-keyword">type: <span class="hljs-type">String,
<span class="hljs-default"><span class="hljs-keyword">default: '确认'
},cancelText: {
<span class="hljs-typedef"><span class="hljs-keyword">type: <span class="hljs-type">String,
<span class="hljs-default"><span class="hljs-keyword">default: '取消'
},dangerText: {
<span class="hljs-typedef"><span class="hljs-keyword">type: <span class="hljs-type">String,
<span class="hljs-default"><span class="hljs-keyword">default: '删除'
},

<pre class="prettyprint"><code class=" hljs applescript"><<span class="hljs-keyword">div <span class="hljs-type">class=<span class="hljs-string">"btns">
<<span class="hljs-keyword">div v-<span class="hljs-keyword">if=<span class="hljs-string">"type != 'confirm'" <span class="hljs-type">class=<span class="hljs-string">"default-btn" @click=<span class="hljs-string">"closeBtn">
{{cancelText}}
</<span class="hljs-keyword">div>
<<span class="hljs-keyword">div v-<span class="hljs-keyword">if=<span class="hljs-string">"type == 'danger'" <span class="hljs-type">class=<span class="hljs-string">"danger-btn" @click=<span class="hljs-string">"dangerBtn">
{{dangerText}}
</<span class="hljs-keyword">div>
<<span class="hljs-keyword">div v-<span class="hljs-keyword">if=<span class="hljs-string">"type == 'confirm'" <span class="hljs-type">class=<span class="hljs-string">"confirm-btn" @click=<span class="hljs-string">"confirmBtn">
{{confirmText}}
</<span class="hljs-keyword">div>
</<span class="hljs-keyword">div>

点击此处去github下载弹窗代码: 作者:rookie.he(kuke_kuke) 博客链接: 欢迎关注支持,谢谢!

总结

以上是脚本之家为你收集整理的用vue实现各类弹出框组件全部内容,希望文章能够帮你解决用vue实现各类弹出框组件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: