fix: Address、popover 等组件 icon 问题修改 (#1967)

* fix: 地址icon修改

* fix: 组件icon问题修改

* fix: 地址组件修改

Co-authored-by: yangxiaolu3 <yangxiaolu3@jd.com>

src/packages/__VUE/address/index.taro.vue

@@ -10,12 +10,9 @@
     <view class="nut-address">
       <view class="nut-address__header">
         <view class="nut-address__header-back" @click="switchModule">
-          <nut-icon
-            v-bind="$attrs"
-            :name="backBtnIcon"
-            color="#cccccc"
-            v-show="type == 'exist' && privateType == 'custom' && backBtnIcon"
-          ></nut-icon>
+          <slot name="backIcon">
+            <Left v-show="type == 'exist' && privateType == 'custom'"></Left>
+          </slot>
         </view>
 
         <view class="nut-address__header__title">
@@ -27,7 +24,9 @@
         </view>
 
         <view class="nut-address__header-close" @click="handClose('cross')">
-          <nut-icon v-bind="$attrs" v-if="closeBtnIcon" :name="closeBtnIcon" color="#cccccc" size="18px"></nut-icon>
+          <slot name="closeIcon">
+            <Close color="#cccccc" size="18px"></Close>
+          </slot>
         </view>
       </view>
 
@@ -58,14 +57,8 @@
               @click="nextAreaList(item)"
             >
               <div>
-                <nut-icon
-                  class="region-item-icon"
-                  type="self"
-                  v-bind="$attrs"
-                  :name="selectedIcon"
-                  size="13px"
-                  v-if="selectedRegion[tabIndex]?.id == item.id"
-                ></nut-icon
+                <slot name="icon" v-if="selectedRegion[tabIndex]?.id == item.id">
+                  <Check class="nut-address-select-icon" width="13px"></Check> </slot
                 >{{ item.name }}
               </div>
             </li>
@@ -92,13 +85,14 @@
               :key="index"
               @click="selectedExist(item)"
             >
-              <nut-icon
-                class="exist-item-icon"
-                type="self"
-                v-bind="$attrs"
-                :name="item.selectedAddress ? selectedIcon : defaultIcon"
-                size="13px"
-              ></nut-icon>
+              <slot name="unselectedIcon" v-if="!item.selectedAddress">
+                <Location2 class="nut-address-select-icon" width="13px"></Location2>
+              </slot>
+
+              <slot name="icon" v-if="item.selectedAddress">
+                <Check class="nut-address-select-icon" width="13px"></Check>
+              </slot>
+
               <div class="nut-address__exist-item-info">
                 <div class="nut-address__exist-item-info-top" v-if="item.name && item.phone">
                   <div class="nut-address__exist-item-info-name">{{ item.name }}</div>
@@ -133,11 +127,17 @@ import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.taro.vue';
 import Elevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
+import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
 
 export default create({
   components: {
     [Popup.name]: Popup,
-    [Elevator.name]: Elevator
+    [Elevator.name]: Elevator,
+    Location,
+    Location2,
+    Check,
+    Close,
+    Left
   },
   inheritAttrs: false,
   props: {
@@ -190,26 +190,6 @@ export default create({
       type: String,
       default: ''
     },
-    defaultIcon: {
-      // 地址选择列表前 - 默认的图标
-      type: String,
-      default: 'location2'
-    },
-    selectedIcon: {
-      // 地址选择列表前 - 选中的图标
-      type: String,
-      default: 'Check'
-    },
-    closeBtnIcon: {
-      // 关闭弹框按钮 icon
-      type: String,
-      default: 'circle-close'
-    },
-    backBtnIcon: {
-      // 选择其他地址左上角返回 icon
-      type: String,
-      default: 'left'
-    },
     height: {
       type: [String, Number],
       default: '200px'
@@ -239,9 +219,6 @@ export default create({
     const privateType = ref(props.type);
     const tabIndex = ref(0);
     const tabName = ref(['province', 'city', 'country', 'town']);
-    const tabNameDefault = ref(['']);
-
-    const isCustom2 = computed(() => props.type === 'custom2');
 
     const regionList = computed(() => {
       switch (tabIndex.value) {

src/packages/__VUE/comment/index.taro.vue

@@ -20,12 +20,12 @@
 
     <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" />购买{{ follow.days }}天后追评</view
+        >购买{{ 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"
-        >{{ follow.images.length }} 张追评图片 <nut-icon size="12" name="right"
-      /></view>
+        >{{ follow.images.length }} 张追评图片 <Right width="12px"></Right
+      ></view>
     </view>
 
     <comment-bottom
@@ -43,6 +43,7 @@
 import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('comment');
+import { Right } from '@nutui/icons-vue-taro';
 
 import CommentHeader from './components/CmtHeader.vue';
 import CommentImages from './components/CmtImages.vue';
@@ -108,7 +109,8 @@ export default create({
   components: {
     CommentHeader,
     CommentImages,
-    CommentBottom
+    CommentBottom,
+    Right
   },
   emits: ['click', 'clickImages', 'clickOperate'],
 

src/packages/__VUE/imagepreview/index.taro.vue

@@ -22,8 +22,7 @@
 
     <view class="nut-image-preview-index" v-if="showIndex"> {{ active + 1 }} / {{ images.length }} </view>
     <view class="nut-image-preview-close-icon" @click="onClose" :style="styles" v-if="closeable"
-      ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
-    ></view>
+      ><CircleClose color="#ffffff"></CircleClose></view>
   </nut-popup>
 </template>
 <script lang="ts">
@@ -35,6 +34,7 @@ import Popup from '../popup/index.taro.vue';
 import Swiper from '../swiper/index.taro.vue';
 import SwiperItem from '../swiperitem/index.taro.vue';
 import Taro from '@tarojs/taro';
+import { CircleClose } from '@nutui/icons-vue-taro';
 const { create } = createComponent('image-preview');
 
 export default create({
@@ -93,7 +93,8 @@ export default create({
   components: {
     [Popup.name]: Popup,
     [Swiper.name]: Swiper,
-    [SwiperItem.name]: SwiperItem
+    [SwiperItem.name]: SwiperItem,
+    CircleClose
   },
 
   setup(props, { emit }) {

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

@@ -159,8 +159,8 @@ Customize the content in the slot named content.
     <template #content>
       <div class="self-content">
         <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-          <nut-icon :name="item.name" size="15"></nut-icon>
-        <div class="self-content-desc">{{ item.desc }}</div>
+          <component :is="renderIcon(item.name)"></component>
+          <div class="self-content-desc">{{ item.desc }}</div>
         </div>
       </div>
     </template>
@@ -201,10 +201,16 @@ export default {
         desc: 'option6'
       }
     ]);
+    const renderIcon = (icon: Component, props?: any) => {
+      if (icon) return h(icon, props);
+      return '';
+    };
+
 
     return {
       visible,
       selfContent,
+      renderIcon
     };
   }
 }

src/packages/__VUE/popover/doc.md

@@ -153,8 +153,8 @@ export default {
     <template #content>
       <div class="self-content">
         <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-          <nut-icon :name="item.name" size="15"></nut-icon>
-        <div class="self-content-desc">{{ item.desc }}</div>
+          <component :is="renderIcon(item.name)"></component>
+          <div class="self-content-desc">{{ item.desc }}</div>
         </div>
       </div>
     </template>
@@ -163,7 +163,7 @@ export default {
 
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, ref,Component } from 'vue';
 import { Service,Notice,Location,Category,Scan2,Message,Cart2, My2 } from '@nutui/icons-vue';
 export default {
   setup() {
@@ -196,10 +196,15 @@ export default {
         desc: 'option6'
       }
     ]);
+    const renderIcon = (icon: Component, props?: any) => {
+      if (icon) return h(icon, props);
+      return '';
+    };
 
     return {
       visible,
       selfContent,
+      renderIcon
     };
   }
 }

src/packages/__VUE/popover/doc.taro.md

@@ -153,8 +153,8 @@ export default {
     <template #content>
       <div class="self-content">
         <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-          <nut-icon :name="item.name" size="15"></nut-icon>
-        <div class="self-content-desc">{{ item.desc }}</div>
+          <component :is="renderIcon(item.name)"></component>
+          <div class="self-content-desc">{{ item.desc }}</div>
         </div>
       </div>
     </template>
@@ -196,10 +196,15 @@ export default {
         desc: 'option6'
       }
     ]);
+    const renderIcon = (icon: Component, props?: any) => {
+      if (icon) return h(icon, props);
+      return '';
+    };
 
     return {
       visible,
       selfContent,
+      renderIcon
     };
   }
 }

src/packages/__VUE/popover/index.taro.vue

@@ -34,14 +34,7 @@
           ]"
           @click.stop="chooseItem(item, index)"
         >
-          <slot v-if="item.icon">
-            <nut-icon
-              v-bind="$attrs"
-              class="nut-popover-item-img"
-              :classPrefix="iconPrefix"
-              :name="item.icon"
-            ></nut-icon
-          ></slot>
+          <component v-if="item.icon" :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
           <view class="nut-popover-menu-item-name">{{ item.name }}</view>
         </view>
       </view>
@@ -49,7 +42,8 @@
 
     <view class="nut-popover-content-bg" v-if="showPopup" @touchmove="clickAway" @click="clickAway"></view>
   </view>
-
+  <!-- 用于计算大小 -->
+  <!-- TODO -->
   <div :class="`nut-popover-content nut-popover-content-copy`">
     <view ref="popoverContentRefCopy" :id="'popoverContentRefCopy' + refRandomId" class="nut-popover-content-group">
       <slot name="content"></slot>
@@ -63,20 +57,18 @@
           'nut-popover-menu-taroitem'
         ]"
       >
-        <slot v-if="item.icon">
-          <nut-icon v-bind="$attrs" class="nut-popover-item-img" :classPrefix="iconPrefix" :name="item.icon"></nut-icon
-        ></slot>
+        <component v-if="item.icon" :is="renderIcon(item.icon)" class="nut-popover-item-img"></component>
         <view class="nut-popover-menu-item-name">{{ item.name }}</view>
       </view>
     </view>
   </div>
 </template>
 <script lang="ts">
-import { onMounted, computed, watch, ref, PropType, toRefs, reactive, CSSProperties } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { onMounted, computed, watch, ref, PropType, CSSProperties } from 'vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { componentName, create } = createComponent('popover');
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-import { useRect, rect } from '@/packages/utils/useRect';
+import { rect } from '@/packages/utils/useRect';
 import { isArray } from '@/packages/utils/util';
 import Taro from '@tarojs/taro';
 
@@ -307,7 +299,8 @@ export default create({
       clickAway,
       popoverArrowStyle,
       customStyle,
-      getRootPosition
+      getRootPosition,
+      renderIcon
     };
   }
 });

src/packages/__VUE/pullrefresh/index.vue

@@ -2,12 +2,11 @@
   <div :class="classes" ref="scroller" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
     <div class="nut-pullrefresh-container" :style="getStyle">
       <div class="nut-pullrefresh-container-topbox" :style="getHeightStyle">
-        <nut-icon
-          class="nut-pullrefresh-container-topbox-icon"
-          v-bind="$attrs"
-          v-if="status == 'loading' && loadingIcon && !slots.loading"
-          :name="loadingIcon"
-        ></nut-icon>
+        <Loading
+          class="nut-icon-loading nut-pullrefresh-container-topbox-icon"
+          v-if="status == 'loading' && !slots.loading"
+        ></Loading>
+
         <div class="nut-pullrefresh-container-topbox-text">{{ getPullStatus }}</div>
 
         <slot v-if="status == 'pulling'" name="pulling"></slot>
@@ -27,6 +26,7 @@ import { useTouch } from '@/packages/utils/useTouch';
 import { getScrollTopRoot } from '@/packages/utils/util';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useScrollParent } from '@/packages/utils/useScrollParent';
+import { Loading } from '@nutui/icons-vue';
 
 type PullRefreshStatus = 'normal' | 'loading' | 'loosing' | 'pulling' | 'complete';
 
@@ -36,10 +36,7 @@ export default create({
       type: Boolean,
       default: false
     },
-    loadingIcon: {
-      type: String,
-      default: 'loading'
-    },
+
     pullingTxt: {
       type: String,
       default: translate('pulling')
@@ -73,6 +70,7 @@ export default create({
     }
   },
   emits: ['change', 'refresh', 'update:modelValue'],
+  components: { Loading },
 
   setup(props, { emit, slots }) {
     const touch: any = useTouch();

src/sites/mobile-taro/vue/src/business/pages/comment/index.vue

@@ -6,7 +6,6 @@
         :images="cmt.images"
         :videos="cmt.videos"
         :info="cmt.info"
-        :labels="labels"
         @click="handleclick"
         @clickImages="clickImages"
         :operation="['replay']"
@@ -69,9 +68,6 @@ export default defineComponent({
   props: {},
   setup() {
     let cmt = ref({});
-    const labels = () => {
-      return '<nut-icon name="dongdong" color="#fa2c19"></nut-icon>';
-    };
 
     const handleclick = (info: any) => {
       console.log('进行跳转', info);
@@ -97,7 +93,6 @@ export default defineComponent({
 
     return {
       cmt,
-      labels,
       handleclick,
       clickImages
     };

src/sites/mobile-taro/vue/src/exhibition/pages/popover/index.vue

@@ -45,7 +45,7 @@
       <template #content>
         <div class="self-content">
           <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
-            <nut-icon :name="item.name" size="15"></nut-icon>
+            <component :is="renderIcon(item.name)"></component>
             <div class="self-content-desc">{{ item.desc }}</div>
           </div>
         </div>
@@ -90,7 +90,9 @@
   </div>
 </template>
 <script lang="ts">
-import { reactive, ref, toRefs } from 'vue';
+import { reactive, ref, toRefs, h } from 'vue';
+import { renderIcon } from '../../../../../../../packages/utils/create';
+import { Service, Notice, Location, Category, Scan2, Message, Cart2, My2 } from '@nutui/icons-vue-taro';
 
 export default {
   setup() {
@@ -151,15 +153,28 @@ export default {
     const itemList = reactive([
       {
         name: 'option1',
-        icon: 'my2'
+        icon: () => {
+          return h(My2, {
+            width: '14px',
+            color: 'rgba(250, 44, 25, 1)'
+          });
+        }
       },
       {
         name: 'option2',
-        icon: 'cart2'
+        icon: () => {
+          return h(Cart2, {
+            width: '14px'
+          });
+        }
       },
       {
         name: 'option3',
-        icon: 'location2'
+        icon: () => {
+          return h(Location, {
+            width: '14px'
+          });
+        }
       }
     ]);
 
@@ -179,27 +194,27 @@ export default {
 
     const selfContent = reactive([
       {
-        name: 'service',
+        name: Service,
         desc: 'option1'
       },
       {
-        name: 'notice',
+        name: Notice,
         desc: 'option2'
       },
       {
-        name: 'location',
+        name: Location,
         desc: 'option3'
       },
       {
-        name: 'category',
+        name: Category,
         desc: 'option4'
       },
       {
-        name: 'scan2',
+        name: Scan2,
         desc: 'option5'
       },
       {
-        name: 'message',
+        name: Message,
         desc: 'option6'
       }
     ]);
@@ -236,7 +251,8 @@ export default {
       columns,
       change,
       handlePicker,
-      clickCustomHandle
+      clickCustomHandle,
+      renderIcon
     };
   }
 };