版本更新|OpenTiny Vue 发布了 v3.9.0 。

OpenTiny Vue 发布了 v3.9.0 🎉。

OpenTiny 每次大版本发布，都会给大家带来一些实用的新特性，5.18 我们发布了 v3.8.0 版本，推出了一套全新的极客黑主题。

🎉OpenTiny 3.8.0 正式发布：推出「极客黑」新主题！

本次 3.9.0 版本主要推出以下新特性：

• 新增 Drawer 抽屉组件
• 新增 Guide 引导组件
• 新增 PopConfirm 气泡确认框组件
• 支持 SSR 服务器端渲染

OpenTiny 新增了一名贡献者 @KevinAndrewDong，感谢 @KevinAndrewDong 对 OpenTiny Vue 3.9.0 版本的贡献🤝

大家可以更新 @opentiny/vue@3.9.0 进行体验！

Drawer 抽屉

3.9.0 版本之前，大家要使用抽屉组件，需要使用 Dialog 组件的 right-slide 属性。

html

<tiny-dialog-box right-slide v-model:visible="dialogVisible" title="OpenTiny是什么">
  <p>OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。</p>
</tiny-dialog-box>

效果如下：

由于抽屉组件没有一个单独的 Drawer 组件，大家在咱们的组件库官网搜索 Drawer 或者 抽屉等关键字时，搜索不到这个组件，经常有人问我们有没有抽屉组件。

另外由于 DialogBox 组件的 right-slide 属性只能配置从右侧进行弹出，如果有用户想要从左边弹出就没法支持啦。

出于以上原因，我们决定单独抽取一个 Drawer 组件，包含丰富的功能：

• 支持left|right|top|bottom4个方向弹出抽屉
• 支持定制抽屉宽度，以及动态拖拽改变抽屉的宽度
• 支持 default/header/footer 等丰富的插槽

更多丰富的功能可以在 OpenTiny 官网体验，也可以尝试单独安装 Drawer 组件进行体验。

安装 OpenTiny 的 Drawer 组件

shell

npm i @opentiny/vue-drawer@3.9.0

在 App.vue 中使用

vue

<script setup lang="ts">
import { ref } from 'vue'
import { Button as TinyButton } from '@opentiny/vue'
import TinyDrawer from '@opentiny/vue-drawer'

const drawerVisible = ref(false)
const openDrawer = () => {
  drawerVisible.value = true
}
</script>
<template>
  tiny-button @click="openDrawer">打开抽屉</tiny-button>
  <tiny-drawer v-model:visible="drawerVisible" title="OpenTiny是什么" dragable>
    <!-- 默认插槽的内容是可以自行定义，比如：可以是表格行的详情内容 -->
    <p>OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。</p>
  </tiny-drawer>
</template>

效果如下：

Guide 引导

当我们的产品推出一个比较复杂的新特性时，一般会在用户第一次使用产品时弹出一个用户指引，让用户更好地使用我们的产品，提升用户体验和满意度。

这时就需要用户指引组件 Guide，OpenTiny 的 Guide 组件效果如下：

使用方式也很简单：

<script setup lang="ts">
import {
  Guide as TinyGuide
} from '@opentiny/vue'

const guideData = [
  {
    title: '安装 OpenTiny Vue 组件库',
    text: '执行 npm i @opentiny/vue 命令，即可安装 OpenTiny Vue。',
    domElement: '.box1',
    button: [
      {
        text: '下一步',
        action: 'next'
      }
    ]
  },
  {
    title: '引入 Guide 组件',
    text: '<div class="scrollBox">import { Guide as TinyGuide } from '@opentiny/vue'</div>',
    domElement: '.box2',
    button: [
      {
        text: '上一步',
        action: 'back',
        secondary: true
      },
      {
        text: '下一步',
        action: 'next'
      }
    ]
  },
  {
    title: '使用 Guide 组件',
    text: '<div class="scrollBox">在 App.vue 中使用 Guide 组件。</div>',
    domElement: '.box3',
    button: [
      {
        text: '上一步',
        action: 'back',
        secondary: true
      },
      {
        text: '完成',
        action: 'complete'
      }
    ]
  }
]
</script>

<template>
  <tiny-guide :dom-data="guideData"></tiny-guide>
</template>

效果如下：

PopConfirm 气泡确认框

PopConfirm 组件用于删除确认提示等场景，基于 Popover 组件进行封装。

使用起来很方便：

<script setup lang="ts">
import { Popconfirm as TinyPopConfirm } from '@opentiny/vue'
</script>

<template>
  <tiny-pop-confirm title="删除确认" content="确定要删除这条数据吗？" type="warning" trigger="click">
    <template #reference>
      <tiny-button type="danger">删除</tiny-button>
    </template>
  </tiny-pop-confirm>
</template>

效果如下：

支持 SSR

为了扩展 OpenTiny Vue 组件库的使用场景，支持在 Vitepress、Nuxt 等 SSG/SSR 场景中使用，我们在 3.9.0 版本中增加了对 SSR 的支持，欢迎大家体验。

更多版本特性，请查看以下链接：https://github.com/opentiny/tiny-vue/releases/tag/v3.9.0

关于 OpenTiny

OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。

核心亮点：

1. 跨端跨框架：使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3，PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。
2. 组件丰富：PC 端有80+组件，移动端有30+组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等
3. 配置式组件：组件支持模板式和配置式两种使用方式，适合低代码平台，目前团队已经将 OpenTiny 集成到内部的低代码平台，针对低码平台做了大量优化
4. 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板，提供覆盖前端开发全流程的 TinyCLI 工程化工具，提供强大的在线主题配置平台 TinyTheme

联系我们：

• 官方公众号：OpenTiny
• OpenTiny 官网：https://opentiny.design/
• OpenTiny 代码仓库：https://github.com/opentiny/
• Vue 组件库：https://github.com/opentiny/tiny-vue （欢迎 Star）
• Angluar组件库：https://github.com/opentiny/ng （欢迎 Star）
• CLI工具：https://github.com/opentiny/tiny-cli （欢迎 Star）