ha-comment
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
npm run lint
See Configuration Reference.
//版本1.3.4为增加更多表情选择。后续更新会根据实际业务需要做迭代；
npm install ha-comment@1.3.7
import HaComment from 'ha-comment';
Vue.use(HaComment)
//组件配置说明：
:total="total"//总条数
:img="img" //发表评论的头像
:list="treeList" //数据
:love="true" //点赞功能
:isonlysecond="true" //是否开启，true二级树展示，和当前抖音，知乎展示一样。 false为多级树展示。数据结构会有所改变
user="陈雨" //当前用户
@operate="handleOperate" //操作后调用接口处理逻辑
<script>
//此组件为评论组件！ 以下为模拟数据，及回调方法处理逻辑，可直接回调中接口请求加载！！！！！！
const _ = require('lodash')
export default {
data () {
return {
message: '',
img: require('@/assets/img/icon/avtar.png'),
treeList: [
{
userName: '豆吻国',
imgUrl: require('@/img/avtar.png'),
message: '很好，很good very，你信吗',
placeholder: '回复豆吻国',
inputContent: '',
id: '89uifuids_6767',
pid: -1,
hour: '1小时前',
likeList: [ '陈雨', '陈冲冲', '曾程' ],
children: []
},
],
pparentid:''
};
},
computed:{
total(){
const total= this.handleTotal(this.treeList);
return total
}
},
methods: {
/* pdf,word组件渲染完毕 */
rendered() {
// this.loading = false;
},
/* pdf,word组件渲染出错 */
HandlError() {
// this.loading = false;
},
uuidv4() {
let d = new Date().getTime(); //Timestamp
let d2 = (performance && performance.now && (performance.now()*1000)) || 0;
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16; //random number between 0 and 16
if(d > 0) { //Use timestamp until depleted
r = (d + r)%16 | 0;
d = Math.floor(d/16);
} else { //Use microseconds since page-load if supported
r = (d2 + r)%16 | 0;
d2 = Math.floor(d2/16);
}
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
},
handleTotal(tlist){
const arr1=[]
if (tlist && Array.isArray(tlist)) {
const forFn = (arr) => {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
arr1.push(item)
if (item && Array.isArray(item.children)) {
forFn(item.children);
}
}
};
forFn(tlist);
}
return arr1.length
},
handRefreshList (tlist) {
if (tlist && Array.isArray(tlist)) {
const forFn = (arr) => {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
item.inputContent = '';
item.commentItemVisible = false;
item.Recall = false;
if (item && Array.isArray(item.children)) {
forFn(item.children);
}
}
};
forFn(tlist);
}
return tlist
},
handleTreeFind (tlist, id) {
if (tlist && Array.isArray(tlist)) {
const forFn = (arr) => {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (item.id == id) {
if (item.count && Array.isArray(item.children) && item.children.length == 0) {
item.count = 0
}
}
if (item && Array.isArray(item.children)) {
forFn(item.children);
}
}
};
forFn(tlist);
}
return tlist
},
handleDeleteTreeList (tlist, id) { // 删除评论，数据重组
if (tlist && Array.isArray(tlist)) {
const forFn = (arr) => {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (item.id == id) {
arr.splice(i--, 1)
if (arr.length > 0) {
arr[arr.length - 1].showMuch = false;
}
return false;
}
if (item && Array.isArray(item.children)) {
forFn(item.children);
}
}
};
forFn(tlist);
}
return tlist
},
handleInsertTreeList (tlist, id, childs) { // 插入数据
if (tlist && Array.isArray(tlist)) {
const forFn = (arr) => {
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
if (item.id == id) {
item.children.push(...childs)
return false;
}
if (item && Array.isArray(item.children)) {
forFn(item.children);
}
}
};
forFn(tlist);
}
return tlist
},
handleInsertMiddle(list,item,Index){
list.splice(Index+1, 0, item);
return this.treeList
},
handleHasOnlysecond(item){//二级树展示
if (!item.isHead && item.type == 'add') { // 新增子级评论
if(item.pid==-1){
this.pparentid=item.id;
}else{
this.pparentid= item.pparentid
}
const uuid = this.uuidv4()
const o = {
userName: '曾程',
imgUrl: require('@/img/avtar.png'),
message: item.inputContent,
placeholder: '回复曾程',
parentName: item.userName,
inputContent: '',
id: 'sive' + uuid,
pid: item.id,
hour: '2小时前',
pparentid:this.pparentid,
children: [],
likeList: [],
count: 1
}
if (item.pid==-1&& Array.isArray(item.children)) {
item.children.unshift(o)
}else if(item.pid!=-1){
const Index= this.treeList.findIndex(val=>val.id==this.pparentid);
if(this.treeList[Index]&&Array.isArray(this.treeList[Index].children)){
if(this.treeList[Index].children.length==0){
this.treeList[Index].children.push(o);
this.treeList=_.cloneDeep(this.treeList);
}else{
const cout=this.treeList[Index].children.findIndex(val=>val.id==item.id)
this.treeList=this.handleInsertMiddle(this.treeList[Index].children,o,cout);//插入数据
}
}
}
this.$check.flag = true;// 接口加载时候使用设为true即可
}
if (item.type == 'much') { // 加载更多
const uuid = this.uuidv4()
const inputObj = {
userName: '陈雨',
imgUrl: require('@/img/avtar.png'),
message: 'fsdjfksdlfjs',
inputContent: '',
placeholder: '回复陈雨',
parentName: item.pid != -1 ? item.parentName : '',
id: uuid,
pid: item.pid,
pparentid:item.pparentid,
hour: '1分钟前',
children: [],
likeList: []
}
if (item.pid == -1) {
this.treeList.push(inputObj);
}else if(item.pid!=-1){
const Index= this.treeList.findIndex(val=>val.id==item.pparentid);
if(this.treeList[Index]&&Array.isArray(this.treeList[Index].children)){
this.treeList[Index].children.push(inputObj);
this.treeList=_.cloneDeep(this.treeList);
}
}
}
if (item.type == 'display') { // 展开收起
const uuid = this.uuidv4()
if(item.pid==-1){
this.pparentid=item.id;
}
const o = {
userName: '曾程',
imgUrl: require('@/img/avtar.png'),
message: '我很相信你，你是真的good very',
parentName: item.userName,
placeholder: '回复曾程',
inputContent: '',
pparentid:this.pparentid,
id: uuid,
pid: item.id,
hour: '2小时前',
children: [],
likeList: [],
count: 1
}
if (item.pid==-1&& Array.isArray(item.children)&&item.children.length==0) {
item.children.unshift(o)
}
if (item.display) { // 模拟
this.$check.flag = true;// 接口加载时候使用设为true即可
} else {
this.$check.flag = true;// 接口加载时候使用设为true即可
}
}
},
handleNoOnlysecond(item){//非二级树展示
if (!item.isHead && item.type == 'add') { // 新增子级评论
//不开启二级树加载时候
console.log('子级评论')
const uuid = this.uuidv4()
const inputObj = {
userName: '陈雨',
imgUrl: require('@/img/avtar.png'),
message: item.inputContent,
parentName: item.userName,
inputContent: '',
placeholder: '回复陈雨',
id: uuid,
pid: item.id,
hour: '1分钟前',
children: [],
likeList: []
}
const o = {
userName: '曾程',
imgUrl: require('@/img/avtar.png'),
message: '我很相信你，你是真的good very',
placeholder: '回复曾程',
parentName: item.userName,
inputContent: '',
id: 'sive' + uuid,
pid: item.id,
hour: '2小时前',
children: [],
likeList: [],
count: 1
}
// 存在count>0 ,children==0 时候加载数据
if (item.count && (Array.isArray(item.children) && item.children.length == 0)) { // 表示之前有一条数据
item.children.push(o)
}
if (Array.isArray(item.children)) {
item.children.unshift(inputObj)
}
this.$check.flag = true;// 接口加载时候使用设为true即可
}
if (item.type == 'much') { // 加载更多
const uuid = this.uuidv4()
const inputObj = {
userName: '陈雨',
imgUrl: require('@/img/avtar.png'),
message: 'fsdjfksdlfjs',
inputContent: '',
placeholder: '回复陈雨',
parentName: item.pid != -1 ? item.parentName : '',
id: uuid,
pid: item.pid,
pparentid:item.pparentid,
hour: '1分钟前',
children: [],
likeList: []
}
if (item.pid == -1) {
this.treeList.push(inputObj);
} else {
// 为children寻找同级
this.handleInsertTreeList(this.treeList, item.pid, [
inputObj
])
}
}
if (item.type == 'display') { // 展开收起
const uuid = this.uuidv4()
if(item.pid==-1){
this.pparentid=item.id;
}
const o = {
userName: '曾程',
imgUrl: require('@/img/avtar.png'),
message: '我很相信你，你是真的good very',
parentName: item.userName,
placeholder: '回复曾程',
inputContent: '',
pparentid:this.pparentid,
id: uuid,
pid: item.id,
hour: '2小时前',
children: [],
likeList: [],
count: 1
}
// 存在count>0 ,children==0 时候加载数据
if (item.count && (Array.isArray(item.children) && item.children.length == 0)) {
item.children.push(o)
}
if (item.display) { // 模拟
this.$check.flag = true;// 接口加载时候使用设为true即可
} else {
this.$check.flag = true;// 接口加载时候使用设为true即可
}
}
},
handleOperate (item) {
this.$check.flag = false;// 接口加载时候使用设为true即可
if (item.isHead && item.type == 'add') { // 首级发表评论
console.log('首级发表评论')
const uuid = this.uuidv4()
const inputObj = {
userName: '陈雨',
imgUrl: require('@/img/avtar.png'),
message: item.message,
inputContent: '',
placeholder: '回复陈雨',
id: uuid,
pid: item.pid,
hour: '1分钟前',
children: [],
likeList: []
}
this.treeList.unshift(inputObj);
this.$check.flag = true;// 接口加载时候使用设为true即可
}
if (!item.isHead && item.type == 'add') { // 新增子级评论
if(this.$check.isonlysecond){//如果开启只能为二级树
this.handleHasOnlysecond(item)
}else{//不开启二级树加载时候
this.handleNoOnlysecond(item)
}
}
if (item.type == 'refresh') { // 刷新评论
this.treeList= this.handRefreshList(this.treeList);
this.$check.flag = true;
console.log('刷新评论')
}
if (item.type == 'delete') { // 删评论
const pid = item.pid;
this.handleDeleteTreeList(this.treeList, item.id);
this.handleTreeFind(this.treeList, pid);
this.$check.flag = true;// 接口加载时候使用设为true即可
}
if (item.type == 'much') { // 加载更多
if(!this.$check.isonlysecond){//存在多级加载
this.handleNoOnlysecond(item)
}else{//只存在二级
this.handleHasOnlysecond(item)
}
this.$check.flag = true;// 接口加载时候使用设为true即可
}
if (item.type == 'display') { // 展开收起
if(!this.$check.isonlysecond) {//可以多级
this.handleNoOnlysecond(item)
}else{//只存在二级
this.handleHasOnlysecond(item)
}
console.log(item.display + 'display')
}
if (item.type == 'like') { // 点赞操作
this.$check.flag = true;// 接口加载时候使用设为true即可
}
}
}
};
</script>