主要功能

  1. 支持颜文字emoji表情(╮( ̄▽ ̄)╭)
  2. 支持滑动验证。
  3. 评论为空不允许提交。
  4. 封装了几个常用的方法。

在线浏览

1、用户已登录

2、用户未登录

使用方法

<template>
    <b_comment 
		ref="my_comment" 
		:placeholder="placeholder"
		:if_not_logined="if_not_logined"
        :emoji_list="emoji_list"
		:verify_once="verify_once"
		@submit_click="submit_click"
	/>
</template>

<script>
import b_comment from './vue_comment/b_comment.vue'
export default {
  name: "HelloWorld",
	components: {
		'b_comment':b_comment,
	},
  data() {
    return {
		placeholder: "想说点什么?",//默认文字提示。
        if_not_logined: true,//用户是否没有登录。
	    //颜文字列表。
		emoji_list: ['(⌒▽⌒)', '( ̄▽ ̄)', '(=・ω・=)'...],
		verify_once: false,//未登录时,每次评论都需输入验证码。
    };
  },
  computed:{
	  comment_text(){//获取子组件的评论内容。
		  return this.$refs.my_comment.insert_comment.comment_text;
	  },
	  comment_name(){//获取子组件的评论昵称。
		  return this.$refs.my_comment.insert_comment.comment_name;
	  }
  },
  methods:{
	  //点击评论按钮后,触发的事件。
	  //(在这之前会先检验是否为空、是否输入验证码)
	  submit_click(){
		  console.log("用户输入的评论内容是:" + this.comment_text);
		  if(this.comment_name !== ""){
		  		console.log("用户输入的昵称是:" + this.comment_name);
		  }

		  //你可以在这里验证用户输入的格式。
		  //若格式错误可调用此函数:
		  	//this.$refs.my_comment.err_submitFn("格式错误",1500)

		  //你可以在这儿请求AJAX
		  //失败回调:
			// this.$refs.my_comment.err_submitFn("评论失败",1500)
		  //成功回调
		    this.$refs.my_comment.success_submit("评论成功",1500)
	  }
  },
};
</script>

文档

1、属性

属性名类型描述
placeholderString默认的文字提示。
if_not_loginedString用户是否没有登录(未登录强制验证)。
emoji_listArray颜文字列表。
verify_onceBoolean验证码是否只验证一次。
comment_textString评论内容。
comment_nameString评论昵称。

2、方法

方法名描述参数列表
submit_click点击评论按钮,触发的函数。-
this.$refs.my_comment.err_submitFn(“评论失败”,1500)调用后,右下角显示错误提示。1.提示内容,string格式。2.显示时间,int格式。
this.$refs.my_comment.success_submit(“评论成功”,1500)调用后,右下角显示提示。并清除已输入内容。根据设置重置验证码组件。同上

Github地址

基于vue。简单、优雅的评论插件

说明

文档 => 优雅,界面 => 简单。
但代码有很多改进的空间。

这是我封装的第一个组件,主要是练练手。
加油以后写出更优雅、强大的代码(=・ω・=)

p.s:有空的话,我会把(同样风格的)评论列表也封装成组件。


设计参考Bilibili。【扶我起来,我还再能抄B站的设计(>_>)

Logo

前往低代码交流专区

更多推荐