uniapp - msg組件

 

sunui-msg　 頂部消息提醒

 

v1.0.0 於 2020.01.14更新：如果消息提示直接進入頁面就顯示，要在mounted生命周期或者在onLoad生命周期使用this.$nextTick

 

 

 

 

 

 

 

參數介紹(通過ref標識)：

1. text:文本提示內容/默認空

2. type:文本提示背景顏色/默認無

3. sec:點擊顯示時間/默認2秒

 

 

示例代碼：

 

 

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="openMsg"></image>
		<sunui-msg ref="msg"></sunui-msg>
	</view>
</template>

<script>
	import sunUiMsg from '@/components/sunui-msg/sunui-msg.vue';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		mounted() {

		},
		components: {
			'sunui-msg': sunUiMsg
		},
		onLoad() {

		},
		methods: {
			openMsg() {
				this.$refs.msg.show({
					text: '提交失敗',
					type: 'error',
					sec: 2
				});
				
				// this.$refs.msg.show({
				// 	text: '提交成功',
				// 	type: 'success',
				// 	sec: 2
				// });
				
				
				// 關於自定義彈出顏色可以在sunui-msg.vue樣式擴展也可以在App.vue
				// .sunui-color-success
				// .sunui-color-error
				// 類似以上形式擴展
			}
		}
	}
</script>

<style>

</style>

　　

 

　　

 

　　

點擊下載示例：sunui-msg