Vue实现简单留言板案例

Vue实现简单留言板案例

<template>
	<div>
		
		<h2>留言板</h2>
		<p>
			昵称:
			<input type="text" v-model="name">
		</p>
		
		<p>
			留言内容:<br>
			<textarea name="" id="" cols="30" rows="7" v-model="content"></textarea>&nbsp;
			
			<span :class="{'text-color':!onSubmit}">{{userLength}}/{{maxLength}}</span>
		</p>
		
		<p>
			<button @click="add">提交</button>
		</p>
		
		<hr>
		
		<div>
			<div v-for="(item,index) in list" style="border-bottom: 1px dashed;">
				
				<p class="ly-p1">
					<span>
						{{item.name}}
						{{item.time | TimeFilter}}
					</span>
					
					<span @click="praise(item)" class="praise">点赞:{{item.star}}</span>
				</p>
				
				<div>
					{{item.content}}
				</div>
				
				<p>
					<button @click="del(item,index)">删除</button>
				</p>
				
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				name:'', //用户名
				content:'', //输入的内容
				list:[], //留言列表
				userLength:0,//用户实时输入字数长度
				maxLength:30,//最多限制字数
				onSubmit:true //是否可以提交
			}
		},
		created() { //初始化保存
			let liuyan = localStorage.liuyan
			if(liuyan){
				this.list = JSON.parse(liuyan)
			}
		},
		watch:{ //侦听器
			content(newVal,oldVal){
				this.userLength = newVal.length
				if(this.userLength>this.maxLength){
					// this.content = oldVal //输入最大字数后不能再输入
					this.onSubmit = false
				}else{
					this.onSubmit = true
				}
			}
		},
		methods:{
			add(){ //添加
				
				if(this.name.trim()==''){ //非空判断
					alert('请输入用户名')
					return
				}else if(this.content.trim()==''){
					alert('请输入内容')
					return
				}
				
				if(this.userLength>this.maxLength){ //字数超出提示
					alert('你输入的字数已超过最大限制！')
					return
				}
			
				this.list.push({
					name:this.name,
					content:this.content,
					time:new Date().getTime(),
					star:0
				})
				this.name = '' //提交后清空用户名
				this.content = '' //提交后清空内容
				
				this.save()//本地保存
			},
			del(item,index){ //删除
				let rel = window.confirm(`确定要删除${item.name}的留言吗？`)
				if(rel){
					this.list.splice(index,1)
					this.save()//本地保存
				}
			},
			praise(item){ //点赞
				item.star++
				this.save()//本地保存
			},
			save(){ //本地保存
				localStorage.liuyan = JSON.stringify(this.list)
			}
			
		},
		filters: { //过滤时间
			TimeFilter(time) {
				let oldDate = new Date(time)
				let newDate = new Date()
				var dayNum = "";
				var getTime = (newDate.getTime() - oldDate.getTime()) / 1000;
				
				if (getTime < 60 * 5) {
					dayNum = "刚刚";
				} else if (getTime >= 60 * 5 && getTime < 60 * 60) {
					dayNum = parseInt(getTime / 60) + "分钟前";
				} else if (getTime >= 3600 && getTime < 3600 * 24) {
					dayNum = parseInt(getTime / 3600) + "小时前";
				} else if (getTime >= 3600 * 24 && getTime < 3600 * 24 * 30) {
					dayNum = parseInt(getTime / 3600 / 24) + "天前";
				} else if (getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12) {
					dayNum = parseInt(getTime / 3600 / 24 / 30) + "个月前";
				} else if (time >= 3600 * 24 * 30 * 12) {
					dayNum = parseInt(getTime / 3600 / 24 / 30 / 12) + "年前";
				}
				
				let year = oldDate.getFullYear();
				let month = oldDate.getMonth() + 1;
				let day = oldDate.getDate();
				let hour = oldDate.getHours();
				let minute = oldDate.getMinutes();
				let second = oldDate.getSeconds();
				return dayNum + " " + year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}
		}
		
	}
</script>

<style scoped="scoped">
	.ly-p1{
		display: flex;
		justify-content: space-between;
	}
	.praise:hover{
		color: red;
		cursor: pointer;
	}
	.text-color{
		color: red;
	}
</style>