乐趣区

关于前端:OpenTiny-Vue-3100-版本发布组件-Demo-支持-Composition-写法新增4个新组件

jiezi

咱们非常高兴地发表，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 = InfiniteScroll

const 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 站 / 抖音 / 小红书 / 视频号。

退出移动版