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 相关文章推荐
javascript 原型继承介绍
Aug 30 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 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的性能
2013/10/30 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
详解Python中的日志模块logging
2015/06/19 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
升旗仪式主持词
2014/03/19 职场文书
新手上路标语
2014/06/20 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
工作说明书格式
2014/07/29 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
工程合作意向书范本
2015/05/09 职场文书
新学期开学标语2015
2015/07/16 职场文书
初二数学教学反思
2016/02/17 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
mysql幻读详解实例以及解决办法
2022/06/16 MySQL