vue弹出框组件封装

新学vue，参考别人封装弹出层组件。好用！

1.你需要先建一个弹出框的模板：

//首先创建一个mack.vue<template><div class="mack" v-if="isShow"><div class="mackWeb" :style="text.mackStyle"><div class="title font_b" v-if="text.title" :style="text.titleStyle">{{text.title.trim()}}</div><div class="mesg font_s" v-if="text.mesg" :style="text.mesgStyle">{{text.mesg.trim()}}</div><div v-html="text.cntMsg"></div><div class="footb font_s"><divclass="foot_l borderlf borderTop"@click="cancel"v-if="text.cancel":style="text.cancelValStyle">{{text.btn.cancelVal}}</div><divclass="foot_r borderTop"@click="confirm"v-if="text.confirm":style="text.confirmValStyle">{{text.btn.confirmVal}}</div></div></div></div>
</template>
//写js
<script>export default {data() {return {isShow: true,text: {title: "",mesg: "",cnTmesg: "",cancel: true,confirm: true,mackStyle: null,titleStyle: null,mesgStyle:null,cancelValStyle: null,confirmValStyle: null,btn: {confirmVal: "确定",cancelVal: "取消"}}};},methods: {cancel() {this.isShow = false;},confirm() {this.isShow = false;}}
};
</script>//css
<style scoped lang='less'>.mack {position: fixed;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;background: rgba(21, 21, 21, 0.7);.font_b {font-size: 14/50rem;color: #231a2f;}.font_s {font-size: 12/50rem;color: #655a72;}.borderTop {border-top: 1/50rem solid #e4e4e4;}.mackWeb {background: #ffffff;width: 300/50rem;min-width: 300/50rem;margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);.title {text-align: center;padding: 15/50rem 15/50rem 0 15/50rem;}.mesg {padding: 15/50rem;text-align: center;}.footb {display: inline-table;width: 100%;.borderlf {border-right: 1/50rem solid #e4e4e4;}div {display: table-cell;box-sizing: border-box;text-align: center;padding: 10/50rem 0;}}}
}
</style>

2.接着你需要一个js：mackjs.js

import Vue from 'vue';
import confirm from '../components/mack';let confirmConstructor = Vue.extend(confirm);let theConfirm = function (text) {return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectletlet confirmDom = new confirmConstructor({el: document.createElement('div')})document.body.appendChild(confirmDom.$el);  //new一个对象，然后插入body里面confirmDom.text = Object.assign({},confirmDom.text, text);   //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义confirmDom.cancel = function () {console.log("点击的ok")confirmDom.isShow = false;res("确认")}confirmDom.confirm = function () {console.log("点击的取消")confirmDom.isShow = false;rej("取消")}})
}export default theConfirm;//暴露出去，别忘记挂载到vue的原型上  //   => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'//   => 再挂载 Vue.prototype.$confirm = theConfirm;//在需要的地方直接用以下方法调用即可：//   this.$confirm({//     type:'提示',//     msg:'是否删除这条信息？',//     btn:{//         ok:'yes',//         no:'no'//     }// }).then(() => {//     console.log('ok')// })// .catch(() => {//     console.log('no')// })

-3.你接着需要在main.js导入这个文件

import macksjs from './assets/mackjs'
Vue.prototype.$confirm= macksjs ;

-4.最后在你需要引入的vue文件中直接调用就好了

  <button @click="deleteaas">我是弹出框</button>methods:{deleteaas() {deleteaas() {this.$confirm({title: "adddssssaaa",mesg: "您确定不再关注该客户吗？",cntMsg: '<div class="helAA">你好</div>',cancelValStyle: { color: "red" },btn: {confirmVal: "确a定",cancelVal: "取a消"}}).then((res) => {console.log("yes",res);//点击确定之后的处理}).catch((err) => {console.log("no",err);});}}

导入

在前辈的基础上写的，只做小分享用。

vue弹出框组件封装相关推荐

vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
lhgdialog弹出框组件参数详解(自己曾经开发的fuzz项目中用到过)
lhgdialog弹出框组件参数详解鸣谢:http://blog.csdn.net/hurryjiang/article/details/7657623 同文:http://wjch-111.it ...
php和jquery ui弹出框,JavaScript_jQuery弹出框代码封装DialogHelper，看了jQueryUI Dialog的例子，效果 - phpStudy...
jQuery弹出框代码封装DialogHelper 看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的Dialog ...
【Popover 弹出框】在vue中，ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法
通过 /deep/ 深层查找并不能找到相关的元素,查找原因发现此组件的样式是全局样式,如果你style中加了scoped,如<style lang="scss" scoped ...
vue弹出框消息重置问题---一个投机取巧的方法
不知道大家对v-if与v-show是否了解 v-if 只加载符合条件的,不符合条件的会消亡 v-show 全部加载,只显示符合条件的利用v-if的特性我们就可以用一个比较投机取巧的方式重 ...
vue点击input框出现弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
lhgdialog弹出框组件参数详解
lhgdialog基本使用方法 : 1.下载最新版本lhgdialog: http://lhgcore.com/lhgdialog.rar 2.在需要调用lhgdialog编辑器的网页head标签结束 ...
vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
一.需求描述有些项目会频繁用到下图这种类型的遮罩弹框,最好的方法是封装为公共的组件,直接复用. image.png image.png 二.方法: 1.子组件:遮罩弹框通过父组件传参,来显示组件内容 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...

vue弹出框组件封装

导入

vue弹出框组件封装相关推荐

最新文章

热门文章