Bläddra i källkod

开发快捷评论组件

bayi 2 år sedan
förälder
incheckning
fc8a0052e8

+ 7 - 0
components/comment/index.js

@@ -21,6 +21,7 @@ Component({
    */
   data: {
     show: false,
+    quickShow: true,
     commentId: '',
     totalSize: 0,
     list: [],
@@ -56,6 +57,7 @@ Component({
     close() {
       this.setData({
         show: false,
+        quickShow:true,
         commentId: '',
         totalSize: 0,
         list: [],
@@ -66,6 +68,11 @@ Component({
         ifGetFocus: false,
       })
     },
+    quickClose() {
+      this.setData({
+        quickShow: false
+      })
+    },
     async getComment() {
       let params = {
         columnId: this.data.columnId,

+ 3 - 2
components/comment/index.less

@@ -140,8 +140,9 @@
 
       .close {
         text-align: right;
-        font-size: 60rpx;
-        padding: 0rpx 20rpx;
+        font-size: 54rpx;
+        line-height: 54rpx;
+        padding: 0rpx 20rpx 10rpx;
       }
 
       .quickTop {

+ 3 - 3
components/comment/index.wxml

@@ -1,6 +1,6 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="commentBox" wx:if="{{show}}">
-<!-- <view class="commentBox"> -->
+  <!-- <view class="commentBox"> -->
   <view class="commentBg" catchtap="close" catchtouchmove="true"></view>
   <view class="comment {{tabBarPadding?'seat2':''}}" animation="{{animationData}}">
     <view class="header">
@@ -41,8 +41,8 @@
       </view>
     </view>
     <!-- 快捷回复 -->
-    <view class="quick">
-      <view class="close" catchtap="close">×</view>
+    <view class="quick" wx:if="{{quickShow}}">
+      <view class="close" catchtap="quickClose">×</view>
       <view class="quickTop">
         <view class="left">留下你的赞美,鼓励一下。</view>
         <view class="right">试试下面的快捷回复吧~</view>

+ 3 - 2
components/comment/index.wxss

@@ -120,8 +120,9 @@
 }
 .commentBox .comment .quick .close {
   text-align: right;
-  font-size: 60rpx;
-  padding: 0rpx 20rpx;
+  font-size: 54rpx;
+  line-height: 54rpx;
+  padding: 0rpx 20rpx 10rpx;
 }
 .commentBox .comment .quick .quickTop {
   display: flex;