rtk-wms-uniapp/components/modal.vue

<template>
	<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="modalForm" :title="modalTitle">
		<template v-slot:content>
			<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">
				<text class="gui-block gui-text-center gui-text gui-color-gray"
					style="line-height:100rpx; padding:10rpx;">
					{{ modalContent }}
				</text>
			</view>
		</template>

		<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
		<template v-slot:btns>
			<view class="gui-flex gui-row gui-space-between operation-flex">
				<view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleLoginOutCancel">
					<text class="modal-btns gui-color-gray">取消</text>
				</view>
				<view class="line"></view>
				<view hover-class="gui-tap" class="modal-btns gui-flex1" @tap="handleLoginOutConfirm">
					<text class="modal-btns gui-primary-color">确认</text>
				</view>
			</view>
		</template>
	</gui-modal>
</template>

<script>
	import {
		ref,
		defineComponent,
		watch,
		computed
	} from "vue"
	export default defineComponent({
		name: "modal-component",
		props: {
			// 模态框状态
			modalState: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "提示"
			},
			content: {
				type: String,
				default: "确定要这么做吗？"
			},
			// 在列表中的列表索引
			clickIndex: {
				type: Number,
				default: undefined
			}
		},
		setup(props, context) {
			const modalForm = ref();
			const modalTitle = computed(() => props.title ?? "提示");
			const modalContent = computed(() => props.content ?? "确定要这么做吗");
			watch(() => props.modalState, (state) => {
				if (state) {
					modalForm.value.open();
				} else {
					modalForm.value.close();
				}
			}, {
				deep: true
			})
			const handleLoginOutCancel = function() {
				context.emit("update:modalState", !props.modalState);
				context.emit("update:clickIndex", undefined);
				modalForm.value.close();
			}
			const handleLoginOutConfirm = function() {
				context.emit("update:modalState", !props.modalState);
				context.emit("update:clickIndex", props.clickIndex);
				context.emit("complate");
				modalForm.value.close();
			}
			return {
				modalForm,
				modalTitle,
				modalContent,
				handleLoginOutConfirm,
				handleLoginOutCancel
			}
		}
	})
</script>

<style scoped>
	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}

	.modal-btns {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.operation-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.line {
		height: 80rpx;
		width: 1rpx;
		background-color: #dcdcdc;
	}
</style>