vue组件系列1、弹窗

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>

 

转载于:https://my.oschina.net/qingqingdego/blog/3022522

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101049.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 日志查看–journalctl[通俗易懂]

    日志查看–journalctl[通俗易懂]7.journal(1)journalctl //日志查看工具-n3 //查看最近3条日志-perr //查看错误日志-overbose //查看日志的详细参数–since //查看从什么时间开始的日志–until //查看到什么时间为止的日志(2)如何使用systemd-journald保存系统日志默认systemd-journald是不保存系统日志到硬盘的,那…

  • TensorFlow加载cifar10数据集

    TensorFlow加载cifar10数据集加载cifar10数据集cifar10_dir=’C:/Users/1/.keras/datasets/cifar-10-batches-py'(train_images,train_labels),(test_images,test_labels)=load_data(cifar10_dir)注意:在官网下好cifar10数据集后将其解压成下面形式load_local_cifar10.pyfrom__future__importabsolute_importfrom_

  • Windows 反消息钩子(1)

    Windows 反消息钩子(1)消息钩子在Windows编程中有着非常广泛的应用,它可以任意拦截Windows系统,这个以消息为驱动的系统中的绝大多数消息类型。一方面这给编程者带来了巨大的灵活性,另一方面也埋下了巨大隐患,大多数窃密软件都使用这种方法。此篇文章给您提供一种钩子的反拦截方法,希望对您有所帮助。文章中使用了API钩子,您之前必须对此技术有一定了解。      为求完整,文章分为两部分,第一部分为

  • MySQL存储过程

    MySQL存储过程MySQL存储过程

  • python贪吃蛇代码-Python编写简单的贪吃蛇核心代码[通俗易懂]

    python贪吃蛇代码-Python编写简单的贪吃蛇核心代码[通俗易懂]时间:2018-11-14概述:贪吃蛇Python贪吃蛇完整代码,代码注释比较多,可学习一下Python编写游戏的一些基本技巧,代码分享如下:#coding=utf-8importcursesimportthreadingimportrandom#importmsvcrt#fromcursesimporttextpad#!!!addch(y,x,ch)stdscr=curses….

  • JedisPool_redis scan

    JedisPool_redis scan前面给大家介绍了Redis的使用,今天将为大家介绍一下我们的JedisPool,那么Jedis是什么和为什么要使用它呢?请看下文:一、为什么要引入JedisPool?           首先我们如果每次使用缓存都生成一个Jedis对象的话,这样意味着会建立很多socket连接,造成系统资源被不可控调用,    甚至会导致奇怪错误的发生。如果使用单例模式,在线程安全模式下

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号