1、VUE - 遮罩弹框公共组件

一、需求描述

有些项目会频繁用到下图这种类型的遮罩弹框,最好的方法是封装为公共的组件,直接复用。

image.png
image.png

二、方法:

1、子组件:遮罩弹框通过父组件传参,来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。
2、父组件点击事件:传参,决定子组件样式,且监控子组件的 “返回”、“确定” 事件,决定遮罩弹框的显示还是取消显示,以及下一步操作。

三、上代码

这里主要写一些方法,具体GitHub 会放在文章末尾

1、子组件的动态样式显示。

 <div id="alert" class="flex-con" v-if="alertDara"> 
      <div class="con">
        <div class="title" :style="{color:alertDara.titleColor}">{{alertDara.title}}</div>
        <div class="content" :style="{color:alertDara.contentColor}">{{alertDara.content}}</div>
        <div class="btn">
          <div
            class="btn-back flex-con"
            v-if="alertDara.btn[0]"
            :style="{color:alertDara.btnColor[0]}"
            @click="alertBackFn"
          >{{alertDara.btn[0]}}</div>
          <div
            class="btn-sure flex-con"
            v-if="alertDara.btn[1]"
            :style="{color:alertDara.btnColor[1]}"
            @click="alertSureFn"
          >{{alertDara.btn[1]}}</div>
        </div>
      </div>
    </div>

注:这里的 btn 和 btnColor 必须传两个值,否则会报错。不想显示的可以传 ""

  data() {
    return {
      alertDara: {
        title: "启动五谷模式",
        titleColor: "pink",
        content: "设备已经是启动模式,为了保障安全,请在设备机上点击启动按钮。",
        contentColor: "gray",
        btn: ["返回", ""],
        btnColor: ["", ""]
      }
    };
  },

2、父组件 通过 props 传参,来决定子组件的样式

props 传参方法可以看我之前的文章:https://www.jianshu.com/p/d0cc6eb0226e

<public v-if="alertDara" :alertDara="alertDara" ></public>



三、难点:父组件监控子组件事件

1、父组件

自定义事件属性:alertBack,事件名:alertBackFn
注意:主要是在父组件中 通过 alertSure 定义监听参数,在子组件通过 this.$emit('alertBack') 传递子组件事件。对于父组件、子组件的事件名,可以随意。【我老是入这个坑】

<public v-if="alertDara" 
    :alertDara="alertDara" @alertBack="alertBackFn" @alertSure="alertSureFn"></public>

2、子组件:

在事件中,用 this.$emit 方法,将自己的事件监听传给父亲。

alertBackFn:function(){
      this.$emit('alertBack', '这是子组件传递的消息');
 },
a.png

具体代码地址:https://github.com/caoguoli/vue-maskALert

附:见下图

各位亲爱的客官们,我实在不知道如何在mackDown 上传图片的时候,将多个图片在一行显示,有知道方法的大神们,请告诉我哈。


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 25,915评论 1 12
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,653评论 0 32
  • 唐老师是我小学六年级和初中一年级时候的语文老师兼班主任。在那段艰难的求学岁月里,唐老师给我留下了深刻的印象。 我出...
    上官飞鸿阅读 888评论 8 24
  • 家有老妈,年方三八(不是三八二十四岁,确实是三十八!)活泼、可爱、善良、搞笑。我的老妈却可称得上是一只具有神功的...
    小宝宝仪阅读 472评论 1 2
  • 【早起打卡】20180316 【践行人员】卓稣萍 【今日天气】晴雨 【昨日早睡】24:00 【今日早起】6:20 ...
    稣萍阅读 117评论 0 1