咱们非常高兴地发表，2023年8月14日，OpenTiny Vue 公布了 v3.10.0 。

OpenTiny 每次大版本公布，都会给大家带来一些实用的新个性，上一个版本咱们推出了3个新组件，并且提供 SSR 反对。

OpenTiny Vue 3.9.0 版本公布：新增3个新组件、反对 SSR

本次 3.10.0 版本次要推出以下新个性：

  • 新增 DialogSelect 弹窗抉择组件
  • 新增 FilterPanel 过滤面板组件
  • 新增 TagGroup 标签组组件
  • 新增 InfiniteScroll 有限滚动组件
  • 官网组件 Demo 反对 Composition api 写法
  • 组件 Demo 反对 Playground 代码演练场

OpenTiny 新增了以下新的贡献者：

  • @gimmyhehe
  • @chenqifeng66
  • @Zz-ZzzZ
  • @lyx-jay

感激你们对 OpenTiny Vue 的奉献

你能够更新 @opentiny/vue@3.10.0 进行体验！

组件Demo反对Composition写法

OpenTiny Vue 基于无渲染组件设计架构，可同时反对 Vue2 和 Vue3，然而咱们的官网组件 Demo 在 3.10.0 版本之前只有 Options api 的写法，导致很多应用 Vue3 的开发者用起来很不不便，于是咱们优化了文档的出现，参考 Vue 官网，减少了 Options(选项式) 和 Composition(组合式) 两种写法的切换。

你能够在官网进行体验：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/bu...

提供Playground

在理论我的项目中，往往须要依据不同的品牌、格调、场景等需要来定制不同的主题，而组件库的主题标准往往是固定的，无奈满足这种需要。因而，提供主题标准自定义的性能，能够让用户依据本人的需要来定制主题，从而更好地满足我的项目需要。

8月初，xiaoy 同学给咱们奉献了 OpenTiny Vue Playground 我的项目：

《但因酷爱，愿迎万难，OpenTiny Vue Playground正式上线》

咱们将这个我的项目集成到了 OpenTiny 的官网，当初你能够在每个组件 Demo 的右上角点击“关上演练场”的按钮，在演练场中编辑这个 Demo，并实时查看批改后的组件成果，是不是十分不便。

你能够在以下链接进行体验：https://opentiny.design/tiny-vue/playground?cmpId=button&file...

DialogSelect弹窗抉择

这个组件用于抉择数据，和 Select 下拉抉择组件不同的是：

Select 抉择的是列表数据，而 DialogSelect 抉择的是表格和树型数据，并且反对对选中的数据进行便捷地排序。

你能够在以下链接体验这个组件的交互成果。

https://opentiny.design/tiny-vue/zh-CN/os-theme/components/di...

当咱们只须要在一个简略的列表中抉择数据，应用 Select 毫无疑问是最简略的，然而一旦咱们要抉择的数据非常复杂，须要应用一个表格能力出现，并且须要对数据进行过滤、分页、排序等操作时，Select 组件就力不从心啦。

比方微信公众号抉择文章链接的性能，就有点相似 DialogSelect 的成果。

你能够应用 DialogSelect 来实现简单数据的抉择。应用起来也很简略，只须要配置：

  • v-model:visible：用来管制弹窗的显示和暗藏
  • grid-op：配置表格列和数据
<template>  <div class="tiny-demo">    <tiny-button @click="dialogSelectVisible = !dialogSelectVisible">关上</tiny-button>    <tiny-dialog-select      v-model:visible="dialogSelectVisible"      :grid-op="state.gridOp"    >    </tiny-dialog-select>  </div></template><script setup lang="ts">import { ref } from 'vue'import {  DialogSelect as TinyDialogSelect,  Button as TinyButton} from '@opentiny/vue'const dialogSelectVisible = ref(false)const gridOp = ref({  columns: [    { field: 'id', title: 'ID', width: 40 },    { field: 'name', title: '名称', showOverflow: 'tooltip' },    { field: 'province', title: '省份', width: 80 },    { field: 'city', title: '城市', width: 80 }  ],  data: [    { id: '1', name: 'GFD科技有限公司', city: '福州', province: '福建' },    { id: '2', name: 'WWW科技有限公司', city: '深圳', province: '广东' },    { id: '3', name: 'RFV有限责任公司', city: '中山', province: '广东' },    { id: '4', name: 'TGB科技有限公司', city: '龙岩', province: '福建' },    { id: '5', name: 'YHN科技有限公司', city: '韶关', province: '广东' },    { id: '6', name: 'WSX科技有限公司', city: '黄冈', province: '湖北' },    { id: '7', name: 'KBG物业有限公司', city: '赤壁', province: '湖北' },    { id: '8', name: '深圳市福德宝网络技术有限公司', city: '深圳', province: '广东' },    { id: '9', name: 'KBG物业有限公司', city: '赤壁', province: '湖北' },    { id: '10', name: '深圳市福德宝网络技术有限公司', city: '深圳', province: '广东' }  ]})</script>

效果图如下：

该组件次要反对以下性能：

  • 反对表格和树两种数据的抉择
  • 反对单选和多选
  • 反对对表格数据进行分页
  • 反对对已抉择的数据进行拖拽排序

你能够在以下链接体验该组件的更多功能：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/di...

FilterPanel过滤面板

过滤面板如它的名字，用来显示过滤条件的，这个组件次要蕴含几个局部：

  • 一个过滤字段名称
  • 两头的过滤条件（可删除）
  • 过滤面板（可通过插槽自定义）

用起来也很简略。

<template>  <div>    <tiny-filter-panel ref="filterPanelRef" label="物品数量" @handle-clear="handleClear" :value="value">      <tiny-radio-group v-model="radioVal" size="mini">        <tiny-radio label="大于">大于</tiny-radio>        <tiny-radio label="等于">等于</tiny-radio>        <tiny-radio label="小于">小于</tiny-radio>      </tiny-radio-group>      <tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>    </tiny-filter-panel>  </div></template><script setup>import { ref, computed } from 'vue'import {  FilterPanel as TinyFilterPanel,  Radio as TinyRadio,  RadioGroup as TinyRadioGroup,  Input as TinyInput} from '@opentiny/vue'const inputVal = ref('')const radioVal = ref('')const value = computed(() => {  return radioVal.value + inputVal.value})function handleClear() {  radioVal.value = ''  inputVal.value = ''}</script>

成果如下：

你能够在以下链接体验该组件：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/fi...

TagGroup标签组

标签组是对标签组件能力的扩大，可能通过数据驱动的形式配置一组标签，并在显示不下的时候应用 ... 进行折叠展现。

应用起来也很简略，只须要配置下 data 属性即可。

<template>  <tiny-tag-group :data="data"></tiny-tag-group></template><script setup>import { ref } from 'vue'import { TagGroup as TinyTagGroup } from '@opentiny/vue'const data = ref([  {    name: '标签一',    type: 'default'  },  {    name: '标签二',    type: 'default'  },  {    name: '标签三',    type: 'default'  },  ...])</script>

成果如下：

你能够在以下链接体验该组件：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/ta...

InfiniteScroll 有限滚动

数据量超大的场景下，咱们不心愿一次性显示全副数据，就会应用滚动到底部再加载下一页数据的交互，这就是 InfiniteScroll 组件提供的能力。

你须要留神有限滚动组件和虚构列表组件的区别：

有限滚动组件和虚构列表组件都是滚动时动静加载数据，然而虚构列表个别是有固无限数量的DOM元素，滚动时动静往DOM元素内插入数据，而有限滚动时会随着滚动一直往页面插入新的DOM元素。

大家能够看下动画感触下有限滚动组件的成果。

应用形式很简略：

<template>  <ul v-infinite-scroll="load" class="tiny-infinite-list">    <li v-for="i in count" :key="i" class="tiny-infinite-list-item">{{ i }}</li>  </ul></template><script setup lang="ts">import InfiniteScroll from '@opentiny/vue-renderless/common/deps/infinite-scroll'import { ref } from 'vue'const count = ref(0)const vInfiniteScroll = InfiniteScrollconst load = () => {  count.value += 2}</script>

成果如下：

你能够在以下链接体验该组件：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/in...

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

对于 OpenTiny

OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 挪动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，领有主题配置零碎 / 中后盾模板 / CLI 命令行等效率晋升工具，可帮忙开发者高效开发 Web 利用。

外围亮点：

  1. 跨端跨框架：应用 Renderless 无渲染组件设计架构，实现了一套代码同时反对 Vue2 / Vue3，PC / Mobile 端，并反对函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。
  2. 组件丰盛：PC 端有100+组件，挪动端有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）

更多视频内容也能够关注OpenTiny社区，B站/抖音/小红书/视频号。