Smart Design of Vue

B+ Design 是基于 B+ Design System 设计体系的 Vue UI 组件库，主要用于研发企业级中后台产品。

• 组件设计体系：B+ Design

+

特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 Vue 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。

兼容环境

• 现代浏览器
• 支持服务端渲染。

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

版本

• 稳定版：1.3.0

版本修改说明

暂时手动精简维护，后续可以结合脚手架&changelog实现自动记录版本变更

• 版本1.3.0
  • feat: 分组下拉选封装
• 版本1.2.0
  • feat: 优化组件溢出提示漏记
  • feat: Calendar 日历组件添加
• 版本1.1.0
  • feat:icon使用cdn地址
• 版本1.0.9
  • feat:更新字体图标
• 版本1.0.8
  • fix: withInstall排除重复项
• 版本1.0.7
  • feat:更新iconfont
  • perf: 导出empty组件svg遗漏属性
• 版本1.0.6
  • fix: 浅拷贝两层处理table列操作重置
  • fix: 短横线命名改动引起select不能插槽问题
• 版本1.0.5
  • fix: colunm浅拷贝处理虚拟dom不能传入&处理type警告
  • feat: 多选下拉超出提示文案内容，添加滚动条
• 版本1.0.4
  • feat: 更新icon
  • docs: 添加大仓入口
• 版本1.0.3
  • fix: 解决复选框多选不能短横向命名问题
• 版本1.0.2
  • fix: 日志时间轴组件则折叠图标错误
• 版本1.0.1
  • feat: 日志时间轴组件开发
• 版本1.0.0-beta.x
  • 新增FIcon组件支持多色图标及自定义颜色字号，其中scriptUrl支持属性配置及全局设置setScriptUrl(默认scriptUrl最好传入一个公共访问空间,以应对设计更新iconfont中的图标库)
  • 扩展Tabs组件type字段及增加special属性，详见使用示例及源码
  • Steps步骤条组件，设计师认为仅表示状态，只有在navigation模式才有交互，所以增加了isAllowClick属性，同时根据UI规范扩展了type和size字段
  • Avatar 图像组件，size 属性扩展 mini 选项
  • Tag组件新增border,size,inverse,checkable,v-model(checked)属性
  • Message组件暴露组件实例函数式调用APImessage
  • Popconfirm组件新增content属性
  • Progress组件新增pause属性
  • Anchor锚点组件，新增unline属性控制边线，bar属性控制高亮bar类型
  • Table修改了table的默认尺寸default改为middle。新增columnOperated显示列操作，columnDropdown设置列操作的弹框属性。新增sizeOperated显示尺寸操作，sizeDropdown设置尺寸操作的弹框属性。
  • Cascader、DatePicker、RangePicker、MonthPicker、WeekPicker、TimePicker、QuarterPicker、TimeRangePicker、Input、Textarea、InputNumber、InputSearch、InputPassword、Select、TreeSelect组件，按UI规范增加了pressLine属性，表明组件左上角文本
  • TimeAxis时间轴组件自定义开发，支持vertical、horizontal两个方向。提供left、right、bottom、top、alternate布局方式
  • Transfer穿梭框组件扩展showHeaderDropdown和removeAll属性，其中removeAll仅在oneWay模式下生效，且针对此模式扩展slot:rightTitleIcon插槽，另外增加removeAllTargetKeys事件
  • Select组件mode扩展了checkbox-multiple选项
  • 注意Switch,Checkbox,Radio组件与ant所有数据录入组件有差异v-model:value和v-model:checked,且Checkbox,Radio两组件由于API设计已使用value故无法抹平差异，二次封装Form需要单独处理
  • Input组件扩展type属性，扩展了search-clear的交互方式。扩展了clear、search事件。
  • 新增FTimeAxisLogs组件，用于时间日志业务场景展示。

安装

使用 pnpm 或 npm 或 yarn 安装

我们推荐使用 pnpm 或 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

添加 npm 源

• 1.安装 nrm 或者手动去修改 npm 的源
• 2.执行 nrm add fs https://verdaccio.fs.com/ 添加源
• 3.执行 nrm test 等待后，是否能连通该源
• 4.执行 nrm use fs 切换 npm 的源为 fs

示例

import SmartDesign from '@fs/smart-design'
app.use(SmartDesign)

引入样式：

import '@fs/smart-design/dist/style.css'