vue编写messageBox，使用函数调用

效果如下：

调用：

this.$messageBox({text: '123123213',
  callback:action=>{console.log(action);//confirm(确定)cancel（确定）
  }
})

代码：

messageBox.js

import  messageBoxVue from './messageBox.vue'
export default {install(Vue){let messageBox = Vue.extend(messageBoxVue);
    let $messageBox = new messageBox();
    document.body.appendChild($messageBox.$mount().$el);
    Vue.prototype.$messageBox = (model => {model.show=true;
      $messageBox.model=model;
    });
  }
}

messageBox.vue:

<template><div><transition name="bounce"><div v-show="model.show" class="messageBox"><div class="messageBox_header"><div class="messageBox_header_title">提示
          </div></div><div class="messageBox_content">{{model.text}}
          <div v-html="model.html"></div></div><div class="messageBox_btns"><div class="messageBox_btns_default messageBox_btns_primary" @click="close('confirm')">确定</div><div class="messageBox_btns_default " @click="close('cancel')">取消</div></div></div></transition><div v-show="model.show" class="messageBox_model"></div></div>
</template><script>export default {name: 'messageBox',
    data(){return {model: {show: ''
        }}},
    methods: {close(state){this.model.show = false;
        if(this.model.callback){this.model.callback(state);
        }},
    }}
</script><style scoped>.messageBox {position: fixed;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    border-radius: 4px;
    background-color: #fff;

  }.messageBox_header {padding: 20px 20px 0;
  }.messageBox_header_title {padding-left: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    height: 18px;
    color: #333;
  }.messageBox_content {padding: 30px 20px;
    color: #48576a;
    font-size: 14px;

  }.messageBox_btns {padding: 10px 20px 15px;
    text-align: right;
    overflow: hidden;
  }.messageBox_btns_default {user-select: none;
    float: right;
    padding: 8px 15px;
    border: 1px solid #bfcbd9;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
  }.messageBox_btns_default:hover {border-color: #1d90e6;
  }.messageBox_btns_primary {color: #fff;
    background-color: #20a0ff;
    border-color: #20a0ff;
    margin-left: 10px;
  }.messageBox_btns_primary:hover {background: #4db3ff;
    border-color: #4db3ff;
  }.messageBox_model {position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
  }@keyframes show-messageBox {from {opacity: 0;
    }to {opacity: 1;

    }}.bounce-enter-active {animation: bounce-in .5s;
  }.bounce-leave-active {animation: bounce-in .1s reverse;
  }@keyframes bounce-in {from {opacity: 0;
    }to {opacity: 1;

    }}</style>

main.js引用：

import alert from './components/messageBox/messageBox.js'
Vue.use(alert);

vue编写messageBox，使用函数调用相关推荐

vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
vue编写坐标系以及echarts编写坐标系、highcharts编写坐标系（包含圆形间隔）
文章目录前言一.vue编写坐标系 2.读入数据三.highcharts编写坐标系(包含圆形间隔) 前言记录一下,耗时两天一.vue编写坐标系代码如下: // 坐标轴的样式 .heng {p ...
antd table排序 vue_商品品牌业务之Vue编写前端页面
今天是刘小爱自学Java的第145天. 感谢你的观看,谢谢你. 学习计划安排如下: 打算从前端页面到后台服务器代码完整地写一遍,但显然我高估了自己的实力,几个小时的时间根本不够用. 并且因为教程和vu ...
一步步编写操作系统 62 函数调用约定
由于我们要将c语言和汇编语言结合编程啦,所以一定会存在汇编代码和c代码相互调用的问题,有些事情还是要提前交待给大家的,本节就是要给大家说下函数调用规约中的那些事儿. 函数调用约定是什么? 调用约定,c ...
使用vue编写登录页面详细过程
首先,创建项目login vue create login cnpm install elementui vue-router vuex axios 结构如下具体操作过程在main.js中写入: ...
编写vue用什么工具_用Vue编写的很棒的回顾工具
编写vue用什么工具回顾 (Retrospectify) An awesome tool for doing agile team retrospectives digitally. This ca ...
用vue编写带动画效果的toast
Aniamted 为了方便快速的使用动画,我们可以使用现成的轮子– npm install animate.css Start vue官方文档给我们指出了编写插件的步骤和一些参数,这里提供给一个编写t ...
Vue编写静态页面框架的基本步骤（实现基本的页面链接跳转）
第一步:定义一个整体的框架(即主页面:可以到element-ui官网-组件-container中找自己满意的) 第二步:将官网的框架拷贝到开发软件中 <template><div&g ...

vue编写messageBox，使用函数调用

vue编写messageBox，使用函数调用相关推荐

最新文章

热门文章