ha-comment

1.3.7 • Public • Published

ha-comment

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

discription

//版本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>

Readme

Keywords

none

Package Sidebar

Install

npm i ha-comment

Weekly Downloads

0

Version

1.3.7

License

none

Unpacked Size

263 kB

Total Files

6

Last publish

Collaborators

  • chenha1314520