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

作者：OpenTiny社区

2023-07-14
中国香港
本文字数：2734 字
阅读完需：约 9 分钟

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 应用。

核心亮点：

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

发布于: 刚刚阅读数: 3

OpenTiny社区

关注

还未添加个人签名 2023-06-06 加入

我们是华为云的 OpenTiny 开源社区，会定期为大家分享一些团队内部成员的技术文章或华为云社区优质博文，涉及领域主要涵盖了前端、后台的技术等。

发布

暂无评论

创作场景

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

Drawer 抽屉

Guide 引导

PopConfirm 气泡确认框

支持 SSR

关于 OpenTiny

OpenTiny社区

评论