文件目录:

github地址:https://github.com/xingkongwuyu/vue-spa-experience/tree/master/src/components

最终的效果:

组件的源码解析:

confirm :  confirm的框架

./index.js

import confirmBox from './src/index';
export default {install(Vue) {Vue.prototype.$confirm = confirmBox;},};

使用transition来实现动画效果

<template>
<transition name="mei-modal-fade"><div v-show="show" class="mei-modal" tabindex="-1" role="dialog" aria-labelledby="bombConfirmLabel" aria-hidden="false"><div class="mei-modal-mask"></div><div class="mei-modal-wrap"><div class="mei-modal-content"><i class="mei-icon-close" @click="onClosed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1515657730389" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="2915" width="40" height="40"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2916"/></svg></i><div class="mei-modal-header"><p>{{title}}</p></div><div class="mei-modal-body"><div class="mei-status-icon-box"></div><p v-if="!dangerouslyUseHTMLString">{{ text }}</p><p v-else v-html="text"></p></div><div class="mei-modal-footer"><button type="button" class="mei-btn mei-btn-primary" id="confirmButtons1" @click="button[0].ontap">{{button[0].text}}</button><button type="button" class="mei-btn mei-btn-text" id="confirmButtons1" @click="button[1].ontap">{{button[1].text}}</button></div></div></div></div>
</transition>
</template><script>export default {data() {return {show: true,title: '1212',text: '12121111112',button: [],dangerouslyUseHTMLString:false}},methods:{onClosed(){this.close();}}}
</script><style lang="scss" rel="stylesheet">@import "./../../../css/component.scss";.mei-modal-fade-enter,.mei-modal-fade-leave-to{transform: scale(0);}.mei-modal-fade-enter-active{animation: bounce-in 2s;}.mei-modal-fade-leave-active{animation: bounce-in 2s reverse;}
@keyframes bounce-in {0% {opacity: 0;}100% {opacity: 1;}
}
</style>

./src/index.jsimport Vue from 'vue';

import confirmVue from './confirm.vue';//参数配置
const defaults = {show:false,title:'',text:'',button:[]};
let confirmVueLoading;
const confirmVueConstructor = Vue.extend(confirmVue);//这里关闭的时候返回promise
confirmVueConstructor.prototype.close = function() {var vm=this;confirmVueLoading=null;var promise=new Promise(function(resolve,reject){if (vm.$el && vm.$el.parentNode) {vm.$el.parentNode.removeChild(vm.$el);}resolve();vm.$destroy();vm.show = false;})return promise
};
const confirmBox = (options = {}) => {if (Vue.prototype.$isServer) return;console.log(options);options = Object.assign({}, defaults, options);let parent = document.body ;   //没有关闭不允许新开if(confirmVueLoading){return confirmVueLoading}let instance = new confirmVueConstructor({el: document.createElement('div'),data: options});parent.appendChild(instance.$el);Vue.nextTick(() => {instance.show = true;});confirmVueLoading=instancereturn instance;};export default confirmBox;

引入全局 使用:

import VueConfirm from './components/confirm'
Vue.use(VueConfirm)
methods:{confirm () {var content = ` <div class="title">11111</div>`var vm=thisconst confirm = this.$confirm({title:'23232',text:content,dangerouslyUseHTMLString:true,button:[{text: '确定',ontap: function () {confirm.close().then(function(res){console.log(111233233231)});}},{text: '取消',ontap: function () {confirm.close().then(function(res){console.log('close')});}}]});},
}

配置项:title :标题

        text:内容,

      dangerouslyUseHTMLString:内容是否是html;      button:按钮             text:按钮名称
             ontap:点击后的函数

转载于:https://www.cnblogs.com/heyinwangchuan/p/8269278.html

vue 公用组件开发 确认框confirm相关推荐

  1. Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)

    Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...

  2. 饿了么UI/element Popconfirm气泡确认框 confirm事件

    本文:饿了么UI/element Popconfirm气泡确认框 confirm/cancel事件 饿了么官网说: 属性Attributes 参数 说明 类型 可选值 默认值 title 标题 Str ...

  3. html confirm位置,js确认框confirm()三种使用方法

    先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. 调用方法: 第三种方法:主要用于批量 ...

  4. php confirm函数,JS中确认框confirm()的使用总结

    JS中确认框confirm()的使用总结 1.confirm()函数中的参数是确认框的提示语. 2.此函数返回值是布尔型的,点击确定,返回值为true,点击取消返回值为false. ex1:删除单条信 ...

  5. js确认框confirm()用法实例详解

    这篇文章主要针对js确认框confirm()用法进行实例讲解,介绍了javascript确认框的三种使用方法,感兴趣的小伙伴们可以参考一下 先为大家介绍javascript确认框的三种使用方法,具体内 ...

  6. Vue使用ElementUI的确认框进行删除操作(包含前后端代码)

    前言 今天做自己项目的时候,有一个删除的业务,正好遇到了确认框,在此纪念一下. 这里我是使用的ElementUI的确认框! 首先ElementUI的确认框是这么说明的: 从场景上说,MessageBo ...

  7. 前端七十二变之vue.js组件开发

    1.ES6语法 ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势, ...

  8. 关于Antdesign vue tree组件开发中遇到的问题

    1.设置了:loadData 属性后,树节点在展开下级节点时,loading一直在. 解决办法 loadData() {return new Promise((resolve) => {// 重 ...

  9. 插拔式java_# 可插拔式组件设计,领略组件开发的奥秘

    从一个 Confirm 组件开始,一步步写一个可插拔式的组件. 处理一个正常的支付流程(比如支付宝购买基金) 点击购买按钮 如果风险等级不匹配则:弹确认框(Confirm) 用户确认风险后:弹出支付方 ...

最新文章

  1. 视频 网站 页面开关灯实现方法
  2. UEditor在线编辑器使用记录
  3. flex页面布局练习--知乎
  4. LeetCode 873. 最长的斐波那契子序列的长度(动态规划)
  5. nginx html 不缓存,nginx如何实现js和css不缓存
  6. 2017年杭州java面试题_2017年Java面试题整理
  7. c语言交换字符串,C语言中怎样交换两个字符串?C语言中怎样交 – 手机爱问
  8. Oracle PLSQL语句实例
  9. tm影像辐射定标_Landsat5TM数据辐射定标.pdf
  10. 搭建samba映射网络驱动器
  11. easyexcel excel自定义列导出 格式导出
  12. DOE软件测试工资,如何进行实验设计(DOE)
  13. 如何轻松玩转APP设计规范——从Axure画草图PS复刻墨刀原型简单交互
  14. 全新按摩控制板助力按摩产品发展
  15. 世界第 3 的滴滴裁员,求职必知独角兽公司排行榜
  16. Freemaker判断是否为空
  17. 进化三部曲,从互联网大脑发育看产业互联网的未来
  18. 企业信用代码等常用的正则验证
  19. osgearth仿真平台(1)
  20. open、write、read函数总结(初学者,请见谅)

热门文章

  1. uni-app阻止事件冒泡
  2. [react] react的函数式组件有没有生命周期?
  3. 前端学习(3345):数组方法的使用
  4. 前端学习(3328):闭包的形式3
  5. 前端学习(3289):object.define2
  6. 前端学习(3040):vue+element今日头条管理-上午回顾
  7. 工作112:空字符串引发的问题
  8. 前端学习(2474):页面布局
  9. 前端学习(2227):react之状态二
  10. 前端学习(1648):前端系列实战课程之任务功能清单思路