你好,我是 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/virtual-tree
增加 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/virtual-scroll-box#tree
更多 VirtualScrollBox 元件的功能,歡迎到 TinyVue 官網進行體驗:https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/virtual-scroll-box
增加 Sticky 粘性佈局元件
Sticky 元件與 CSS 中 position: sticky
屬性實現的效果一致,當元件在螢幕範圍內時,會按照正常的佈局排列,當元件滾出螢幕範圍時,始終會固定在螢幕頂部。
“吸頂”效果在某些場景下能夠有效提升網頁的可用性和使用者體驗。
- 導航欄:Sticky 元件常用於固定頁面頂部的導航欄。當使用者滾動頁面時,導航欄會保持在視口的頂部,方便使用者隨時訪問其他頁面連結。這種設計提升了使用者體驗,尤其是在內容較長的頁面中。
- 文章標題:在長篇文章中,可以將章節標題設定為 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/sticky
聯絡我們
GitHub:https://github.com/opentiny/tiny-vue(歡迎 Star ⭐)
官網:https://opentiny.design/tiny-vue
B站:https://space.bilibili.com/15284299
個人部落格:https://kagol.github.io/blogs
小助手微信:opentiny-official
公眾號:OpenTiny