feat: noticebar icon 更换,文档修改

src/packages/__VUE/noticebar/demo.vue

@@ -11,11 +11,15 @@
     <h2>{{ translate('mode') }}</h2>
     <nut-noticebar :closeMode="true" @click="hello">{{ translate('text') }} </nut-noticebar>
     <p />
-    <nut-noticebar :closeMode="true" right-icon="circle-close" @click="hello">{{ translate('text') }} </nut-noticebar>
+    <nut-noticebar :closeMode="true" @click="hello">{{ translate('text') }} </nut-noticebar>
     <p />
-    <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
-    >
+    <nut-noticebar>
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">{{ translate('jd') }}</a>
     </nut-noticebar>
 

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

@@ -78,9 +78,14 @@ Scrolling is automatically enabled when the content length of the notification b
   </nut-noticebar>
 
   <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
       :scrollable="false"
     >
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">Jingdong</a>
     </nut-noticebar>
 </template>

src/packages/__VUE/noticebar/doc.md

@@ -90,9 +90,14 @@ app.use(Noticebar);
 ```html
 <template>
     <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
       :scrollable="false"
     >
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
 </template>

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

@@ -12,8 +12,9 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view class="nut-noticebar__page-lefticon" v-if="iconShow" :style="{ 'background-image': `url(${iconBg})` }">
-        <slot name="left-icon"><nut-icon name="notice" size="16" :color="color" v-if="!iconBg"></nut-icon></slot>
+      <view class="nut-noticebar__page-lefticon" v-if="iconShow">
+        <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
+        <component :is="renderIcon(leftIcon)" v-else></component>
       </view>
       <view ref="wrap" :class="`nut-noticebar__page-wrap wrap${id}`">
         <view
@@ -27,9 +28,8 @@
         </view>
       </view>
       <view v-if="closeMode || rightIcon" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
-        <slot name="right-icon">
-          <nut-icon v-bind="$attrs" :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon
-        ></slot>
+        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
+        <CircleClose v-else />
       </view>
     </view>
 
@@ -64,7 +64,8 @@
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
-          <nut-icon type="cross" :color="color" size="11px"></nut-icon>
+          <CircleClose :color="color" size="11px" />
+          <!-- <nut-icon type="cross" :color="color" size="11px"></nut-icon> -->
         </template>
       </view>
     </view>
@@ -72,7 +73,8 @@
 </template>
 <script lang="ts">
 import { toRefs, onMounted, onUnmounted, reactive, computed, onActivated, onDeactivated, ref, watch, h } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { Notice, CircleClose } from '@nutui/icons-vue-taro';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 const { componentName, create } = createComponent('noticebar');
 import Taro from '@tarojs/taro';
@@ -130,8 +132,8 @@ export default create({
       type: Boolean,
       default: false
     },
-    leftIcon: { type: String, default: '' },
-    rightIcon: { type: String, default: '' },
+    leftIcon: { type: Object || String, default: () => Notice },
+    rightIcon: { type: Object || String, default: '' },
     color: {
       type: String,
       default: '#F9911B'
@@ -157,7 +159,9 @@ export default create({
     ScrollItem: function (props) {
       props.item.props.style = props.style;
       return h(props.item);
-    }
+    },
+    Notice,
+    CircleClose
   },
   emits: ['click', 'close'],
 
@@ -425,7 +429,8 @@ export default create({
       handleClickIcon,
       slots,
       pxCheck,
-      wrapContentClass
+      wrapContentClass,
+      renderIcon
     };
   }
 });

src/packages/__VUE/noticebar/index.vue

@@ -12,8 +12,9 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view class="nut-noticebar__page-lefticon" v-if="iconShow" :style="{ 'background-image': `url(${iconBg})` }">
-        <slot name="left-icon"><nut-icon name="notice" size="16" :color="color" v-if="!iconBg"></nut-icon></slot>
+      <view class="nut-noticebar__page-lefticon" v-if="iconShow">
+        <slot name="left-icon" v-if="$slots['left-icon']"> </slot>
+        <component :is="renderIcon(leftIcon)" v-else></component>
       </view>
       <view ref="wrap" class="nut-noticebar__page-wrap">
         <view
@@ -26,9 +27,8 @@
         </view>
       </view>
       <view v-if="closeMode || rightIcon" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
-        <slot name="right-icon">
-          <nut-icon v-bind="$attrs" :name="rightIcon ? rightIcon : 'close'" :color="color"></nut-icon
-        ></slot>
+        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
+        <CircleClose v-else />
       </view>
     </view>
 
@@ -63,7 +63,7 @@
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
-          <nut-icon type="cross" :color="color" size="11px"></nut-icon>
+          <CircleClose :color="color" size="11px" />
         </template>
       </view>
     </view>
@@ -83,7 +83,8 @@ import {
   h,
   Slots
 } from 'vue';
-import { createComponent } from '@/packages/utils/create';
+import { Notice, CircleClose } from '@nutui/icons-vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
 const { componentName, create } = createComponent('noticebar');
 import { pxCheck } from '@/packages/utils/pxCheck';
 
@@ -139,8 +140,8 @@ export default create({
       type: Boolean,
       default: false
     },
-    leftIcon: { type: String, default: '' },
-    rightIcon: { type: String, default: '' },
+    leftIcon: { type: Object || String, default: () => Notice },
+    rightIcon: { type: Object || String, default: '' },
     color: {
       type: String,
       default: ''
@@ -167,7 +168,9 @@ export default create({
       props.item.props.style = props.style;
       props.item.key = props.key;
       return h(props.item);
-    }
+    },
+    Notice,
+    CircleClose
   },
   emits: ['click', 'close'],
 
@@ -421,7 +424,8 @@ export default create({
       handleClickIcon,
       slots,
       pxCheck,
-      wrapContentClass
+      wrapContentClass,
+      renderIcon
     };
   }
 });

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

@@ -26,21 +26,18 @@
       >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
     </nut-noticebar>
     <p />
-    <nut-noticebar
-      :closeMode="true"
-      right-icon="circle-close"
-      @click="hello"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
+    <nut-noticebar :closeMode="true" @click="hello" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"
       >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
     </nut-noticebar>
 
     <h2>通告栏模式--链接模式</h2>
-    <nut-noticebar
-      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    >
+    <nut-noticebar :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+      <template v-slot:left-icon>
+        <img
+          src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+          style="width: 20px; height: 20px"
+        />
+      </template>
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
 
@@ -121,7 +118,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, toRefs } from 'vue';
+import { reactive, toRefs } from 'vue';
 
 export default {
   props: {},