releases 4.2.7

examples/App.vue

@@ -76,7 +76,9 @@ const navList = ref<VxeMenuPropTypes.Options>([
   { name: 'TreeSelectTest', routerLink: { name: 'TreeSelectTest' } },
   { name: 'CarouselTest', routerLink: { name: 'CarouselTest' } },
   { name: 'CalendarTest', routerLink: { name: 'CalendarTest' } },
-  { name: 'CountdownTest', routerLink: { name: 'CountdownTest' } }
+  { name: 'CountdownTest', routerLink: { name: 'CountdownTest' } },
+  { name: 'NoticeBarTest', routerLink: { name: 'NoticeBarTest' } },
+  { name: 'CollapseTest', routerLink: { name: 'CollapseTest' } }
 ])
 
 const theme = ref((localStorage.getItem('VXE_THEME') as 'light' | 'dark') || 'light')

examples/router/index.ts

@@ -229,6 +229,16 @@ const routes: Array<RouteRecordRaw> = [
     path: '/component/countdown',
     name: 'CountdownTest',
     component: () => import('../views/countdown/CountdownTest.vue')
+  },
+  {
+    path: '/component/notice-bar',
+    name: 'NoticeBarTest',
+    component: () => import('../views/notice-bar/NoticeBarTest.vue')
+  },
+  {
+    path: '/component/collapse',
+    name: 'CollapseTest',
+    component: () => import('../views/collapse/CollapseTest.vue')
   }
 ]
 

examples/views/collapse/CollapseTest.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <vxe-collapse>
+      <vxe-collapse-pane title="分组11" name="1">
+        <template #default>
+          <div>dsfd111sf</div>
+        </template>
+      </vxe-collapse-pane>
+      <vxe-collapse-pane title="分组22" name="2">
+        <template #default>
+          <div>dsfd222sf</div>
+        </template>
+      </vxe-collapse-pane>
+      <vxe-collapse-pane title="分组33" name="3" icon="vxe-icon-edit">
+        <template #default>
+          <div>dsf333dsf</div>
+        </template>
+      </vxe-collapse-pane>
+    </vxe-collapse>
+  </div>
+</template>

examples/views/icon/IconTest.vue

@@ -14,7 +14,7 @@ import { ref } from 'vue'
 import { VxeIconPropTypes } from '../../../types'
 
 const iconList = ref<VxeIconPropTypes.Name[]>([
-  'add', 'add-sub', 'add-user', 'add-users', 'align-center', 'align-left', 'align-right', 'alipay', 'arrow-double-left', 'arrow-double-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'arrows-down', 'arrows-left', 'arrows-right', 'arrows-up', 'association-form', 'bell', 'bell-fill', 'calendar', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'carousel', 'chart-bar-x', 'chart-bar-y', 'chart-line', 'chart-pie', 'chart-radar', 'chat', 'chat-fill', 'check', 'checkbox-checked', 'checkbox-checked-fill', 'checkbox-indeterminate-fill', 'checkbox-unchecked', 'click-button', 'close', 'cloud-download', 'cloud-upload', 'cloudy', 'comment', 'company', 'copy', 'custom-column', 'cut', 'delete', 'delete-fill', 'dot', 'download', 'drag-handle', 'edit', 'ellipsis-h', 'ellipsis-v', 'end-page', 'envelope', 'envelope-fill', 'envelope-open', 'envelope-open-fill', 'error-circle', 'error-circle-fill', 'exclamation', 'eye-fill', 'eye-fill-close', 'feedback', 'file', 'file-excel', 'file-image', 'file-markdown', 'file-pdf', 'file-ppt', 'file-txt', 'file-word', 'file-zip', 'fixed-left', 'fixed-left-fill', 'fixed-right', 'fixed-right-fill', 'flag', 'flag-fill', 'flow-branch', 'folder', 'folder-open', 'fullscreen', 'funnel', 'funnel-clear', 'gitee-fill', 'github-fill', 'goods', 'goods-fill', 'heavy-rain', 'home', 'home-fill', 'home-page', 'indicator', 'info-circle', 'info-circle-fill', 'information', 'input', 'language-switch', 'layout', 'lightning', 'link', 'location', 'location-fill', 'lock', 'lock-fill', 'maximize', 'menu', 'menu-fold', 'menu-unfold', 'merge-cells', 'message-fill', 'microphone', 'microphone-fill', 'minimize', 'minus', 'mobile', 'moon', 'num-list', 'number', 'paste', 'pc', 'pct-1-1', 'pct-full', 'picture', 'picture-fill', 'platform', 'print', 'print-batch', 'question', 'question-circle', 'question-circle-fill', 'radio-checked', 'radio-checked-fill', 'radio-unchecked', 'recover', 'refresh', 'repeat', 'rmb', 'rotate-left', 'rotate-right', 'row-col', 'save', 'search', 'search-zoom-in', 'search-zoom-out', 'select', 'send', 'send-fill', 'setting', 'setting-fill', 'share', 'share-fill', 'signature', 'sort', 'sort-alpha-asc', 'sort-alpha-desc', 'sort-asc', 'sort-desc', 'sort-numeric-asc', 'sort-numeric-desc', 'spinner', 'square', 'square-caret-right', 'square-caret-right-fill', 'square-checked', 'square-checked-fill', 'square-close', 'square-close-fill', 'square-down', 'square-down-fill', 'square-fill', 'square-left', 'square-left-fill', 'square-minus', 'square-minus-fill', 'square-plus', 'square-plus-fill', 'square-plus-square', 'square-right', 'square-right-fill', 'square-square', 'square-up', 'square-up-fill', 'star', 'star-fill', 'star-half', 'subtable', 'success-circle', 'success-circle-fill', 'sunny', 'swap', 'swap-down', 'swap-left', 'swap-right', 'swap-up', 'switch', 'table', 'tabs', 'text', 'textarea', 'time', 'tree-select', 'undo', 'unlock', 'unlock-fill', 'upload', 'usd', 'user', 'user-fill', 'voice', 'voice-fill', 'warning-circle', 'warning-circle-fill', 'warning-triangle', 'warning-triangle-fill', 'wechat', 'zoom-in', 'zoom-out'
+  'add', 'add-sub', 'add-user', 'add-users', 'align-center', 'align-left', 'align-right', 'alipay', 'arrow-double-left', 'arrow-double-right', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'arrows-down', 'arrows-left', 'arrows-right', 'arrows-up', 'association-form', 'bell', 'bell-fill', 'calendar', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'carousel', 'chart-bar-x', 'chart-bar-y', 'chart-line', 'chart-pie', 'chart-radar', 'chat', 'chat-fill', 'check', 'checkbox-checked', 'checkbox-checked-fill', 'checkbox-indeterminate-fill', 'checkbox-unchecked', 'click-button', 'close', 'cloud-download', 'cloud-upload', 'cloudy', 'comment', 'company', 'copy', 'custom-column', 'cut', 'delete', 'delete-fill', 'dot', 'download', 'drag-handle', 'edit', 'ellipsis-h', 'ellipsis-v', 'end-page', 'envelope', 'envelope-fill', 'envelope-open', 'envelope-open-fill', 'error-circle', 'error-circle-fill', 'exclamation', 'eye-fill', 'eye-fill-close', 'feedback', 'file', 'file-excel', 'file-image', 'file-markdown', 'file-pdf', 'file-ppt', 'file-txt', 'file-word', 'file-zip', 'fixed-left', 'fixed-left-fill', 'fixed-right', 'fixed-right-fill', 'flag', 'flag-fill', 'flow-branch', 'folder', 'folder-open', 'fullscreen', 'funnel', 'funnel-clear', 'gitee-fill', 'github-fill', 'goods', 'goods-fill', 'heavy-rain', 'home', 'home-fill', 'home-page', 'indicator', 'info-circle', 'info-circle-fill', 'information', 'input', 'language-switch', 'layout', 'lightning', 'link', 'location', 'location-fill', 'lock', 'lock-fill', 'maximize', 'menu', 'menu-fold', 'menu-unfold', 'merge-cells', 'message-fill', 'microphone', 'microphone-fill', 'minimize', 'minus', 'mobile', 'moon', 'notice-left-fill', 'notice-right-fill', 'num-list', 'number', 'paste', 'pc', 'pct-1-1', 'pct-full', 'picture', 'picture-fill', 'platform', 'print', 'print-batch', 'question', 'question-circle', 'question-circle-fill', 'radio-checked', 'radio-checked-fill', 'radio-unchecked', 'recover', 'refresh', 'repeat', 'rmb', 'rotate-left', 'rotate-right', 'row-col', 'save', 'search', 'search-zoom-in', 'search-zoom-out', 'select', 'send', 'send-fill', 'setting', 'setting-fill', 'share', 'share-fill', 'signature', 'sort', 'sort-alpha-asc', 'sort-alpha-desc', 'sort-asc', 'sort-desc', 'sort-numeric-asc', 'sort-numeric-desc', 'spinner', 'square', 'square-caret-right', 'square-caret-right-fill', 'square-checked', 'square-checked-fill', 'square-close', 'square-close-fill', 'square-down', 'square-down-fill', 'square-fill', 'square-left', 'square-left-fill', 'square-minus', 'square-minus-fill', 'square-plus', 'square-plus-fill', 'square-plus-square', 'square-right', 'square-right-fill', 'square-square', 'square-up', 'square-up-fill', 'star', 'star-fill', 'star-half', 'subtable', 'success-circle', 'success-circle-fill', 'sunny', 'swap', 'swap-down', 'swap-left', 'swap-right', 'swap-up', 'switch', 'table', 'tabs', 'text', 'textarea', 'time', 'tree-select', 'undo', 'unlock', 'unlock-fill', 'upload', 'usd', 'user', 'user-fill', 'voice', 'voice-fill', 'warning-circle', 'warning-circle-fill', 'warning-triangle', 'warning-triangle-fill', 'wechat', 'zoom-in', 'zoom-out'
 ])
 </script>
 

examples/views/notice-bar/NoticeBarTest.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <vxe-notice-bar speed="slow">横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果 播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果</vxe-notice-bar>
+    <vxe-notice-bar>横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果 播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果</vxe-notice-bar>
+    <vxe-notice-bar speed="fast">横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果</vxe-notice-bar>
+
+    <vxe-notice-bar speed="slow" direction="right">横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果 播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果</vxe-notice-bar>
+    <vxe-notice-bar direction="right">横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果 播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果</vxe-notice-bar>
+    <vxe-notice-bar speed="fast" direction="right">横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果11 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果22 横向轮播效果 横向轮播效果 横向轮播效果 横向轮播效果33 横向轮播效果横向轮播效果横向轮播效果横向轮播效果 44 横向轮播效果 横向轮播效果</vxe-notice-bar>
+  </div>
+</template>

gulpfile.js

@@ -75,6 +75,7 @@ const componentList = [
   'loading',
   'menu',
   'modal',
+  'notice-bar',
   'number-input',
   'optgroup',
   'option',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.2.6",
+  "version": "4.2.7",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/collapse/src/collapse-pane.ts

@@ -1,24 +1,43 @@
-import { defineComponent, ref, h, reactive } from 'vue'
+import { defineComponent, ref, h, inject, PropType, watch, reactive, onMounted, onUnmounted } from 'vue'
 import XEUtils from 'xe-utils'
+import { createEvent } from '../../ui'
+import { assembleCollapseItem, destroyCollapseItem } from './util'
 
-import type { CollapsePaneReactData, VxeCollapsePaneEmits, CollapsePanePrivateRef, VxeCollapsePanePrivateComputed, VxeCollapsePaneConstructor, VxeCollapsePanePrivateMethods } from '../../../types'
+import type { CollapsePaneReactData, VxeCollapsePaneEmits, VxeCollapsePanePropTypes, CollapsePaneMethods, CollapsePanePrivateMethods, ValueOf, VxeCollapsePaneDefines, VxeCollapseConstructor, VxeCollapsePrivateMethods, CollapsePanePrivateRef, VxeCollapsePanePrivateComputed, VxeCollapsePaneConstructor, VxeCollapsePanePrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeCollapsePane',
   props: {
+    title: [String, Number] as PropType<VxeCollapsePanePropTypes.Title>,
+    name: [String, Number] as PropType<VxeCollapsePanePropTypes.Name>,
+    icon: String as PropType<VxeCollapsePanePropTypes.Icon>,
+    preload: Boolean as PropType<VxeCollapsePanePropTypes.Preload>,
+    permissionCode: [String, Number] as PropType<VxeCollapsePanePropTypes.PermissionCode>
   },
   emits: [
   ] as VxeCollapsePaneEmits,
   setup (props, context) {
-    const { slots } = context
+    const { emit, slots } = context
 
     const xID = XEUtils.uniqueId()
 
+    const $xeCollapse = inject<(VxeCollapseConstructor & VxeCollapsePrivateMethods) | null>('$xeCollapse', null)
+
     const refElem = ref<HTMLDivElement>()
 
     const reactData = reactive<CollapsePaneReactData>({
     })
 
+    const collapseConfig = reactive<VxeCollapsePaneDefines.CollapseConfig>({
+      id: xID,
+      title: props.title,
+      name: props.name,
+      icon: props.icon,
+      preload: props.preload,
+      permissionCode: props.permissionCode,
+      slots: slots
+    })
+
     const refMaps: CollapsePanePrivateRef = {
       refElem
     }
@@ -36,12 +55,52 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeCollapsePaneConstructor & VxeCollapsePanePrivateMethods
 
+    const dispatchEvent = (type: ValueOf<VxeCollapsePaneEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $collapsePane: $xeCollapsePane }, params))
+    }
+
+    const collapsePaneMethods: CollapsePaneMethods = {
+      dispatchEvent
+    }
+
+    const collapsePanePrivateMethods: CollapsePanePrivateMethods = {
+    }
+
+    Object.assign($xeCollapsePane, collapsePaneMethods, collapsePanePrivateMethods)
+
+    watch(() => props.title, (val) => {
+      collapseConfig.title = val
+    })
+
+    watch(() => props.name, (val) => {
+      collapseConfig.name = val
+    })
+
+    watch(() => props.icon, (val) => {
+      collapseConfig.icon = val
+    })
+
+    watch(() => props.permissionCode, (val) => {
+      collapseConfig.permissionCode = val
+    })
+
+    onMounted(() => {
+      const elem = refElem.value
+      if ($xeCollapse && elem) {
+        assembleCollapseItem($xeCollapse, elem, collapseConfig)
+      }
+    })
+
+    onUnmounted(() => {
+      if ($xeCollapse) {
+        destroyCollapseItem($xeCollapse, collapseConfig)
+      }
+    })
+
     const renderVN = () => {
-      const defaultSlot = slots.default
       return h('div', {
-        ref: refElem,
-        class: ['vxe-collapse-pane']
-      }, defaultSlot ? defaultSlot({}) : [])
+        ref: refElem
+      }, [])
     }
 
     $xeCollapsePane.renderVN = renderVN