vue组件系列1、弹窗

建立vue文件 pre_message.vue,直接源码，注释很详细

 <template>
  <div class="my_dialog">
    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
    <div
      class="dialog-cover"
      v-if="pre_show"
      @click="closeMyself"
    ></div>
    <!-- transition 这里可以加一些简单的动画效果 -->
    <transition name="drop">
      <!--style 通过props 控制内容的样式  -->
      <div
        class="dialog-content"
        v-if="pre_show"
      >
        <div :class="pre_showtype">
          <!--弹窗头部 title-->
          <slot name="header">{
   {pre_title}}</slot>
        </div>
        <div class="dialog_main">
          <!--弹窗的内容-->
          <slot name="main">{
   {pre_note}}</slot>
        </div>
        <!--弹窗关闭按钮-->
        <div
          class="foot_close"
          @click="closeMyself"
        >
          <div class="close_img back"></div>
        </div>
      </div>
    </transition>
  </div>
</template> 

<script>
/*
名称：弹窗组件
日期：2019-03-14
作者：hj
步骤：
先搭建组件的html和css样式，遮罩层和内容层。
调用：


*/
export default {
  /*组件名称不能和系统关键字重复*/ 
  name: "pre_message",
  data() {
    return {
      pre_show:false,
      pre_showtype:'dialog_head dialog_head_none',
      pre_title:'提示',
      pre_note:'说明信息没有获取到',
    }
  },
  props: {        
    // 展示类型
    showtype:{
      type:String,
      default:''
    },
    // 展示内容
    note:{
      type:String,
      default:''
    },
    message_data: {
      type: Object,
      default: function () {
        return { showtype: 'dialog_head dialog_head_none',note:'对象模式' }
      }
    }
  },
  watch:{    
    note(val){
      this.my_note=val;
      console.log('展示'+this.note+' my_note='+this.my_note);
      this.refresh_data();
    },
    message_data(obj){
      this.check_obj();
    }
  },
  methods: {
    closeMyself() {
      console.log('关闭');
      // this.$emit("on-close");
      this.pre_show=false;
    },
    refresh_data:function(){
      console.log('子组件数据刷新...');
      this.pre_show=true;
      this.pre_title='提示';
      this.pre_note=this.note;
    },
    check_obj:function(){
      // console.log('传入');
      // console.log(this.message_data);
      switch(this.message_data.showtype){
        case 'ok':
          this.pre_showtype='dialog_head dialog_head_ok';
          this.pre_title='通过';
          break;
        case 'no':
          this.pre_showtype='dialog_head dialog_head_no';
          this.pre_title='拒绝';
          break;
        case 'err':
          this.pre_showtype='dialog_head dialog_head_err';
          this.pre_title='错误';
          break;
        case 'warning':
          this.pre_showtype='dialog_head dialog_head_warning';
          this.pre_title='警告';
          break;
        default:
          this.pre_showtype='dialog_head dialog_head_none';
          break;
      }
      this.pre_note=this.message_data.note;
      this.pre_show=true;
    }
  }
};
</script>


<style lang="scss" scoped>
/*
scss 依赖安装
npm  install -s sass-loader
npm install -s node-sass
*/
/** 弹窗动画*/
.drop-enter-active {
  // 动画进入过程：0.5s
  transition: all 0.5s ease;
}
.drop-leave-active {
  // 动画离开过程：0.5s
  transition: all 0.3s ease;
}
.drop-enter {
  //动画之前的位置
  transform: translateY(-500px);
}
.drop-leave-active {
  //动画之后的位置
  transform: translateY(-500px);
}
// 最外层 设置position定位
.my_dialog {
  position: relative;
  color: #2e2c2d;
  font-size: 16px;
}
// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.dialog-cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// 内容层 z-index要比遮罩大，否则会被遮盖，
.dialog-content {
  position: fixed;
  width: 40%;
  top: 35%;
  left: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 300;

  .dialog_head {
    // 头部title的背景 居中圆角等属性。
    // width: 86.5%;
    width: 100%;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    padding: 5px 50px 10px 50px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .dialog_head_ok {
    background-color: #45f79f;
  }
  .dialog_head_no {
    background-color: #72837a;
  }
  .dialog_head_warning {
    background-color: #f4fb8e;
  }
  .dialog_head_err {
    background-color: #f31b2a;
  }
  .dialog_head_none {
    background-color: #ffffff;
  }
  .dialog_main {
    // 主体内容样式设置
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-content: center;
    // width: 86.5%;
    width: 100%;
    padding: 22px 50px 47px 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .foot_close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fcca03;
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
    right: -60px;
    top: -6px;
    .close_img {
      background-image: url("../../assets/image/shan1.png");
      width: 20px;
      height: 20px;
    }
  }
}
</style>

父组件使用

<template>
  <div class="mydiv">    
    <button @click="tt">测试</button>
    <button @click="tt_ok">通过</button>
    <button @click="tt_no">拒绝</button>
    <button @click="tt_err">错误</button>
    <button @click="tt_warning">警告</button>
    <!-- 放置自定义组件 -->    
    <per-message
      ref="child1"
      v-bind:note="setnote"
      :message_data="msg_obj"
      @on-close="closeDialog"
    />
  </div>
</template>

<script>
// import testmessage2 from "./personmode/pre_message.vue";
export default {  
  components: {
    // 'per-message':testmessage2,
    'per-message':()=>import("./personmode/pre_message.vue"),
  },
  data() {
    return {
      setnote:'',
      msg_obj:{}
    };
  },
  mounted: function() {
    this.$nextTick(function(ischeck) {
      
    });
    // 这里只是操作dom
    // console.log('验证结果='+res);
    // console.log(this.ischeck.isok);
    // this.$set(this.ischeck, 'isok', '1')
  },
  watch: {    
    // 这里写方法会影响性能
  },
  methods: {
    closeDialog(){
      this.show_msg=false;
    //把绑定的弹窗数组 设为false即可关闭弹窗
    },
    tt:function(){
      console.log('弹窗');
      // 方式1弹出
      // this.setnote='新内容'+(Math.random() * 35);
      // /*
      // 直接 
      // this.$refs.child1.refresh_data();
      // 会导致参数没有传过去，界面已经弹出
      // */ 
      // var that=this;
      // this.$nextTick(function(ischeck) {
      //   that.$refs.child1.refresh_data();
      // });
      // 方式2监听弹出
      this.setnote='监听弹出'+(Math.random() * 35);
    },
    tt_ok:function(){
      this.msg_obj={'showtype':'ok','note':'通过检查'};
    },
    tt_no:function(){
      this.msg_obj={'showtype':'no','note':'检查失败'};
    },
    tt_err:function(){
      this.msg_obj={'showtype':'err','note':'发现错误'};
    },
    tt_warning:function(){
      this.msg_obj={'showtype':'warning','note':'警告。。。。。。。。。'};
    }
    
  }
};

</script>
<style scoped>
</style>