1.0.4 • Published 7 months ago
yj-design-components-vue v1.0.4
vue 组件库
npm i yj-design-components-vue
或
yarn add yj-design-components-vue
来安装工具库函数
v1.0.4 包含组件
- App 包裹组件
- Layout 后台布局组件
- Button 按钮
- Desc 描述列表
- Table 表格
- List 列表
- Form 表单
- SearchBar 搜索条
- Modal 抽屉
- Login 登录页
组件介绍
App 包裹组件
属性
- token 样式
- language 语言
Layout 布局组件
- bgColor 侧边栏和头部的背景色
- triggerPosition 触发位置
bottom
默认值header
- logo logo 位置 需要包含 ellipsis complete 属性
- slideMenu 侧边栏菜单配置
插槽
- headerLeftContent 头部左侧部分 触发器在底部时可用
- headerRightContent 头部右侧位置
- default 内容部分
Button
事件
- click 点击按钮的事件
属性
- confirm 用于配置气泡弹窗
- modal 用于配置弹窗
插槽
- default 按钮内文字
Desc 描述列表
属性
- bordered 边框 默认值
true
- data 描述列表数据
- map 字段映射 下拉选项和函数
- titleMap 名字映射
- addOther 添加其他项的函数
Table 表格
事件
- pageChange 修改分页的事件
属性
- request 请求分页函数 必传 需要返回一个带有 list 和 total 的对象
- columns 列
- rowKey 每行数据唯一值 默认值
id
- bordered 边框 默认值
true
- initParams 默认的请求参数
- align 表格对其方式
left
right
默认值center
- seral 序号列
- ellipsis 表格内容太长自动省略 默认值
true
List 列表
事件
- pageChange 修改分页的事件
属性
- request 请求分页函数 必传 需要返回一个带有 list 和 total 的对象
- rowKey 每行数据唯一值 默认值
id
- bordered 边框 默认值
true
- initParams 默认的请求参数
插槽
- render 渲染的内容
Form 表单
属性
- items 渲染的表单项 todo 样式好像有点问题 因为 vue 的 scoped
- layout 布局方式 非必要不要传
- data 初始化数据
暴露的属性 可以使用 ref 获取
- resetFields 重置数据
- validate 校验
- state 表单数据
插槽
- default 剩余表单项的补充
SearchBar 搜索条
事件
- setInitParams 设置初始的搜索参数 和表格配合用于刷新
属性
- items 和表单 items 一致
- searchHidden 搜索按钮隐藏
- resetHidden 重置按钮隐藏
暴露的属性 可以使用 ref 获取
- search 搜索
- reset 重置
插槽
- extra 更多操作的位置 用于新增按钮
Modal 弹窗
事件
- finish 完成提交时的事件
属性
- isM 判断是使用 弹窗 还是 抽屉 默认 true 弹窗
- title 标题
- items 是一个对象 里面包含和 form 的 items 一致的 r 和数据 data
暴露的属性 可以使用 ref 获取
- open 打开
- close 关闭
Login 登录页
事件
- login 登录
属性
- background 背景色