feat(noticebar): 新增field-name属性,支持传入数组对象

link #109
nutui-uniapp · Nov 19, 2023 · 3f95345 · 3f95345
1 parent 3d190a0
commit 3f95345
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 75 deletions.
diff --git a/docs/components/exhibition/noticebar.md b/docs/components/exhibition/noticebar.md
@@ -128,25 +128,43 @@
 </script>
 ```
 
-<!-- ### 自定义滚动内容
-
-```html
-<template>
-    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]" >
-      <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
-    </nut-noticebar>
-</template>
-
-<script>
-  import { ref } from 'vue';
-  export default {
-    setup(props) {
-      const horseLamp3 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
-      return { horseLamp3 };
+### 自定义滚动内容
+传递`field-name`属性自定义显示文字字段名，以此可以携带更多数据
+
+``` vue
+<script lang="ts">
+import { ref } from 'vue'
+
+export default {
+  setup(props) {
+    const data1 = ref([
+      { id: 1, text: 'Noticebar 公告栏' },
+      { id: 2, text: 'Cascader 级联选择' },
+      { id: 3, text: 'DatePicker 日期选择器' },
+      { id: 4, text: 'CheckBox 复选按钮' },
+    ])
+    const go = (item: any) => {
+      console.log(item)
     }
+    return { data1, go }
   }
+}
 </script>
-``` -->
+
+<template>
+  <nut-noticebar
+    direction="vertical"
+    :height="50"
+    :speed="10"
+    :stand-time="1000"
+    :list="data1"
+    field-name="text"
+    background="rgba(251, 248, 220, 1)"
+    @close="go"
+    @click="go"
+  />
+</template>
+```
 
 ### 纵向自定义右侧图标
 
@@ -195,8 +213,9 @@
 | speed        | 滚动的速度                         | number | `50`               |
 | stand-time         | 停留时间(毫秒) | number | `1000`                |
 | complex-am | 稍复杂的动画，耗能会高     | boolean | `false` |
-| height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | number | `40`              |
-| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=right-icon]`自定义图标                                   | boolean      | `false`  |
+| height          | 每一个滚动列的高度(px)                 | number | `40`              |
+| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=rightIcon]`自定义图标                                   | boolean      | `false`  |
+| field-name `1.5.2`  | 如果传递数组对象，显示文字的字段名                                   | string      | -  |
 
 ### Slots
 

diff --git a/example/src/pages/demo/exhibition/noticebar/index.vue b/example/src/pages/demo/exhibition/noticebar/index.vue
@@ -27,10 +27,20 @@ export default {
         'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
     })
 
-    const data1 = ref(['Noticebar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'])
+    const data1 = ref([
+      { id: 1, text: 'Noticebar 公告栏' },
+      { id: 2, text: 'Cascader 级联选择' },
+      { id: 3, text: 'DatePicker 日期选择器' },
+      { id: 4, text: 'CheckBox 复选按钮' },
+    ])
 
     setTimeout(() => {
-      data1.value = ['公告栏 Noticebar', '级联选择 Cascader', '日期选择器 DatePicker', '复选按钮 CheckBox']
+      data1.value = [
+        { id: 1, text: '公告栏' },
+        { id: 2, text: '级联选择' },
+        { id: 3, text: '日期选择器' },
+        { id: 4, text: '复选按钮' },
+      ]
     }, 2000)
     /* eslint-disable no-console */
 
@@ -145,7 +155,7 @@ export default {
         :custom-color="color1"
       />
     </div>
-    <!-- <h2 class="title">
+    <h2 class="title">
       纵向自定义滚动内容
     </h2>
     <div class="interstroll-list">
@@ -154,22 +164,14 @@ export default {
         :height="50"
         :speed="10"
         :stand-time="1000"
-        :list="[]"
+        :list="data1"
+        field-name="text"
         background="rgba(251, 248, 220, 1)"
-        :color="color1"
+        :custom-color="color1"
         @close="go"
-      >
-        <div
-          v-for="(item, index) in data1"
-          :key="index"
-          class="custom-item"
-          :data-index="index"
-          style="height: 50px; line-height: 50px;"
-        >
-          {{ item }}
-        </div>
-      </nut-noticebar>
-    </div> -->
+        @click="go"
+      />
+    </div>
 
     <h2 class="title">
       纵向自定义右侧图标

diff --git a/packages/nutui/components/noticebar/noticebar.ts b/packages/nutui/components/noticebar/noticebar.ts
@@ -10,7 +10,7 @@ export interface stateProps {
   showNoticebar: boolean
   animationClass: string
   animate: boolean
-  scrollList: never[]
+  scrollList: any[]
   distance: number
   timer: null
   keepAlive: boolean
@@ -28,7 +28,7 @@ export const noticebarProps = {
   /**
    * @description 纵向滚动数据列表, `vertical`方向
    */
-  list: makeArrayProp([]),
+  list: makeArrayProp<string | object>([]),
   /**
    * @description 停留时间(毫秒),`vertical`方向
    */
@@ -77,12 +77,16 @@ export const noticebarProps = {
    * @description 是否开启文本换行,`scrollable` 会设置为 `false`
    */
   wrapable: Boolean,
+  /**
+   * @description `vertical`方向时`list`属性如果传入数组对象，显示文本的字段名
+   */
+  fieldName: String,
 }
 
 export type NoticeBarProps = ExtractPropTypes<typeof noticebarProps>
 
 export const noticebarEmits = {
-  [CLICK_EVENT]: (evt: Event) => evt instanceof Object,
+  [CLICK_EVENT]: (value: Event | string) => value instanceof Object || isString(value),
   [CLOSE_EVENT]: (evt: Event | string) => evt instanceof Object || isString(evt),
   acrossEnd: (evt: Event) => evt instanceof Object,
 

diff --git a/packages/nutui/components/noticebar/noticebar.vue b/packages/nutui/components/noticebar/noticebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type ComponentInternalInstance, computed, defineComponent, getCurrentInstance, onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref, useSlots, watch } from 'vue'
-import { getMainClass, pxCheck } from '../_utils'
+import { type ComponentInternalInstance, computed, defineComponent, getCurrentInstance, onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { getMainClass, isObject, pxCheck } from '../_utils'
 import { CLICK_EVENT, CLOSE_EVENT, PREFIX } from '../_constants'
 import NutIcon from '../icon/icon.vue'
 import { useSelectorQuery } from '../_hooks'
@@ -10,7 +10,6 @@ import { noticebarEmits, noticebarProps } from './noticebar'
 const props = defineProps(noticebarProps)
 
 const emit = defineEmits(noticebarEmits)
-const slots = useSlots()
 const instance = getCurrentInstance() as ComponentInternalInstance
 const { getSelectorNodeInfo } = useSelectorQuery(instance)
 
@@ -205,21 +204,12 @@ function handleClickIcon() {
   if (props.closeMode)
     state.showNoticebar = !props.closeMode
 
-  emit(CLOSE_EVENT, state.scrollList[0])
+  emit(CLOSE_EVENT, state.scrollList[0] as any)
 }
 
 onMounted(() => {
   if (props.direction === 'vertical') {
-    if (slots.default) {
-
-      // // #ifdef H5
-      // updateSlotChild()
-      // watchSlots()
-      // // #endif
-    }
-    else {
-      state.scrollList = [].concat(props.list as any)
-    }
+    state.scrollList = [].concat(props.list as any)
 
     setTimeout(() => {
       props.complexAm ? startRoll() : startRollEasy()
@@ -301,30 +291,17 @@ export default defineComponent({
       class="nut-noticebar__vertical"
       :style="barStyle"
     >
-      <template v-if="slots.default">
-        <view class="horseLamp_list" :style="horseLampStyle">
-          <view
-            v-for="(item, index) in state.scrollList"
-            :key="index"
-            :style="{ 'height': `${height}px`, 'line-height': `${height}px` }"
-          >
-            {{ item }}
-          </view>
+      <view class="nut-noticebar__vertical-list" :style="horseLampStyle">
+        <view
+          v-for="(item, index) in state.scrollList"
+          :key="index"
+          class="nut-noticebar__vertical-item"
+          :style="{ height: pxCheck(height), lineHeight: pxCheck(height) }"
+          @click="go(item)"
+        >
+          {{ props.fieldName && isObject(item) ? item[props.fieldName] : item }}
         </view>
-      </template>
-      <template v-else>
-        <ul class="nut-noticebar__vertical-list" :style="horseLampStyle">
-          <li
-            v-for="(item, index) in state.scrollList"
-            :key="index"
-            class="nut-noticebar__vertical-item"
-            :style="{ height: pxCheck(height), lineHeight: pxCheck(height) }"
-            @click="go(item)"
-          >
-            {{ item }}
-          </li>
-        </ul>
-      </template>
+      </view>
 
       <view class="go" @click="handleClickIcon()">
         <slot name="rightIcon">