feat: 评论组件

src/packages/__VUE/comment/components/CmtBottom.vue

@@ -9,10 +9,11 @@
         <view :class="['nut-comment-bottom__cpx-item', `nut-comment-bottom__cpx-item--${name}`]" @click="operate(name)">
           <template v-if="name != 'more'">
             <span>{{ info[name] }}</span>
-            <nut-icon :name="name == 'like' ? 'fabulous' : 'comment'"></nut-icon>
+            <Fabulous v-if="name == 'like'"></Fabulous>
+            <Comment v-else></Comment>
           </template>
           <template v-if="name == 'more'">
-            <nut-icon name="more-x"></nut-icon>
+            <MoreX></MoreX>
             <view class="nut-comment-bottom__cpx-item-popover" v-if="showPopver" @click="operate('popover')">{{
               translate('complaintsText')
             }}</view>
@@ -24,9 +25,9 @@
 </template>
 <script lang="ts">
 import { ref, watch, onMounted, PropType } from 'vue';
-
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('comment-bottom');
+import { Fabulous, Comment, MoreX } from '@nutui/icons-vue';
 
 export default create({
   props: {
@@ -44,9 +45,8 @@ export default create({
       default: ['replay', 'like', 'more']
     }
   },
-  components: {},
+  components: { Fabulous, Comment, MoreX },
   emits: ['clickOperate', 'handleClick'],
-
   setup(props, { emit }) {
     const showPopver = ref(false);
 

src/packages/__VUE/comment/components/CmtImages.vue

@@ -24,7 +24,7 @@
           v-if="type == 'multi' && totalImages.length > 9 && videos.length + index > 7"
         >
           <span>共 {{ totalImages.length }} 张</span>
-          <nut-icon name="right" size="12"></nut-icon>
+          <Right style="width: 12px"></Right>
         </view>
       </view>
     </template>
@@ -35,6 +35,7 @@ import { ref, watch, onMounted, PropType } from 'vue';
 
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('comment-images');
+import { Right } from '@nutui/icons-vue';
 
 interface VideosType {
   id: number | string;
@@ -61,7 +62,7 @@ export default create({
       default: () => []
     }
   },
-  components: {},
+  components: { Right },
   emits: ['click', 'clickImages'],
 
   setup(props, { emit }) {

src/packages/__VUE/comment/demo.vue

@@ -66,7 +66,7 @@ import { onMounted, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const { createDemo, translate } = createComponent('comment');
-
+import { Dongdong } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -85,11 +85,12 @@ const initTranslate = () =>
 
 export default createDemo({
   props: {},
+  components: { Dongdong },
   setup() {
     initTranslate();
     let cmt = ref({});
     const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
+      return '<Dongdong color="#fa2c19">';
     };
 
     const handleclick = (info: any) => {
@@ -104,6 +105,8 @@ export default createDemo({
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')
         .then((response) => response.json())
         .then((res) => {
+          res.Comment.info.avatar =
+            'https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png';
           cmt.value = res.Comment;
         }) //执行结果是 resolve就调用then方法
         .catch((err) => console.log('Oh, error', err)); //执行结果是 reject就调用catch方法

src/packages/__VUE/comment/doc.en-US.md

@@ -10,13 +10,12 @@ Used to display the comment list
 
 import { createApp } from 'vue';
 // vue
-import { Comment,Icon,Rate } from '@nutui/nutui';
+import { Comment,Rate } from '@nutui/nutui';
 // taro
-import { Comment,Icon,Rate } from '@nutui/nutui-taro';
+import { Comment,Rate } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Comment);
-app.use(Icon);
 app.use(Rate);
 
 ```
@@ -47,11 +46,12 @@ By default, images of reviews for individual items are displayed in a single sli
 </template>
 <script>
 import { reactive, ref,onMounted } from 'vue';
+import { Dongdong } from '@nutui/icons-vue';
 export default {
   setup() {
     let cmt = ref({});
     const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
+      return '<Dongdong/>';
     };
     onMounted(()=>{
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')

src/packages/__VUE/comment/doc.md

@@ -10,13 +10,12 @@
 
 import { createApp } from 'vue';
 // vue
-import { Comment,Icon,Rate } from '@nutui/nutui';
+import { Comment,Rate } from '@nutui/nutui';
 // taro
-import { Comment,Icon,Rate } from '@nutui/nutui-taro';
+import { Comment,Rate } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Comment);
-app.use(Icon);
 app.use(Rate);
 
 ```
@@ -47,11 +46,12 @@ app.use(Rate);
 </template>
 <script>
 import { reactive, ref,onMounted } from 'vue';
+import { Dongdong } from '@nutui/icons-vue';
 export default {
   setup() {
     let cmt = ref({});
     const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
+      return '<Dongdong/>';
     };
     onMounted(()=>{
       fetch('//storage.360buyimg.com/nutui/3x/comment_data.json')

src/packages/__VUE/comment/index.scss

@@ -255,14 +255,12 @@
   &__follow {
     &-title {
       position: relative;
-      // display: flex;
-      // align-items: center;
       font-size: 14px;
       font-weight: bold;
       color: $black;
       padding-left: 8px;
 
-      i {
+      svg {
         position: absolute;
         left: 0;
         top: 13%;

src/packages/__VUE/comment/index.vue

@@ -19,13 +19,11 @@
     <comment-images :images="images" :videos="videos" :type="imagesRows" @clickImages="clickImages"></comment-images>
 
     <view class="nut-comment__follow" v-if="follow && follow.days > 0" @click="handleClick">
-      <view class="nut-comment__follow-title"
-        ><nut-icon size="14" name="joy-smile" />{{ translate('additionalReview', follow.days) }}</view
-      >
+      <view class="nut-comment__follow-title">{{ translate('additionalReview', follow.days) }}</view>
       <view class="nut-comment__follow-com">{{ follow.content }}</view>
       <view class="nut-comment__follow-img" v-if="follow.images && follow.images.length > 0"
-        >{{ translate('additionalImages', follow.images.length) }} <nut-icon size="12" name="right"
-      /></view>
+        >{{ translate('additionalImages', follow.images.length) }} <Right width="12px"></Right
+      ></view>
     </view>
 
     <comment-bottom
@@ -43,6 +41,7 @@
 import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('comment');
+import { JoySmile, Right } from '@nutui/icons-vue';
 
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
@@ -108,7 +107,9 @@ export default create({
   components: {
     CommentHeader,
     CommentImages,
-    CommentBottom
+    CommentBottom,
+    Right,
+    JoySmile
   },
   emits: ['click', 'clickImages', 'clickOperate'],