Vue3 组件 view-shadcn-ui 2024.2.0 发布

来源: 投稿
2024-11-04 10:08:00
AI总结

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

📚 文档

✨ 新功能

  • 添加图标组件 (f96fcb1)
  • 面包屑: 支持基础功能 (2077639)
  • 面包屑: 支持分隔符 (c66c5cb)
  • 按钮: 支持按钮组 (6af11cf)
  • 按钮: 支持按钮组 (e395b38)
  • 按钮: 支持点击外部事件 (f6d63cf)
  • 按钮: 支持路由模式 (b42f4b4)
  • 按钮: 支持提交和重置 (fb41326)
  • 卡片: 支持边框 (ab05270)
  • 卡片: 支持仅内容加载 (d7b0f92)
  • 折叠面板: 支持基础功能 (3f7a513)
  • 折叠面板: 支持改变事件 (e2194fa)
  • 核心: 添加依赖清理 (f467318)
  • 核心: 移除无效文件 (ea878ae)
  • 下拉菜单: 支持分割线 (871c2fd)
  • 下拉菜单: 支持基础功能 (d9cf877)
  • 下拉菜单: 支持点击外部事件 (9eec3c4)
  • 下拉菜单: 支持定位 (04cbb1f)
  • 环境: 添加自动更新日志 (79d7780)
  • 异常处理: 支持401页面 (cde090e)
  • 异常处理: 支持基础功能 (d52ba32)
  • 异常处理: 支持插槽 (b4359e3)
  • 表单: 支持基础功能 (45d78f1)
  • 表单: 支持项目描述 (c3b1619)
  • 全局页脚: 支持基础功能 (e4038b6)
  • 高亮: 支持大小写敏感 (68b1c94)
  • 高亮: 支持基础功能 (fe16e89)
  • 输入框: 支持失去焦点事件 (592d444)
  • 链接: 支持外部链接 (fe08b6e)
  • 链接: 支持基础功能 (a92f35f)
  • 链接: 支持目标属性 (b42c47f)
  • 菜单: 支持路由模式 (655d9c2)
  • 选择框: 添加收缩和展开指示器 (65c77cb)
  • 滑块: 支持背景颜色 (8913585)
  • 滑块: 支持禁用状态 (9712e48)
  • 滑块: 支持基础功能 (2ad8700)
  • 滑块: 支持显示步骤 (c27b302)
  • 滑块: 支持步长 (26a361b)
  • 滑块: 支持提示 (79579d6)
  • 加载中: 支持居中对齐 (ecf78d8)
  • 加载中: 支持全局引入 (849efb4)
  • 加载中: 支持基础功能 (7f23495)
  • 加载中: 支持尺寸设置 (c47f6f2)
  • 加载中: 支持插槽 (1ba70f6)
  • 加载中: 支持类型 (0d7b238)
  • 表格: 支持最小高度 (58f2807)
  • 表格: 支持尺寸设置 (40ab968)
  • 标签: 支持边框 (6b4f771)
  • 标签: 支持可关闭 (a7156f2)
  • 标签: 支持颜色 (10cd330)
  • 标签: 支持基础功能 (448a44f)
  • 标签: 支持关闭事件 (8b5a59f)
  • 标签: 支持类型 (f7b0f41)
  • 时间线: 添加讨论示例 (3262677)
  • 时间线: 支持基础功能 (4b22bc0)
  • 时间线: 支持分割模式 (3357e01)
  • 工具栏页脚: 支持自动隐藏 (b9db24a)
  • 工具栏页脚: 支持自动隐藏延迟 (f1f6d6c)
  • 工具栏页脚: 支持全宽度 (e761aa4)
  • 工具栏页脚: 支持滚动时隐藏 (f190251)
  • 工具栏页脚: 支持基础功能 (c0a6311)
  • 工具栏页脚: 支持滚动停止延迟 (342e66d)
  • 工具栏页脚: 支持 v-model (6fc4d1a)
  • 趋势: 支持基础功能 (484cf08)
  • 趋势: 支持反向显示 (7da4cb7)
  • 趋势: 支持文本颜色 (8860fba)
  • 工具: 支持部分工具函数 (152a663)
  • 水印: 支持全屏显示 (5b7ca54)
  • 水印: 支持基础功能 (dfc3f2a)

🐛 问题修复

  • 徽章: 修复默认值位置 (65fa5de)
  • 徽章: 修复默认值位置未传递异常 (e41e160)
  • 按钮: 修复圆形样式 (cad2403)
  • 卡片: 修复自定义卡片标题样式无效 (b3b7c10)
  • 下拉菜单: 修复超出容器导致拉伸的问题 (ad6d072)
  • 下拉菜单: 修复悬停触发时的位置 (e6de99a)
  • 异常处理: 修复位置问题 (9d15bf9)
  • 异常处理: 修复插槽不生效 (91619d4)
  • 表单: 修复默认消息 (f031d13)
  • 表单: 修复未报告消息 (26fc28a)
  • 输入框: 修复最大宽度 (2bb4540)
  • 输入框: 修复空值问题 (3104ee5)
  • 输入框: 修复 provide 和 inject 类型 (43b860b)
  • 链接: 修复链接样式 (20f6da7)
  • 选择框: 修复自定义选项导致默认选择异常的问题 (3b3ca92)
  • 选择框: 修复宽度问题 (5504971)
  • 时间线: 修复间距 (bdbd20c)
  • 提示框: 修复自动宽度 (2111a8b)
  • 提示框: 修复代码编译 (9e82ce4)
  • 提示框: 修复长度问题 (f73a749)
  • 提示框: 修复自动定位超出屏幕的问题 (b829fd1)

全局引用

修改 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://shadcn.vue.devlive.org

展开阅读全文
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
分享
AI总结
返回顶部
顶部