【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。

主要功能

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

在线浏览

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、属性

属性名	类型	描述
`placeholder`	String	默认的文字提示。
`if_not_logined`	String	用户是否没有登录（未登录强制验证）。
`emoji_list`	Array	颜文字列表。
`verify_once`	Boolean	验证码是否只验证一次。
`comment_text`	String	评论内容。
`comment_name`	String	评论昵称。

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站的设计(>_>)

【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。相关推荐

基于vue简单封装的iframe插件，可修改样式，隐藏滚动条
最近有空,就抽空把以前做过的公司业务组件慢慢抽离出来做成插件,也算是对近年来的技术方面做一个总结吧. 今天要写的是一个用vue-jsx封装的iframe插件,可修改iframe中的样式,隐藏滚动条,默 ...
基于 Vue BootStrap的迷你Chrome插件
代码地址如下: http://www.demodashi.com/demo/14306.html 安装安装 Visual Studio Code 和Chrome, 自行翻墙详细安装这里略过安装包 ...
vue-select-tu--一款基于vue的多元图形选择插件
vue-select-tu 一款基于vue的多元图形选择插件 Table of Contents Security Install Usage Maintainers Contributing Lic ...
tiptap - 基于 vue 的优雅流畅的开源富文本编辑器
一款专为 vue.js 打造,设计优雅,体验流畅舒服的现代富文本编辑器. 关于 Tiptap Tiptap 是一款专为 vue 打造的简洁明快的富文本编辑器,通过简单的设置能为用户提供多种优秀的文字编 ...
啤酒与尿布，咩叔原创基于图论简单到爆的实时关联性算法
整天说数据库有点腻歪,今天换个话题,讲讲关联性算法.本文首先简单介绍一下经典的apriori及其改进算法FP Growth,最后介绍一下当年咩叔写论文时候琢磨出的一个利用图论实现的在线实时计算的&qu ...
【原创】vue中使用CKEditor5引入插件ckeditor-duplicated-modules报错处理
在vue中使用了ckeditor5后,收到如下图的反馈: 起初以为是小问题,像其他富文本一样加几个属性参数就有了,但是我发现我错了,错的离谱.那些参数加上去没有任何效果,后来查找下才知道是要下载插件. ...
java爬取网易云歌单_[原创]基于Java网易云音乐评论抓取~【悠着点玩啊~】
本帖最后由 wushaominkk 于 2018-3-20 10:40 编辑一般我们爬虫都是采用Python,自己闲的无聊就有Java编写一个简单的网易云音乐评论的抓取,这个仅仅是我开发的一个小小调 ...
基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果,所以我在这做了一个回到顶部的插件. 首先,我们先在这说明一下,实现回到顶部的效果所要满足的要求为:要实现回到顶部效果的盒子必须出现横向滚动条. 子组件如下所示: 原理 ...
一款基于VUE的动态化弹出层插件
public-layer 官网 link. 这是一个基于 vue 的动态弹框插件它对标的是layer.js,和layer不同的是: 1.它零依赖不需要Jquery支持 2.它支持vue,却不限于vu ...

【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。

主要功能

在线浏览

1、用户已登录

2、用户未登录

使用方法

文档

1、属性

2、方法

Github地址

说明

【原创】基于vue。简单、优雅的评论插件（包含颜文字表情、滑动验证）。相关推荐

最新文章

热门文章