TinyVue v3.19.0 正式釋出！Tree 元件終於支援虛擬滾動啦！

OpenTiny社区發表於2024-11-11
Vue元件

本文由體驗技術團隊Kagol原創。
我們非常高興地宣佈，2024年10月28日，TinyVue 釋出了 v3.19.0 🎉。

本次 3.19.0 版本主要有以下重大變更：

  • 所有元件全面升級到 OpenTiny Design 新設計規範，UI 更美觀、更符合現代審美。
  • 增加 VirtualTree 虛擬樹元件。
  • 增加 VirtualScrollBox 虛擬化容器元件。
  • 增加 Sticky 粘性佈局元件。

詳細的 Release Notes 請參考：https://github.com/opentiny/tiny-vue/releases/tag/v3.19.0

本次版本共有16位貢獻者參與開發，其中 Nowitzki41 / Simon-He95 / BWrong 是新朋友👏

  • Nowitzki41 - 新增貢獻者✨
  • Simon-He95 - 新增貢獻者✨
  • BWrong - 新增貢獻者✨
  • shenjunjian
  • kagol
  • zzcr
  • gimmyhehe
  • GaoNeng-wWw
  • wuyiping0628
  • gweesin
  • James-9696
  • chenxi-20
  • MomoPoppy
  • AcWrong02
  • Davont
  • Youyou-smiles

也感謝新老朋友們對 TinyVue 的辛苦付出！
你可以更新 @opentiny/vue@3.19.0 進行體驗！

我們一起來看看都有哪些更新吧！

全面升級新 UI，更符合現代審美

自從 TinyVue 元件庫去年開源以來，一直有小夥伴反饋我們的 UI 不夠美觀，風格陳舊，不太滿足現階段審美。

於是我們花了大量時間對元件 UI 進行最佳化，全面適配了 OpenTiny Design 新設計規範，並終於在 v3.19.0 正式釋出！

整體效果如下：

在這裡插入圖片描述

如果你安裝 v3.19.0 版本的 TinyVue 元件庫，預設效果就是新設計規範。

# 安裝依賴
npm i @opentiny/vue@3.19.0

<script setup lang="ts">
// 引入 TinyVue 的元件
import { TinyButton, TinyAlert } from '@opentiny/vue'
</script>

<template>
  <div>
    <tiny-button>取消</tiny-button>
    <tiny-button type="primary">確定</tiny-button>
  </div>
  <tiny-alert description="TinyVue 是一套跨端、跨框架的企業級 UI 元件庫，支援 Vue 2 和 Vue 3，支援 PC 端和移動端。"></tiny-alert>
</template>

效果圖：

在這裡插入圖片描述

新舊 UI 的效果對比，可以閱讀以下文章：

  • 煥然一新！TinyVue 元件庫 UI 大升級，更符合現代的審美！

增加 VirtualTree 虛擬樹元件

說到 Tree 元件的虛擬滾動，還要回到2023年7月12日開發者 zouzhixiang 提交的一個 issue：✨ [Feature]: tree樹形控制元件能增加虛擬滾動功能嗎？#317。

現在 Tree 元件終於支援上虛擬滾動功能了！🎉🎉🎉

我們一起來體驗下吧！

只需要配置下資料來源和高度即可。

<script setup>
import { computed } from 'vue'
import { TinyVirtualTree } from '@opentiny/vue'

const treeOp = computed(() => ({
  nodeKey: 'label',
  data: data5.value
}))

<template>
  <tiny-virtual-tree
    height="600"
    :tree-op="treeOp"
  ></tiny-virtual-tree>
</template>

效果如下：

在這裡插入圖片描述

更多 VirtualTree 元件的功能，歡迎到 TinyVue 官網進行體驗：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/v...

增加 VirtualScrollBox 虛擬化容器元件

我們不僅實現了 Tree 的虛擬滾動，還抽取了一個通用的虛擬滾動元件，可以將該元件用在任意列表類的場景，讓大資料列表擁有虛擬滾動的能力，我們以表格元件為例，實現一個水平和垂直方向都能虛擬滾動的表格。

<template>
  <tiny-virtual-scroll-box v-bind="config">
    <template #default="{ params: { viewRows, viewCols, isScrollX, isScrollY, isTop, isBottom, isLeft, isRight } }">
      <div
        v-for="viewRow in viewRows"
        :key="viewRow.key"
        :style="viewRow.style"
        :class="rowClass({ viewRow, isScrollY, isTop, isBottom })"
      >
        <div
          v-for="viewCol in viewCols"
          :key="viewCol.key"
          :style="colStyle({ viewRow, viewCol })"
          :class="colClass({ viewCol, isScrollX, isLeft, isRight })"
        >
          <div class="vs-grid-cell">
            {{ viewRow.info.raw + ',' + viewCol.info.raw }}
          </div>
        </div>
      </div>
    </template>
  </tiny-virtual-scroll-box>
</template>

<script setup>
import { reactive } from 'vue'
import { TinyVirtualScrollBox } from '@opentiny/vue'

const genColumn = (total) => {
  const columns = []
  const columnSizes = []

  for (let i = 1; i <= total; i++) {
    columns.push(`c-${i}`)
    // 列寬在 120 到 180
    columnSizes.push(Math.round(120 + Math.random() * 60))
  }

  return { columns, columnSizes }
}

const genRow = (total) => {
  const rows = []
  const rowSizes = []

  for (let i = 1; i <= total; i++) {
    rows.push(`r-${i}`)
    // 行高在 24 到 36
    rowSizes.push(Math.round(24 + Math.random() * 12))
  }

  return { rows, rowSizes }
}

// 生成 10000 列
const { columns, columnSizes } = genColumn(10000)
// 生成 20000 行
const { rows, rowSizes } = genRow(20000)

const config = reactive({
  width: 900,
  height: 400,
  rowBuffer: 120,
  columnBuffer: 240,
  columns,
  columnSizes,
  rows,
  rowSizes,
  fixedColumns: [[0], [1]],
  fixedRows: [[0], [1]],
  spanConfig: [[3, 3, 2, 2]]
})

const rowClass = ({ viewRow, isScrollY, isTop, isBottom }) => {
  return {
    [viewRow.key]: true,
    'vs-row': true,
    'vs-fixed-top-last': viewRow.info.startLast && !isTop && isScrollY,
    'vs-fixed-bottom-first': viewRow.info.endFirst && !isBottom && isScrollY,
    'vs-is-last-row': viewRow.info.isLast
  }
}
const colClass = ({ viewCol, isScrollX, isLeft, isRight }) => {
  return {
    [viewCol.key]: true,
    'vs-cell': true,
    'vs-fixed-left-last': viewCol.info.startLast && !isLeft && isScrollX,
    'vs-fixed-right-first': viewCol.info.endFirst && !isRight && isScrollX,
    'vs-is-last-col': viewCol.info.isLast
  }
}
const colStyle = ({ viewRow, viewCol }) => {
  return { height: viewRow.style.height, ...viewCol.style }
}
</script>

<style scoped>
/* 樣式部分省略 */
</style>

效果如下：

在這裡插入圖片描述

虛擬樹也可以結合 VirtualScrollBox + Tree 元件進行實現，具體程式碼可以參考以下連結：

https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/v...

更多 VirtualScrollBox 元件的功能，歡迎到 TinyVue 官網進行體驗：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/v...

增加 Sticky 粘性佈局元件

Sticky 元件與 CSS 中 position: sticky 屬性實現的效果一致，當元件在螢幕範圍內時，會按照正常的佈局排列，當元件滾出螢幕範圍時，始終會固定在螢幕頂部。

“吸頂”效果在某些場景下能夠有效提升網頁的可用性和使用者體驗。
1、導航欄：Sticky 元件常用於固定頁面頂部的導航欄。當使用者滾動頁面時，導航欄會保持在視口的頂部，方便使用者隨時訪問其他頁面連結。這種設計提升了使用者體驗，尤其是在內容較長的頁面中。
2、文章標題：在長篇文章中，可以將章節標題設定為 Sticky。當使用者滾動到該章節時，標題會固定在視口頂部，幫助使用者更好地瞭解當前閱讀的位置和內容結構。

使用起來也非常簡單，只需要把需要“吸頂”的元素用 Sticky 元件包裹起來就行。

<tiny-sticky>
  <h2>🎉TinyVue v3.19.0 正式釋出，全面升級到新設計規範，讓 UI 更符合現代審美，並增加虛擬樹、粘性佈局等3個新元件~</h2>
</tiny-sticky>

預設是“吸頂”的，還可以配置“吸底”，設定偏移量、層級等。

  • offset：偏移距離，預設為 0px
  • position：吸附位置，可選值有 top(預設) / bottom
  • z-index：元素層級，預設為 100

效果如下：

在這裡插入圖片描述

更多 Sticky 元件的功能，歡迎到 TinyVue 官網進行體驗：https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/s...

關於OpenTiny

OpenTiny官網：https://opentiny.design\
TinyVue 原始碼：https://github.com/opentiny/tiny-vue （歡迎 Star ⭐）\
TinyEngine 原始碼：https://github.com/opentiny/tiny-engine （歡迎 Star ⭐）\
B站：https://space.bilibili.com/15284299\
歡迎加入 OpenTiny 開源社群。新增微信小助手 opentiny-official 一起參與交流前端技術～

相關文章