vue自定义弹窗组件

在平时写页面的时候，一些页面总是需要到弹窗，可以将它写成组件的形式，考虑到有不一样的弹窗，可以按照下面的来写：
新建popup.vue,

<template><div class="jl_dialog" :class="{hide:!value}"><div class="UImask" @click="maskHandle"></div><div class="UIdialog"><div class="UIdialog_hd"><strong class="UIdialogTitle">{{title}}</strong></div><div class="UIdialog_bd"><slot>弹窗内容</slot></div><div class="UIdialog_ft"><span v-if="cancel" class="UIdialog_btn UIdialog_btn_default left" @click="onCancel" >{{cancelVal}}</span><span v-if="confirm" class="UIdialog_btn UIdialog_btn_default right " :class={UIdialog_btn_disabled:isDisabled} @click="onConfirm">{{confirmVal}}</span></div></div></div>
</template>

首先先来普及一下知识点：
1.弹窗组件通过slot插槽接受从父组件那里传过来弹窗内容。
2.弹窗组件通过props接收从父组件传过来的值
3.通过父组件传进来的props控制组件的显示与隐藏，子组件关闭时通过事件$emit触发父组件改变值。
在script里面

export default {name: 'jlDialog',props: {value: {type: Boolean,default: false},confirm: {type: Boolean,default: false},cancel: {type: Boolean,default: false},title: {default: null},confirmVal: {type: String,default: '是'},cancelVal: {type: String,default: '否'},isDisabled: {type: Boolean,default: false},maskHide:{type: Boolean,default:true}},methods: {maskHandle(){if(this.maskHide){console.log(2222)this.$emit('input',false)}},onConfirm(){if(!this.isDisabled){this.$emit('onConfirm')this.$emit('input', false)}},onCancel(){this.$emit('onCancel')this.$emit('input', false)}}}

因为是公共的组件，在main.js里面统一引入：

import jlPopup from './CustomComponents/Popup.vue';
Vue.component('jlPopup',jlPopup )

在其他组件里面可以这样使用：

<jlPopup :maskHide=false v-model="showpoup" @onConfirm="onConfirm" @onCancel="showDialog=false" confirm cancel cancelVal="取消" confirmVal="确定"><h3 style="color: #ee0f06">啦啦啦</h3></jlPopup>

以下的为css

<style lang="less">@weuiDialogBackgroundColor: #FFFFFF;@weuiDialogLineColor: #D5D5D6;@weuiDialogLinkColor: #3CC51F;@weuiDialogLinkActiveBc: #EEEEEE;@weuiDialogGapWidth: 1.6em;@weuiTextColorGray: #4a4a4a;.UImask{position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, .6);}.UIdialog{text-align: left;position: fixed;z-index: 5000;width: 80%;max-width: 300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color:@weuiDialogBackgroundColor;text-align: center;border-radius: 8px;overflow: hidden;border: 1px solid @weuiDialogLinkActiveBc;}.UIdialog_hd {padding: 1.3em @weuiDialogGapWidth .5em;}.UIdialogTitle {font-weight: 400;font-size: 18px;}.UIdialog_bd {padding: 0 @weuiDialogGapWidth .8em;min-height: 40px;font-size: 15px;line-height: 1.3;word-wrap: break-word;word-break: break-all;color: @weuiTextColorGray;&:first-child{padding:2.7em 20px 1.7em;color:#353535;}}.UIdialog_ft {position: relative;line-height: 48px;font-size: 18px;display: flex;border-top:1px solid @weuiDialogLineColor ;&:after {content: " ";//.setTopLine(@weuiDialogLineColor);}}.UIdialog_btn {display: block;flex: 1;color: @weuiDialogLinkColor;text-decoration: none;//.setTapColor();/*&:active {*//*<!--background-color: @weuiDialogLinkActiveBc;-->*//*}*/position: relative;&:first-child {border-right: 1px solid @weuiDialogLineColor;&:after {display: none;}}}.left {color: #353535;}.right{background-color: #2c5fc3;color: #FFFFFF;}.UIdialog_btn_disabled{background-color: #d7d7d7;color: #a4a4a4;}.weui-skin_android{.UIdialog{text-align: left;box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .1);}.UIdialogTitle{font-size: 21px;}.UIdialog_hd{text-align: left;}.UIdialog_bd{color:@weuiTextColorGray;padding:.25em @weuiDialogGapWidth 2em;font-size: 17px;text-align: left;&:first-child{padding:1.6em @weuiDialogGapWidth 2em;color:#353535;}}.UIdialog_ft{display: block;text-align: right;line-height: 42px;font-size: 16px;padding:0 @weuiDialogGapWidth .7em;&:after{display: none;}}.UIdialog_btn{display: inline-block;vertical-align: top;padding:0 .8em;&.left{color: @weuiDialogLinkColor}&:after{display: none;}&:active{background-color: rgba(0,0,0,.06);}&:visited{background-color: rgba(0,0,0,.06);}&:last-child{margin-right: -.8em;}}.left {color: #353535;}.right{background-color: #2c5fc3;color: #FFFFFF;}.UIdialog_btn_disabled{background-color: #d7d7d7;color: #a4a4a4;}}@media screen and (min-width: 1024px) {.UIdialog {width: 35%;}}</style>

作者：jialing_cccwei
链接：https://www.jianshu.com/p/d3ae9efa6b40
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

vue自定义弹窗组件相关推荐

vue 自定义弹窗组件
父组件 <template><div><p @click="onDelete">打开</p>< ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...
Vue中自定义弹窗组件
定义一个popup组件,用于自定义弹窗,其中showpo是用于显示弹窗一下是子组件popup的主体框架 Mask和main_popup的css样式如下在子组件中使用props来接受父组件传递过来的 ...
vue自定义全局组件(或自定义插件)
最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use ...
video标签和videojs配置（vue视频弹窗组件）
直接摆出一个视屏弹窗的vue组件代码实现效果: 点击父组件中某个按钮后,打开视频弹窗,并且可以通过X按钮关闭优点: 动态生成与销毁video标签,解决hls视频流数据一直在后台请求的问题,避免关闭 ...
vue 自定义popup组件并支持scroll组件
本来是使用第三方库 vant的vue 组件库的popup,后来在popup中使用better-scroll插件的时候,出现并不兼容的情况,也就自己搭建一个popu插件,中间遇到很多问题,都会记录一下 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...

vue自定义弹窗组件

vue自定义弹窗组件相关推荐

最新文章

热门文章