vue移动端错误信息弹出提示

最新推荐文章于 2024-05-21 09:23:53 发布

alvyang

最新推荐文章于 2024-05-21 09:23:53 发布

阅读量4k

点赞数

分类专栏： vue javascript jquery

本文链接：https://blog.youkuaiyun.com/Alvyang/article/details/70807363

版权

javascript 同时被 3 个专栏收录

13 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

介绍了一个基于jQuery和flexible.js的Vue移动端错误信息弹出提示组件，该组件会在1.5秒后自动关闭。提供Git源代码地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：该组件基于jquery和flexible.js

vue移动端错误信息弹出提示（1.5s后，自动关闭）

git地址

<template>
	<div class="error_message" v-show="message"><div class="error">{{message}}</div></div>
</template>
<script>
	export default({
		data(){
			return {
				initTop:0,
			};
		},
		watch:{
			message:{
				handler(val, oldVal){
					if(val){
						var _self = this;
						setTimeout(function(){
							_self.$parent.$data.message = "";
						},1500);
					}
				}
			}
		},
		mounted(){
			var mTop = $(".error_message").css("margin-top");
			this.initTop = parseFloat(mTop.substring(0,mTop.length-2));
			var _self = this;
			$(window).scroll(function(){
				var scrollTop = $(this).scrollTop();
				$(".error_message").css("margin-top",(_self.initTop+scrollTop)+"px");
			})
		},
		props:['message']
	});
</script>
<style>
	.error_message{
		position: absolute;
		margin-top: -0.87rem;
		top: 50%;
		height: 1.74rem;
		width: 10rem;
		text-align: center;
		z-index: 100;
	}
	.error_message .error{
		display: inline-block;
		background-color: rgba(0,0,0,0.8);
		border-radius: 5px;
		line-height: 0.5rem;
		text-align: center;
		color: #ffffff;
		font-size: 0.389rem;
		padding-top: 0.4rem;
		padding-bottom: 0.4rem;
		padding-left: 0.4rem;
		padding-right: 0.4rem;
	}
</style>

使用

<template>
	<div>
		<div style="width: 10rem;height: 5rem;" @click="clickMe">click me</div>
		<jf-prompt :message="message"></jf-prompt>
	</div>
</template>
<script>
	import Prompt from "components/prompt.vue";
	export default({
		data(){
			return {
				message:"",
			}
		},
		methods:{
			clickMe(){
				this.message="这里是提示信息";
			}
		},
		components:{
			"jf-prompt":Prompt,
		}
	});
</script>
<style>
	
</style>