feat: 公告栏组件添加省略号功能 (#2114)

* feat: tour更新

* feat: 文档修改

* feat: 插槽修改

* feat: noticebar发布

* feat: 文档更新

* fix: ellipsis修改

* fix: 修改 ellipsis

* feat: tour修改

* fix: 地址组件问题修改

* fix: imagepreview修改

* feat: 新增4.0介绍

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

* fix: 公告栏组件 demo 修改

* fix: 地址组件新增功能

* feat: 公告栏组件添加省略号功能

src/packages/__VUE/noticebar/demo.vue

@@ -41,13 +41,7 @@
 
     <h2>{{ translate('complexAm') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar
-        direction="vertical"
-        :list="horseLamp2"
-        :speed="10"
-        :standTime="2000"
-        :complexAm="true"
-      ></nut-noticebar>
+      <nut-noticebar direction="vertical" :list="data1" :speed="10" :standTime="2000" :complexAm="true"></nut-noticebar>
     </div>
     <h2>{{ translate('customAm') }}</h2>
     <div class="interstroll-list">
@@ -94,7 +88,12 @@ const initTranslate = () =>
       customRightIcon: '纵向--自定义右侧图标',
       text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
       textShort: 'NutUI 是移动端组件库',
-      horseLamp: ['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'],
+      horseLamp: [
+        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+        'Cascader 级联选择',
+        'DatePicker 日期选择器',
+        'CheckBox 复选按钮'
+      ],
       jd: '京东商城'
     },
     'en-US': {
@@ -135,7 +134,12 @@ export default createDemo({
     };
 
     setTimeout(() => {
-      data1.value = ['公告栏 Noticebar', '级联选择 Cascader', '日期选择器 DatePicker', '复选按钮 CheckBox'];
+      data1.value = [
+        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+        '级联选择 Cascader',
+        '日期选择器 DatePicker',
+        '复选按钮 CheckBox'
+      ];
     }, 2000);
 
     return {
@@ -167,5 +171,12 @@ export default createDemo({
     background: rgba(251, 248, 220, 1);
     color: #d9500b;
   }
+
+  .custom-item {
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 </style>

src/packages/__VUE/noticebar/index.scss

@@ -110,14 +110,20 @@
   color: $noticebar-color;
 
   .nut-noticebar__vertical-list {
+    width: 100%;
     margin: 0;
     padding: 0;
     display: block;
     flex: 1;
+    overflow: hidden;
     .nut-noticebar__vertical-item {
-      display: flex;
-      align-items: center;
+      // display: flex;
+      // align-items: center;
       height: $noticebar-across-height;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }
 

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

@@ -61,7 +61,7 @@
             class="nut-noticebar__vertical-item"
             v-for="(item, index) in scrollList"
             :key="index"
-            :style="{ height: pxCheck(height) }"
+            :style="{ height: pxCheck(height), lineHeight: pxCheck(height) }"
             @click="go(item)"
           >
             {{ item }}
@@ -69,7 +69,7 @@
         </ul>
       </template>
 
-      <view class="go" @click="!slots.rightIcon && handleClickIcon()">
+      <view class="go" @click="handleClickIcon()">
         <slot name="right-icon">
           <CircleClose v-if="closeMode" :color="color" size="11px" />
         </slot>

src/packages/__VUE/noticebar/index.vue

@@ -60,7 +60,7 @@
             class="nut-noticebar__vertical-item"
             v-for="(item, index) in scrollList"
             :key="index"
-            :style="{ height: pxCheck(height) }"
+            :style="{ height: pxCheck(height), lineHeight: pxCheck(height) }"
             @click="go(item)"
           >
             {{ item }}

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

@@ -3,7 +3,7 @@
     <Header v-if="env === 'WEB'" />
     <h2>默认用法</h2>
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
     ></nut-noticebar>
 
     <h2>滚动播放</h2>
@@ -16,7 +16,7 @@
     </nut-noticebar>
     <p />
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       :scrollable="false"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -24,11 +24,13 @@
 
     <h2>通告栏模式--关闭模式</h2>
     <nut-noticebar :closeMode="true" @click="hello" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"
-      >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+      >NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在
+      H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
     </nut-noticebar>
     <p />
     <nut-noticebar :closeMode="true" @click="hello" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"
-      >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+      >NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在
+      H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
     </nut-noticebar>
 
     <h2>通告栏模式--链接模式</h2>
@@ -44,7 +46,7 @@
 
     <h2>多行展示</h2>
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       wrapable
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -110,8 +112,11 @@
         :background="`rgba(251, 248, 220, 1)`"
         :color="`#D9500B`"
       >
-        <template v-slot:rightIcon>
-          <Fabulous />
+        <template v-slot:right-icon>
+          <img
+            src="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+            style="width: 20px; height: 20px"
+          />
         </template>
       </nut-noticebar>
     </div>
@@ -129,13 +134,28 @@ export default {
   setup() {
     const env = Taro.getEnv();
     const state = reactive({
-      horseLamp1: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-      horseLamp2: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-      horseLamp3: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-      text: '华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！'
+      horseLamp1: [
+        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+        '爆款准点秒',
+        '买超值优惠',
+        '赢百万京豆'
+      ],
+      horseLamp2: [
+        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+        '爆款准点秒',
+        '买超值优惠',
+        '赢百万京豆'
+      ],
+      horseLamp3: [
+        'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+        '爆款准点秒',
+        '买超值优惠',
+        '赢百万京豆'
+      ],
+      text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。'
     });
 
-    const data1 = ref(['Noticebar 公告栏1', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
+    const data1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
 
     setTimeout(() => {
       data1.value = ['公告栏 Noticebar', '级联选择 Cascader', '日期选择器 DatePicker', '复选按钮 CheckBox'];
@@ -162,5 +182,12 @@ export default {
 <style lang="scss">
 .demo {
   padding-bottom: 30px !important;
+
+  .custom-item {
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 </style>