# 安装依赖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>

<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>

<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>

<tiny-sticky>  <h2>🎉TinyVue v3.19.0 正式发布，全面升级到新设计规范，让 UI 更符合现代审美，并增加虚拟树、粘性布局等3个新组件~</h2></tiny-sticky>