devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp封装一个文章评论输入组件，可发表情、图片评论，Vue3+Ts语法！可随意拓展写法！_vue实现评论实现表情包

作者：菜鸟追梦旅行 | 2024-06-07 02:02:25

赞

踩

vue实现评论实现表情包

前言

最近在开发一款微信小程序，用的Vue3+Ts+uni-app，目前已完成基本的文章发布、文章列表、文章详情、个人中心、首页展示、文章评论点赞等功能，不定期分享开发中的一些东西，希望能帮助到大家！

需求

类似于头条、知乎交流社区类的软件文章页面，可对该进行评论、点赞收藏，可发布表情评论和图片评论。

效果图如下

实现思路

文章最底部固定静态评论框展示以及右侧点赞收藏按钮，静态的评论框点击打开评论输入框，输入框使用textarea，自动聚焦，聚焦式自动弹出键盘，并且键盘自动把输入框顶上去，避免遮挡输入框！

最开始我想用uni-app中的popup组件，但是在popou中嵌入textarea时无法自动聚焦，就很尴尬，索性自己写一个。背景固定一个mask蒙层，评论框固定在页面最底部，层级比蒙层高。表情包按钮和图片按钮放在底部，表情按钮触发时隐藏键盘，并弹出表情选择列表，点击蒙层以及发布评论成功时则关闭评论输入框。

大致是这么一个实现的思路。

代码实现：如下

组件：BottomComment.vue
  1. // 组件：底部固定静态评论显示框，赞藏方法不在这儿展示，根据自己需求修改
  2. <template>
  3.   <view class="bottom-comment">
  4.     <!-- 左边静态输入框 -->
  5.     <view class="disableinput" @click.stop="emit('articleCommentInputFocus', 1)">
  6.       良言一句三冬暖，恶语伤人六月寒。
  7.     </view>
  8.     <!-- 文章总评论 -->
  9.     <view class="bottom-item">
  10.       <text class="item-icon icon-a-44tubiao-112"></text>
  11.       <text class="item-text">{{ 20 }}</text>
  12.     </view>
  13.     <!-- 文章总点赞 -->
  14.     <view class="bottom-item">
  15.       <text class="item-icon"></text>
  16.       <text class="item-text">{{ 30 }}</text>
  17.     </view>
  18.     <!-- 文章总收藏 -->
  19.     <view class="bottom-item">
  20.       <text class="item-icon"></text>
  21.       <text class="item-text">{{ 10 }}</text>
  22.     </view>
  23.   </view>
  24. </template>
  25.  
  26. <script setup lang="ts">
  27.  
  28. const emit = defineEmits([
  29.   'articleCommentInputFocus'
  30. ])
  31. </script>
  32.  
  33. <style lang="scss">
  34. .bottom-comment {
  35.   position: fixed;
  36.   left: 0;
  37.   bottom: 0;
  38.   z-index: 80;
  39.   width: 100vw;
  40.   min-height: 8vh;
  41.   background-color: #fff;
  42.   box-shadow: 0 0 8rpx 4rpx #f7f7f7;
  43.   display: flex;
  44.   align-items: center;
  45.   justify-content: space-between;
  46.   padding: 0 28rpx;
  47.  
  48.   .disableinput {
  49.     width: 54%;
  50.     height: 70rpx;
  51.     background-color: #f6f6f6;
  52.     border-radius: 35rpx;
  53.     margin-right: 30rpx;
  54.     font-size: 20rpx;
  55.     color: #767676;
  56.     padding-left: 16rpx;
  57.     display: flex;
  58.     align-items: center;
  59.   }
  60.  
  61.   .bottom-item {
  62.     flex: 1;
  63.     display: flex;
  64.     margin-right: 10rpx;
  65.     align-items: center;
  66.  
  67.     .item-icon {
  68.       font-size: 38rpx;
  69.       padding-right: 10rpx;
  70.     }
  71.  
  72.     .isUp {
  73.       color: $uni-color-primary;
  74.     }
  75.  
  76.     .item-text {
  77.       font-size: 30rpx;
  78.     }
  79.   }
  80. }
  81. </style>
组件：TextareaComment
  1. <template>
  2. <!-- 蒙层 -->
  3.  <view clas="c-mask" v-if="showInputPop" class="c-mask" @click.stop="emit('closeInputPop')"
  4.     @touchmove.stop.prevent="emit('disableScroll')">
  5.  </view>
  6.    <view class="popup-comment" v-if="showInputPop">
  7.     <view class="comment-input-wrap">
  8.       <view class="comment-textarea-box" @touchmove.stop.prevent="emit('disableScroll')">
  9.         <textarea v-model="commentParams.content" class="comment-textarea" :maxlength="600" :focus="replyFocus"
  10.           :placeholder="customPlaceholder" :show-confirm-bar="false" @focus="commentInputFocus" @blur="commentInputBlur"
  11.           :adjust-position="true" :cursor-spacing="400" :cursor="cursorIndex" @input="inputFocusChange" :fixed="true" />
  12.         <view class="limit">{{ commentParams.content?.length || 0 }} / 600</view>
  13.       </view>
  14.       <view class="image-list">
  15.         <view class="image-item" v-for="(item, index) in commentImages" :key="index">
  16.           <image class="image" :src="item" mode="aspectFill" @click.stop="previewCommentImage(item)"></image>
  17.           <uni-icons class="icon-close" @click.stop="deleteOneCommentImage(index)" type="clear" size="20"
  18.             color="#red"></uni-icons>
  19.         </view>
  20.       </view>
  21.       <view class="relase-btn">
  22.         <!-- 表情 和 图片 -->
  23.         <view class="emoji-image">
  24.           <!-- 选择上传图片 -->
  25.           <view class="as-image icon-a-44tubiao-81" hover-class="checkActive" :hover-stay-time="100"
  26.             @click="selectMediaImage"></view>
  27.           <!-- 表情 -->
  28.           <view class="emoji icon-biaoqing-xue" hover-class="checkActive" :hover-stay-time="100" @click="openEmoji"
  29.             v-if="!showEmoji"></view>
  30.           <!-- 键盘 -->
  31.           <view v-else class="keyboard icon-a-44tubiao-155" hover-class="checkActive" :hover-stay-time="100"
  32.             @click="openKeyboard">
  33.           </view>
  34.         </view>
  35.         <!-- 发布 -->
  36.         <view class="relase" @click.stop="commentCommit" hover-class="button-hover" :hover-stay-time="100">发布</view>
  37.       </view>
  38.       <list class="emoji-data" :show-scrollbar="false" v-if="showEmoji">
  39.         <view v-for="(item, index) in emojiDataList" :key="index" class="emoji-item" hover-class="checkActive"
  40.           :hover-stay-time="100" @click.stop="tuchCurrentEmoji(item)">
  41.           <text class="emoj_conn">{{ item }}</text>
  42.         </view>
  43.       </list>
  44.     </view>
  45.   </view>
  46. </template>
  47.  
  48. <script setup lang="ts">
  49. import { ref, nextTick } from 'vue'
  50. import { uploadImages } from '@/utils/public'
  51.  
  52. const props = defineProps({
  53.   showInputPop: {
  54.     type: Boolean,
  55.     default: false,
  56.   },
  57. })
  58.  
  59. const emit = defineEmits([
  60.   'closeInputPop',
  61.   'disableScroll',
  62.   'update:showInputPop',
  63. ])
  64.  
  65. // 新增评论入参
  66. const commentParams = ref({ content: '' } as any)
  67.  
  68. // 评论上传的图片
  69. const commentImages = ref<string[]>([])
  70.  
  71. // 点击回复控制textarea的聚焦
  72. const replyFocus = ref(false)
  73. // 默认的提示内容
  74. const customPlaceholder = ref<string>('输入评论')
  75. // 是否显示表情包
  76. const showEmoji = ref(false)
  77. // 表情包列表
  78. const emojiDataList = ref([
  79.   '
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/683533
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。