快捷導(dǎo)航

Vue自定義模態(tài)對(duì)話框彈窗

更新時(shí)間：2022年07月05日 11:46:29 作者：mossbaoo

這篇文章主要為大家詳細(xì)介紹了Vue自定義模態(tài)對(duì)話框彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue自定義模態(tài)對(duì)話框彈窗的具體代碼，供大家參考，具體內(nèi)容如下

模態(tài)對(duì)話框彈窗效果：

父組件（應(yīng)用頁(yè)面）主要代碼：

<template>
? ? <view class="app-container">
? ? ? ? <modal-dialog showText="確定要取消收藏嗎？" :isShowDialog="isDialog" @cancel="isDialog = false" @confirm="confirmDelete"></modal-dialog>
? ? </view>
</template>
?
<script>
? ? import modalDialog from '@/components/modalDialog.vue';
? ??
? ? export default {
?? ??? ?components:{
?? ??? ??? ?modalDialog
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?isDialog: false,
?? ??? ??? ?}
?? ??? ?},
? ? ? ? methods: {
? ? ? ? ? ? // 業(yè)務(wù)代碼......
? ? ? ? ? ? this.isDialog = false;
? ? ? ? }
?? ?}
</script>

子組件（自定義組件）代碼：

<template>
?? ?<view>
?? ??? ?<view class="global-mask" v-show="isShowDialog"></view>
?? ??? ?<view class="global-dialog" v-show="isShowDialog" style="top: 45%;">
?? ??? ??? ?<view class="title">溫馨提示</view>
?? ??? ??? ?<view class="content">
?? ??? ??? ??? ?<view class="text">{{showText}}</view>
?? ??? ??? ?</view>
?? ??? ??? ?<view class="btn">
?? ??? ??? ??? ?<view class="left" @tap="cancel" v-if="isShowCancel">{{cancelText}}</view>
?? ??? ??? ??? ?<view class="right" @tap="confirm" v-if="isShowConfirm">{{confirmText}}</view>
?? ??? ??? ?</view>
?? ??? ?</view>
?? ?</view>
</template>
?
<script>
?? ?export default {
?? ??? ?name: 'modalDialog',
?? ??? ?props: {
?? ??? ??? ?showText: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: '提示內(nèi)容'
?? ??? ??? ?},
?? ??? ??? ?isShowDialog: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: false
?? ??? ??? ?},
?? ??? ??? ?isShowCancel: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: true
?? ??? ??? ?},
?? ??? ??? ?cancelText: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: '取消'
?? ??? ??? ?},
?? ??? ??? ?isShowConfirm: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: true
?? ??? ??? ?},
?? ??? ??? ?confirmText: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: '確定'
?? ??? ??? ?}
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?cancel() {
?? ??? ??? ??? ?this.$emit('cancel');
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?confirm() {
?? ??? ??? ??? ?this.$emit('confirm');
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
?
<style lang="scss">
? ? .global-mask {
?? ??? ?position: fixed;
?? ??? ?top: 0;
?? ??? ?left: 0;
?? ??? ?z-index: 998;
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ??? ?background: rgba($color: #000000, $alpha: 0.3);
?? ?}
?? ?.global-dialog {
?? ??? ?position: fixed;
?? ??? ?top: 500rpx;
?? ??? ?left: 60rpx;
? ? ? ? top: 45%;
?? ??? ?z-index: 999;
?? ??? ?width: 630rpx;
?? ??? ?background: #FFFFFF;
?? ??? ?border-radius: 15rpx;
?? ??? ?overflow: hidden;
?? ??? ?.title {
?? ??? ??? ?font-size: 36rpx;
?? ??? ??? ?font-weight: 500;
?? ??? ??? ?text-align: center;
?? ??? ??? ?line-height: 100rpx;
?? ??? ??? ?padding-bottom: 10rpx;
?? ??? ?}
?? ??? ?.content {
?? ??? ??? ?.text {
?? ??? ??? ??? ?font-size: 32rpx;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?padding-bottom: 40rpx;
?? ??? ??? ?}
?? ??? ??? ?.form {
?? ??? ??? ??? ?padding: 0 40rpx;
?? ??? ??? ??? ?.item {
?? ??? ??? ??? ??? ?display: flex;
?? ??? ??? ??? ??? ?align-items: center;
?? ??? ??? ??? ??? ?justify-content: space-between;
?? ??? ??? ??? ??? ?margin-bottom: 40rpx;
?? ??? ??? ??? ??? ?input {
?? ??? ??? ??? ??? ??? ?width: 340rpx;
?? ??? ??? ??? ??? ??? ?height: 60rpx;
?? ??? ??? ??? ??? ??? ?border: 1px solid #eaeaea;
?? ??? ??? ??? ??? ??? ?border-radius: 10rpx;
?? ??? ??? ??? ??? ??? ?padding: 0 20rpx;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ??? ?.btn {
?? ??? ??? ?border-top: 1px solid #eaeaea;
?? ??? ??? ?display: flex;
?? ??? ??? ?&> view {
?? ??? ??? ??? ?flex: 1;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?line-height: 100rpx;
?? ??? ??? ??? ?font-size: 32rpx;
?? ??? ??? ??? ?&.left {
?? ??? ??? ??? ??? ?color: #666666;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?&.right {
?? ??? ??? ??? ??? ?color: #FFFFFF;
?? ??? ??? ??? ??? ?background: #FF3F42;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?}
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: