fix: 公告栏 noticebar 插槽使用时不更新问题修改 (#2104)

* feat: tour更新

* feat: 文档修改

* feat: 插槽修改

* feat: noticebar发布

* feat: 文档更新

* fix: ellipsis修改

* fix: 修改 ellipsis

* feat: tour修改

* fix: 地址组件问题修改

* fix: imagepreview修改

* feat: 新增4.0介绍

* fix: 公告栏修改插槽使用不更新问题

src/packages/__VUE/noticebar/demo.vue

@@ -55,7 +55,7 @@
         <div
           class="custom-item"
           :data-index="index"
-          v-for="(item, index) in horseLamp3"
+          v-for="(item, index) in data1"
           style="height: 50px; line-height: 50px"
           :key="index"
           >{{ item }}</div
@@ -75,7 +75,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, toRefs } from 'vue';
+import { onMounted, reactive, toRefs, ref } from 'vue';
 import { Fabulous } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('noticebar');
@@ -125,6 +125,8 @@ export default createDemo({
       text: translate('text')
     });
 
+    const data1 = ref(['Noticebar 公告栏1', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+
     const closeFun = () => {
       console.log('hello world');
     };
@@ -132,12 +134,17 @@ export default createDemo({
       console.log(item);
     };
 
+    setTimeout(() => {
+      data1.value = ['Noticebar 11111', 'Cascader 2222择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'];
+    }, 2000);
+
     return {
       ...toRefs(state),
       closeFun,
       go,
       translate,
-      Fabulous
+      Fabulous,
+      data1
     };
   }
 });

src/packages/__VUE/noticebar/index.scss

@@ -121,6 +121,10 @@
     }
   }
 
+  .nut-noticebar-custom-item {
+    position: absolute;
+    top: 999999px;
+  }
   .go {
     margin: $noticebar-righticon-margin;
     align-self: center;

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

@@ -40,12 +40,18 @@
     >
       <template v-if="slots.default">
         <view class="nut-noticebar__vertical-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 class="showNotica">
+            <ScrollItem
+              v-for="(item, index) in scrollList"
+              v-bind:key="index"
+              :style="{ height: height + 'px', 'line-height': height + 'px' }"
+              :item="item"
+            ></ScrollItem>
+          </view>
+        </view>
+
+        <view class="nut-noticebar-custom-item">
+          <slot></slot>
         </view>
       </template>
 
@@ -92,6 +98,7 @@ interface stateProps {
   timer: null;
   keepAlive: boolean;
   isCanScroll: null | boolean;
+  showNotica: boolean;
   id: number;
 }
 
@@ -185,6 +192,7 @@ export default create({
       timer: null,
       keepAlive: false,
       isCanScroll: null,
+      showNotica: true,
       id: Math.round(Math.random() * 100000)
     });
 
@@ -314,7 +322,6 @@ export default create({
     };
 
     const onAnimationEnd = () => {
-      console.log('运动');
       state.firstRound = false;
 
       setTimeout(() => {
@@ -374,7 +381,9 @@ export default create({
     onMounted(() => {
       if (props.direction == 'vertical') {
         if (slots.default) {
-          state.scrollList = [].concat(slots.default()[0].children as any);
+          // state.scrollList = [].concat(slots.default()[0].children as any);
+          updateSlotChild();
+          watchSlots();
         } else {
           state.scrollList = [].concat(props.list as any);
         }
@@ -387,6 +396,30 @@ export default create({
       }
     });
 
+    const updateSlotChild = () => {
+      if (slots.default) state.scrollList = [].concat(slots.default()[0].children as any);
+    };
+
+    const watchSlots = () => {
+      setTimeout(() => {
+        var observer = new MutationObserver((slots) => {
+          state.showNotica = false;
+          setTimeout(() => {
+            state.showNotica = true;
+          });
+          updateSlotChild();
+        });
+        const ele = document.getElementsByClassName('nut-noticebar-custom-item')[0];
+
+        if (ele) {
+          observer.observe(ele, {
+            childList: true,
+            subtree: true
+          });
+        }
+      }, 100);
+    };
+
     onActivated(() => {
       if (state.keepAlive) {
         state.keepAlive = false;

src/packages/__VUE/noticebar/index.vue

@@ -40,12 +40,17 @@
     >
       <template v-if="slots.default">
         <view class="nut-noticebar__vertical-list" :style="horseLampStyle">
-          <ScrollItem
-            v-for="(item, index) in scrollList"
-            :key="index"
-            :style="{ height: height + 'px', 'line-height': height + 'px' }"
-            :item="item"
-          ></ScrollItem>
+          <div class="showNotica">
+            <ScrollItem
+              v-for="(item, index) in scrollList"
+              :key="index"
+              :style="{ height: height + 'px', 'line-height': height + 'px' }"
+              :item="item"
+            ></ScrollItem>
+          </div>
+        </view>
+        <view class="nut-noticebar-custom-item">
+          <slot></slot>
         </view>
       </template>
 
@@ -104,6 +109,7 @@ interface StateProps {
   timer: null;
   keepAlive: boolean;
   isCanScroll: null | boolean;
+  showNotica: boolean;
 }
 export default create({
   props: {
@@ -191,7 +197,8 @@ export default create({
       distance: 0,
       timer: null,
       keepAlive: false,
-      isCanScroll: null
+      isCanScroll: null,
+      showNotica: true
     });
 
     const classes = computed(() => {
@@ -283,7 +290,7 @@ export default create({
         const offsetWidth = content.value.getBoundingClientRect().width;
 
         state.isCanScroll = props.scrollable == null ? offsetWidth > wrapWidth : props.scrollable;
-        console.log(111, state.isCanScroll);
+
         if (state.isCanScroll) {
           state.wrapWidth = wrapWidth;
           state.offsetWidth = offsetWidth;
@@ -366,7 +373,8 @@ export default create({
     onMounted(() => {
       if (props.direction == 'vertical') {
         if (slots.default) {
-          state.scrollList = [].concat(slots.default()[0].children as any);
+          updateSlotChild();
+          watchSlots();
         } else {
           state.scrollList = [].concat(props.list as any);
         }
@@ -379,6 +387,30 @@ export default create({
       }
     });
 
+    const updateSlotChild = () => {
+      if (slots.default) state.scrollList = [].concat(slots.default()[0].children as any);
+    };
+
+    const watchSlots = () => {
+      setTimeout(() => {
+        var observer = new MutationObserver((slots) => {
+          state.showNotica = false;
+          setTimeout(() => {
+            state.showNotica = true;
+          });
+          updateSlotChild();
+        });
+        const ele = document.getElementsByClassName('nut-noticebar-custom-item')[0];
+
+        if (ele) {
+          observer.observe(ele, {
+            childList: true,
+            subtree: true
+          });
+        }
+      }, 100);
+    };
+
     onActivated(() => {
       if (state.keepAlive) {
         state.keepAlive = false;

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

@@ -92,7 +92,7 @@
         <div
           class="custom-item"
           :data-index="index"
-          v-for="(item, index) in horseLamp3"
+          v-for="(item, index) in data1"
           style="height: 50px; line-height: 50px"
           :key="index"
           >{{ item }}</div
@@ -119,7 +119,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { reactive, toRefs, ref } from 'vue';
 import { Fabulous } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
@@ -135,6 +135,12 @@ export default {
       text: '华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！'
     });
 
+    const data1 = ref(['Noticebar 公告栏1', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+
+    setTimeout(() => {
+      data1.value = ['Noticebar 11111', 'Cascader 2222择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'];
+    }, 2000);
+
     const hello = () => {
       console.log('hello world');
     };
@@ -146,7 +152,8 @@ export default {
       ...toRefs(state),
       hello,
       go,
-      env
+      env,
+      data1
     };
   }
 };