@mas.io/mas-comment v0.1.3

安装

tnpm install --save @alipay/mas-comment

组件介绍

行业小程序comment组件，ETC评论功能抽离。

• 默认渲染data列表中评论属性，亦支持传入渲染方法（作用域插槽renderItem，slot-scope暴露列表的item和index参数）
• 亦支持当作容器使用，传入默认插槽时body部分可自定义渲染

参数说明

在小程序中使用

在 page.json 文件中添加组件依赖

{
  "usingComponents": {
    "mas-comment": "@alipay/mas-comment/es/index"
  }
}

调用方式

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<mas-comment data="{{data}}" containerClassName="comment" onGotoDetail="onGotoDetail">
  <!-- <view>body</view> -->
  <!-- <view slot="renderItem" slot-scope="props">{{props.index}}</view> -->
</mas-comment>

在 page.js 中配置mas-comment组件相关属性

Page({
  data: {
    data: [
      {
        "id": 1246,
        "praiseCount": 0,
        "answerContent": "来看看快快乐乐",
        "answerTime": '2019-09-03',
        "answerImage": [
          {
            "djangoId": "F1XF4oYkSEyA-UPvxdXe7QAAACMAARED",
            "isCover": 0,
            "sourceUrl": "http://mmtcdp.stable.alipay.net:443/afts/img/F1XF4oYkSEyA-UPvxdXe7QAAACMAARED/original?bz=mm_other&tid=afts_traceId",
            "height": 0,
            "width": 0,
            "targetUrl": "http://mmtcdp.stable.alipay.net:443/afts/img/F1XF4oYkSEyA-UPvxdXe7QAAACMAARED/original?bz=mm_other&tid=afts_traceId"
          }
        ],
        "userId": "2088302651641345",
        "scheme": "http://render-dev.site.alipay.net/p/s/lifePages/www/answerDetail.html?enableWK=YES&answerId=QA_A_20190902000031916&SourceId=B459&LinkSource=normal&spmab=a89.b11404&scm=6.matrix.answer.-.-.-.-.BC_TP_20190820000012296.QA_A_20190902000031916.-.B459.-.-.-&TopicId=BC_TP_20190820000012296",
        "questionId": "QA_Q_20190806000020395",
        "scm": "6.matrix.answer.-.-.-.-.BC_TP_20190820000012296.QA_A_20190902000031916.-.B459.-.-.-",
        "userInfoVO": {
          "userName": "匿名",
          "userId": "2088302651641345",
          "userType": 0
        },
        "answerId": "QA_A_20190902000031916",
        "status": 9990
      }
    ]
  },
  onLoad() { },
  onGotoDetail(item){
    console.log(item)
  }
});

样式覆盖推荐方式说明

可以通过设置容器类名containerClassName来增加内部元素的样式优先级，达到样式覆盖的目的例如

.comment{
  .mas-comment-title{

  }
  .mas-comment-body{

  }
  .mas-comment-more{

  }
}

Badges