目錄

#平臺差異說明

#基本使用

#傳入富文本內(nèi)容

#異步關(guān)閉

#點擊遮罩關(guān)閉

#控制模態(tài)框?qū)挾?/p>

#自定義樣式

#縮放效果

#API

#Props

#Event

#Method

#Slots

彈出模態(tài)框，常用于消息提示、消息確認、在當前頁面內(nèi)完成特定的交互操作。

#平臺差異說明

#基本使用

默認情況下，模態(tài)框只有一個確認按鈕：

• 請至少要配置彈框的內(nèi)容參數(shù)content。
• 通過v-model綁定一個布爾變量來控制模態(tài)框的顯示與否。

<template>
	<view>
		<u-modal v-model="show" :content="content"></u-modal>
		<u-button @click="open">
			打開模態(tài)框
		</u-button>
	</view>
</template>
	
<script>
	export default {
		data() {	
			return {
				show: false,
				content: '東臨碣石，以觀滄海'
			}
		},
		methods: {
			open() {
				this.show = true;
			}
		}
	}
</script>

#傳入富文本內(nèi)容

有時候我們需要給模態(tài)框的內(nèi)容，不一定是純文本的字符串，可能會需要換行，嵌入其他元素等，這時候我們可以使用slot功能，再結(jié)合uni-apprictText組件， 就能傳入富文本內(nèi)容了，如下演示：

<template>
	<view>
		<u-modal v-model="show" :title-style="{color: 'red'}">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-button @click="open">
			打開模態(tài)框
		</u-button>
	</view>
</template>
	
<script>
	export default {
		data() {	
			return {
				show: false,
				content: `
					空山新雨后<br>
					天氣晚來秋
				`
			}
		},
		methods: {
			open() {
				this.show = true;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
	}
</style>

#異步關(guān)閉

異步關(guān)閉只對"確定"按鈕起作用，需要設置async-close為true，當點擊確定按鈕的時候，按鈕的文字變成一個loading動畫，此動畫的顏色為?confirm-color參數(shù)的顏色，同時Modal不會自動關(guān)閉，需要手動設置通過v-model綁定的變量為false來實現(xiàn)手動關(guān)閉。

<template>
	<view class="">
		<u-modal v-model="show" @confirm="confirm" ref="uModal" :async-close="true"></u-modal>
		<u-button @click="showModal">彈起Modal</u-button>
	</view>
</template>

<script>
export default {
    data() {
        return {
			show: false
		}
	},
	onLoad: function(opt) {
		
	},
	methods:{
		showModal() {
			this.show = true;
		},
		confirm() {
			setTimeout(() => {
				// 3秒后自動關(guān)閉
				this.show = false;
				// 如果不想關(guān)閉，而單是清除loading狀態(tài)，需要通過ref手動調(diào)用方法
				// this.$refs.uModal.clearLoading();
			}, 3000)
		}
    }
}
</script>

#點擊遮罩關(guān)閉

有時候我們不顯示"關(guān)閉"按鈕的時候，需要點擊遮罩也可以關(guān)閉Modal，這時通過配置mask-close-able為true即可

<u-modal v-model="show" :mask-close-able="true"></u-modal>

#控制模態(tài)框?qū)挾?/h4>

可以通過設置width參數(shù)控制模態(tài)框的寬度，此值可以為數(shù)值(單位rpx)，百分比，auto等。

<u-modal v-model="show" width="70%"></u-modal>

#自定義樣式

此組件有完善的自定義功能，可以配置標題，內(nèi)容，按鈕等樣式(傳入對象形式)，具體參數(shù)詳見底部的API說明

<u-modal v-model="show" :title-style="{color: 'red'}"></u-modal>

#縮放效果

開啟縮放效果，在打開和收起模態(tài)框的時候，會帶有縮放效果，具體效果請見示例，此效果默認開啟，通過zoom參數(shù)配置

<u-modal v-model="show" :zoom="false"></u-modal>

#API

#Props

注意：需要給modal組件通過v-model綁定一個布爾值，來初始化modal的狀態(tài)，隨后該值被雙向綁定。

#Event

#Method

此方法需要通過ref調(diào)用，詳見上方的"異步關(guān)閉"文章來源地址http://www.zghlxwxcb.cn/news/detail-823867.html

#Slots

到了這里，關(guān)于uniapp組件庫Modal 模態(tài)框 的使用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！