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