frontend/examking-app/plugins/uview-ui/components/u-modal/u-modal.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<view>
		<u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
		 :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
			<view class="u-model">
				<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
				<view class="u-model__content">
					<view :style="[contentStyle]" v-if="$slots.default  || $slots.$default">
						<slot />
					</view>
					<view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
				</view>
				<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
					<view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
					 :style="[cancelBtnStyle]" @tap="cancel">
						{{cancelText}}
					</view>
					<view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
					 class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
						<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
						<block v-else>
							<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
							<block v-else>
								{{confirmText}}
							</block>
						</block>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * modal 模态框
	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
	 * @tutorial https://www.uviewui.com/components/modal.html
	 * @property {Boolean} value 是否显示模态框
	 * @property {String | Number} z-index 层级
	 * @property {String} title 模态框标题（默认"提示"）
	 * @property {String | Number} width 模态框宽度（默认600）
	 * @property {String} content 模态框内容（默认"内容"）
	 * @property {Boolean} show-title 是否显示标题（默认true）
	 * @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
	 * @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
	 * @property {Stringr | Number} negative-top modal往上偏移的值
	 * @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
	 * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
	 * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
	 * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
	 * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
	 * @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
	 * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
	 * @property {Object} title-style 自定义标题样式，对象形式
	 * @property {Object} content-style 自定义内容样式，对象形式
	 * @property {Object} cancel-style 自定义取消按钮样式，对象形式
	 * @property {Object} confirm-style 自定义确认按钮样式，对象形式
	 * @property {Boolean} zoom 是否开启缩放模式（默认true）
	 * @event {Function} confirm 确认按钮被点击