fix(noticebar): 优化组件(#642)

* fix: 修改 noticebar 默认样式

* fix: 冲突修改 NoticeBar

* fix: 冲突修改 noticebar

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

src/packages/__VUE/noticebar/demo.vue

@@ -1,22 +1,34 @@
 <template>
-  <div class="demo full">
+  <div class="demo">
     <h2>默认用法</h2>
-    <nut-noticebar :text="text"></nut-noticebar>
+    <nut-noticebar
+      :text="text"
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`"
+    ></nut-noticebar>
 
     <h2>禁用滚动</h2>
     <nut-noticebar
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
       :scrollable="false"
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`"
     ></nut-noticebar>
 
     <h2>通告栏模式--关闭模式</h2>
-    <nut-noticebar :closeMode="true" @click="hello"
+    <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`"
     >
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
@@ -30,48 +42,55 @@
         :standTime="1000"
         @click="go"
         :closeMode="true"
+        :background="`rgba(251, 248, 220, 1)`"
+        :color="`#D9500B`"
       ></nut-noticebar>
     </div>
 
     <h2>纵向复杂滚动动画</h2>
-    <nut-noticebar
-      direction="vertical"
-      :list="horseLamp2"
-      :speed="10"
-      :standTime="2000"
-      :complexAm="true"
-    ></nut-noticebar>
-
+    <div class="interstroll-list">
+      <nut-noticebar
+        direction="vertical"
+        :list="horseLamp2"
+        :speed="10"
+        :standTime="2000"
+        :complexAm="true"
+      ></nut-noticebar>
+    </div>
     <h2>纵向自定义滚动内容</h2>
-    <nut-noticebar
-      direction="vertical"
-      :height="50"
-      :speed="10"
-      :standTime="1000"
-      :list="[]"
-      @close="go"
-    >
-      <div
-        class="custom-item"
-        :data-index="index"
-        v-for="(item, index) in horseLamp3"
-        style="height: 50px; line-height: 50px"
-        :key="index"
-        >{{ item }}</div
+    <div class="interstroll-list">
+      <nut-noticebar
+        direction="vertical"
+        :height="50"
+        :speed="10"
+        :standTime="1000"
+        :list="[]"
+        @close="go"
       >
-    </nut-noticebar>
+        <div
+          class="custom-item"
+          :data-index="index"
+          v-for="(item, index) in horseLamp3"
+          style="height: 50px; line-height: 50px"
+          :key="index"
+          >{{ item }}</div
+        >
+      </nut-noticebar>
+    </div>
 
     <h2>纵向自定义右侧图标</h2>
-    <nut-noticebar
-      direction="vertical"
-      :list="horseLamp1"
-      :speed="10"
-      :standTime="1000"
-    >
-      <template v-slot:rightIcon>
-        <nut-icon name="fabulous" color="#f0250f"> </nut-icon>
-      </template>
-    </nut-noticebar>
+    <div class="interstroll-list">
+      <nut-noticebar
+        direction="vertical"
+        :list="horseLamp1"
+        :speed="10"
+        :standTime="1000"
+      >
+        <template v-slot:rightIcon>
+          <nut-icon name="fabulous" color="#f0250f"> </nut-icon>
+        </template>
+      </nut-noticebar>
+    </div>
   </div>
 </template>
 
@@ -108,5 +127,11 @@ export default createDemo({
 <style lang="scss" scoped>
 .demo {
   padding-bottom: 30px !important;
+
+  .interstroll-list {
+    padding: 0 10px;
+    background: rgba(251, 248, 220, 1);
+    color: #d9500b;
+  }
 }
 </style>

src/packages/__VUE/noticebar/doc.md

@@ -50,6 +50,7 @@ app.use(NoticeBar);
 ```html
     <nut-noticebar
       left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+      :scrollable="false"
     >
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>

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

@@ -1,6 +1,6 @@
 <template>
-  <view-block :class="classes">
-    <view-block
+  <view :class="classes">
+    <view
       v-show="showNoticeBar"
       class="nut-noticebar-page"
       :class="{ withicon: closeMode, close: closeMode, wrapable: wrapable }"
@@ -8,7 +8,7 @@
       @click="handleClick"
       v-if="direction == 'across'"
     >
-      <view-block
+      <view
         class="left-icon"
         v-if="iconShow"
         :style="{ 'background-image': `url(${iconBg})` }"
@@ -19,9 +19,9 @@
           :color="color"
           v-if="!iconBg"
         ></nut-icon>
-      </view-block>
-      <view-block ref="wrap" class="wrap">
-        <view-block
+      </view>
+      <view ref="wrap" class="wrap">
+        <view
           ref="content"
           class="content"
           :class="[
@@ -33,27 +33,27 @@
           @webkitAnimationEnd="onAnimationEnd"
         >
           <slot>{{ text }}</slot>
-        </view-block>
-      </view-block>
-      <view-block v-if="closeMode" class="right-icon" @click.stop="onClickIcon">
+        </view>
+      </view>
+      <view v-if="closeMode" class="right-icon" @click.stop="onClickIcon">
         <nut-icon name="close" size="11" :color="color"></nut-icon>
-      </view-block>
-    </view-block>
+      </view>
+    </view>
 
-    <view-block
+    <view
       class="nut-noticebar-vertical"
       v-if="scrollList.length > 0 && direction == 'vertical'"
       :style="barStyle"
     >
       <template v-if="slots.default">
-        <view-block class="horseLamp_list" :style="horseLampStyle">
+        <view class="horseLamp_list" :style="horseLampStyle">
           <ScrollItem
             v-for="(item, index) in scrollList"
             v-bind:key="index"
             :style="{ height: height + 'px', 'line-height': height + 'px' }"
             :item="item"
           ></ScrollItem>
-        </view-block>
+        </view>
       </template>
 
       <template v-else>
@@ -70,16 +70,16 @@
         </ul>
       </template>
 
-      <view-block class="go" @click="!slots.rightIcon && handleClickIcon()">
+      <view class="go" @click="!slots.rightIcon && handleClickIcon()">
         <template v-if="slots.rightIcon">
           <slot name="rightIcon"></slot>
         </template>
         <template v-else-if="closeMode">
           <nut-icon type="cross" :color="color" size="11px"></nut-icon>
         </template>
-      </view-block>
-    </view-block>
-  </view-block>
+      </view>
+    </view>
+  </view>
 </template>
 <script lang="ts">
 import {
@@ -97,6 +97,7 @@ import {
 } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('noticebar');
+import Taro from '@tarojs/taro';
 
 export default create({
   props: {
@@ -222,8 +223,9 @@ export default create({
         animationDuration: state.duration + 's'
       };
     });
+
     const iconBg = computed(() => {
-      let iconBg = null;
+      let iconBg = '';
       if (props.leftIcon) {
         iconBg = props.leftIcon;
       }
@@ -268,20 +270,33 @@ export default create({
         if (!wrap.value || !content.value) {
           return;
         }
-        const wrapWidth = wrap.value.getBoundingClientRect().width;
-
-        const offsetWidth = content.value.getBoundingClientRect().width;
-
-        if (props.scrollable && offsetWidth > wrapWidth) {
-          state.wrapWidth = wrapWidth;
-          state.offsetWidth = offsetWidth;
-
-          state.duration = offsetWidth / props.speed;
-          state.animationClass = 'play';
-        } else {
-          state.animationClass = '';
-        }
-      });
+        let wrapWidth = 0;
+        let offsetWidth = 0;
+
+        Taro.createSelectorQuery()
+          .select('.wrap')
+          .boundingClientRect((rect) => {
+            if (rect.width > 0) wrapWidth = rect.width;
+          })
+          .exec();
+        Taro.createSelectorQuery()
+          .select(`.content`)
+          .boundingClientRect((rect) => {
+            if (rect.width > 0) offsetWidth = rect.width;
+
+            if (props.scrollable && offsetWidth > wrapWidth) {
+              state.wrapWidth = wrapWidth;
+              state.offsetWidth = offsetWidth;
+
+              state.duration = offsetWidth / props.speed;
+              state.animationClass = 'play';
+            } else {
+              state.animationClass = '';
+            }
+            // contentStyle()
+          })
+          .exec();
+      }, 100);
     };
     const handleClick = (event: Event) => {
       emit('click', event);

src/packages/__VUE/noticebar/index.vue

@@ -32,11 +32,11 @@
           @animationend="onAnimationEnd"
           @webkitAnimationEnd="onAnimationEnd"
         >
-          <slot>{{ text }}</slot>
+          <slot>1{{ text }}</slot>
         </view>
       </view>
       <view v-if="closeMode" class="right-icon" @click.stop="onClickIcon">
-        <nut-icon name="close" size="11" :color="color"></nut-icon>
+        <nut-icon name="close" :color="color"></nut-icon>
       </view>
     </view>
 
@@ -138,11 +138,11 @@ export default create({
     leftIcon: { type: String, default: '' },
     color: {
       type: String,
-      default: '#F9911B'
+      default: ''
     },
     background: {
       type: String,
-      default: 'rgba(254,250,216,1)'
+      default: ''
     },
     delay: {
       type: [String, Number],
@@ -204,10 +204,10 @@ export default create({
     const barStyle = computed(() => {
       let style: {
         [props: string]: any;
-      } = {
-        color: props.color,
-        background: props.background
-      };
+      } = {};
+
+      props.color && (style.color = props.color);
+      props.background && (style.background = props.background);
 
       if (props.direction == 'vertical') {
         style.height = `${props.height}px`;
@@ -223,7 +223,7 @@ export default create({
       };
     });
     const iconBg = computed(() => {
-      let iconBg = null;
+      let iconBg = '';
       if (props.leftIcon) {
         iconBg = props.leftIcon;
       }

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

@@ -17,6 +17,7 @@
     <h2>通告栏模式--链接模式</h2>
     <nut-noticebar
       left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+      :scrollable="false"
     >
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>