vue.extend实现alert模态框弹窗组件


Posted in Javascript onApril 28, 2018

本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下

alert.js文件代码

import Vue from 'vue'
// 创建组件构造器
const alertHonor = Vue.extend(require('./alert.vue'));

var currentMsg = {callback:function(){
}}

export default function(options){

  var alertComponent = new alertHonor({el: document.createElement('div')});
  alertComponent.title = options.title;
  alertComponent.ranking = options.ranking;
  // 把alertHonor.vue加入body中
  alertComponent.$appendTo(document.body);

  // 回调函数
  alertComponent.callback = function(action) {
    if (action == 'share') {
      options.share();
    }
  };

}

alert.vue代码

<template>
  <div class="alertHonor" v-if="showAlertHonor">
    <div class="alertHonorBox" @click="alertHonorClick"></div>
    <div class="honorWindow">
      <div class="honorClose" @click="honorClose"></div>
      <div class="honorBg">
        <div class="honorShare">
          <div class="honorBgLeft">升级通知</div>
          <div class="honorBgRight" @click='handleActions("share")'>分享</div>
        </div>
        <div class="honorText">{{title}}</div>
      </div>
      <div class="honorRanking">
        {{ranking}}
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    props:{
      img:{type:String},  //图片
      title:{type:String},  //达人昵称
      ranking:{type:String},   //排名
      share:{type:Function}, //分享
    },
    data(){
      return{
        showAlertHonor:true
      }
    },
    methods:{
      alertHonorClick(){ //点击其他区域
        this.showAlertHonor = false; //关闭整个窗口
      },
      honorClose(){ //点击关闭图标
        this.showAlertHonor = false;
      },

      handleActions(action){
        this.callback(action);
      }
    }
  }
</script>

 引用页面代码

<script>
  import AlertHonor from '../alert.js'
  export default{
    data(){
      return{
        title:'我的荣誉'
      }
    },
    ready(){
    },
    methods:{
      back(){
        alert(1)
      },
      submit(){
        var vm = this;
        AlertHonor({
          
          title:'拜访达人',
          ranking:'您在全国排名第99',
          share: function(){
            vm.share();
          }
        });
      },
      share(){ //点击分享
        alert('分享');
      },
    }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 #Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 #Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 #Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 #Javascript
React Native日期时间选择组件的示例代码
Apr 27 #Javascript
vue实现点击展开点击收起效果
Apr 27 #Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 #Javascript
You might like
php创建无限级树型菜单
2015/11/05 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
python根据路径导入模块的方法
2014/09/30 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
python黑魔法之参数传递
2016/02/12 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python-opencv 双线性插值实例
2020/01/17 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
给朋友的道歉短信
2015/05/12 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
导游词幽默开场白
2019/06/26 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Spring Boot实现文件上传下载
2022/08/14 Java/Android