Vue3 组件 view-shadcn-ui 2024.5.0 发布

体验【开源中国】全新APP，一站式掌握开源技术动态，即刻下载，开启您的开源技术探索之旅！

View Shadcn UI 是一个基于 Tailwind CSS 构建的组件库。

推荐一套为 Java 开发人员提供方便易用的 SDK 来与目前提供服务的的 Open AI 进行交互组件：https://github.com/devlive-community/openai-java-sdk

推荐一套功能强大的开源数据中台系统：https://github.com/devlive-community/datacap

组件源码地址：https://github.com/devlive-community/view-shadcn-ui

🐛 Bug 修复

• 核心: 修复 CI (5daea84)
• 按钮: 修复插槽问题 (d7f795c)
• 按钮: 修复加载状态下内容缺失的问题 (ba29ece)
• 按钮: 修复在加载状态下设置尺寸导致的图标异常问题 (6d4bd4f)
• 开关: 修复点击事件未被正确阻止的问题 (fa13012)

✨ 新功能

• 数据构建器: 适配所有字段 (e25d9e9)
• 数据构建器: 支持大屏 (17acd5f)
• 数据构建器: 支持编辑器 (3d17865)
• 数据构建器: 支持标尺 (ab5218d)
• 数据构建器: 支持从位置 0 开始 (2842f2b)
• 数据构建器: 适配基础配置组件 (96dccfc)
• 数据构建器: 适配组件配置 (d9a2ebb)
• 数据构建器: 修复组件可以移出画布的问题 (927d099)
• 数据构建器: 支持画布居中 (d4fdd35)
• 数据构建器: 支持画布样式 (8069f57)
• 数据构建器: 支持点击画布取消选中组件 (e4e561f)
• 数据构建器: 支持组件删除 (9e5f4c9)
• 数据构建器: 支持组件缩放 (1370271)
• 数据构建器: 支持组件插槽 (c8789d2)
• 数据构建器: 支持编辑器 (61930df)
• 数据构建器: 支持参考线 (6c03c63)
• 数据构建器: 支持面板标签插槽 (63d0644)
• 数据构建器: 支持显示工具栏 (bc27bc2)
• 数据构建器: 支持视图 (307ec7e)
• 数据构建器: 支持宽度和高度设置 (627d582)
• 上传: 支持上传功能 (65720c2)
• 核心: 将 npm 替换为 pnpm (e8ba631)
• 核心: 支持国际化 (371932c)

全局引用

修改 main.ts 入口文件中的配置如下:

 import { createApp } from 'vue' import App from './App.vue' const app = createApp(App)  // Import View Shadcn UI import ViewShadcnUI from 'view-shadcn-ui' app.use(ViewShadcnUI) 

 

按需引用

 import { ShadcnButton } from 'view-shadcn-ui' app.component('ShadcnButton', ShadcnButton) 

 

或者

 <template>     <ShadcnButton>Button</ShadcnButton> </template>  <script setup>     import { ShadcnButton } from 'view-shadcn-ui' </script> 

 

推荐一套全平台数据库管理工具，建议下载使用: https://github.com/devlive-community/dbm

我们即将推出一套开源新系统。InfoSphere 是一款面向企业和个人的开源 Wiki 系统，旨在提供简单而强大的知识管理解决方案。建议尝试使用: https://github.com/devlive-community/incubator-infosphere

欢迎大家前往测试站点使用并提出宝贵的建议，如果您有需要实现的布局，可以提交 issues 我们会在最快的时间内实现。

我们的示例地址为：https://view-shadcn-ui.devlive.org

询问AI