@sureking/ui 使用说明

开始

$3

@sureking/ui是基于vue3.0的一套UI组件库，组件库采用CompositionAPI编写支持webpack和vite编译环境。

组件库集成graphql请求，可实现快速原型开发场景
组件库集成pug模版引擎和sass支持

$3

> 目前属于实验阶段，npm i @sureking/ui

$3

> 只需简单在main.js中进行设置

``import { createApp } from 'vue' import App from './App.vue' import ui from '@sureking/ui' // 引入UI组件库 import '@sureking/ui/colors.css' // 引入样式库 createApp(App).use(ui).mount('#app')`

`布局`


@sureking/ui统一采用flex布局
$3

#### .fill 自动填充满父级容器


#### .center 在容器内居中显示

$3

#### .row 容器内横向排列`


#### .row-center 在容器内横向排列并居中显示


#### .row-top-left 在容器内横向排列并靠左上方对齐


#### .row-top-center 在容器内横向排列并靠上方居中对齐


#### .row-top-right 在容器内横向排列并靠右上方对齐


#### .row-middle-left 在容器内横向排列并靠左垂直居中对齐


#### .row-middle-right 在容器内横向排列并靠右垂直居中对齐


#### .row-bottom-left 在容器内横向排列并靠左下方对齐


#### .row-bottom-center 在容器内横向排列并靠下方居中对齐


#### .row-bottom-right 在容器内横向排列并靠下方居中对齐


$3
#### .col 容器内纵向排列


#### .col-center 在容器内纵向排列并居中显示


#### .col-top-left 在容器内纵向排列并靠左上方对齐


#### .col-top-center 在容器内纵向排列并靠上方居中对齐


#### .col-top-right 在容器内纵向排列并靠右上方对齐


#### .col-middle-left 在容器内纵向排列并靠左垂直居中对齐


#### .col-middle-right 在容器内纵向排列并靠右垂直居中对齐


#### .col-bottom-left 在容器内纵向排列并靠左下方对齐


#### .col-bottom-center 在容器内纵向排列并靠下方居中对齐


#### .col-bottom-right 在容器内纵向排列并靠下方居中对齐


图标
> 图标基于iconfont实现,使用图标前需要先设置.ui-icon，如：


> 图标清单
!avatar
组件
$3

样式列表
* mini    小号样式
* tiny    超小号样式
* rounded 圆角样式
* circle  圆形样式
* square  方形样式
* success 成功样式
* warning 警告样式
* danger  危险样式
* info    消息样式
* lighten 浅色样式
* darken  深色样式
---

`// 圆形按钮 // 方形按钮`

`$3`

组件属性 * modelValue 输入值双向绑定属性输入类型 String | Number * password 是否密码组件输入类型 Boolean * placeholder 组件提示信息输入类型 String * readonly 组件是否只读输入类型 Boolean * multi 组件是否为多项文本输入类型 Boolean

---

`$3`


组件属性
* items       组件选择项 输入类型 Array<{key:Any,value:String}>
* modelvalue  组件已选择的项 双向绑定属性 
  - 单选组件输入类型   Any
  - 多选选组件输入类型  Array\
* placeholder 组件提示信息 输入类型 String
* readonly    组件是否只读 输入类型 Boolean
* multi       是否多选组件 输入类型 Boolean
* max         组件显示的最大条数 输入类型 Number，具有此属性输入时，组件会有筛选功能

`// 单选组件 //多选组件`

---

`$3`


组件属性
* modelValue  组件已选择的项 双向绑定属性 输入类型 String 格式为 yyyy-MM-dd
* placeholder 组件提示信息 输入类型 String
* readonly    组件是否只读 输入类型 Boolean

---

`$3`


组件属性
* modelValue 组件已选择的项 双向绑定属性 输入类型 String 格式为 HH:mm:ss
* placeholder 组件提示信息 输入类型 String
* readonly 组件是否只读 输入类型 Boolean

---

`$3`


组件属性
* name  单选按钮组名称 输入类型 String
* items 单选按钮组选项 输入类型 Array<{key:Any,value:String}>
* modelValue 选择值 双向绑定属性 Any

``---

`$3`


组件属性
* name 多选按钮组名称 输入类型 String
* items 多选按钮组选项 输入类型 Array<{key:Any,value:String}>
* modelValue 选择值 双向绑定属性 Array\
* readonly Boolean

---

`$3`


组件属性
* headers 表头定义 输入类型 Array<{key:String,name:String, width:String,align:String}> 
> - key 匹配数据项的属性名称
> - name 表头字段名称
> - width 表格宽度，使用css单位，支持 px rem vw vh pt
> - align 列对齐方式 可选值 'left' 'center' 'right' 
* items 数据项 输入类型 Array\
插槽
可根据数据项的属性名称定义插槽，实现显示数据项的计算值。
插槽返回item和index，item是数据项的当前对象，index是数据项游标。

---

`$3`


组件属性
* modelValue 当前页 输入类型 Number
* total 页数 输入类型 Number

---

`$3`


组件属性
* modelValue 选择项信息 双向绑定属性 输入类型 Array\
* items 数据项 输入类型 Array<{key:String,value:String,image:String}>
* max 显示最大条数 输入类型 Number，具有此属性输入时，组件会有筛选功能
* height 组件高度 输入类型 String，使用 css 单位，支持 px rem vw vh pt
* readonly 组件是否只读 输入类型 Boolean

---

`$3`

组件属性 * width 组件宽度输入类型 String，使用 css 单位，支持 px rem vw vh pt * height 组件高度输入类型 String，使用 css 单位，支持 px rem vw vh pt

插槽

* title 卡片标题

* subtitle 卡片二级标题

* avatar 卡片图片

* actions 卡片操作栏

- text 卡片内容

---

`$3`


组件属性
* show 组件是否显示 输入类型 Boolean
* width 组件宽度 fullscreen为false时有效 输入类型 String，使用 css 单位，支持 px rem vw vh pt
* height 组件高度 fullscreen 为 false 时有效 String，使用 css 单位，支持 px rem vw vh pt
* fullscreen 组件全屏显示 输入类型 Boolean 
插槽
* title 对话框标题

这是对话框内容


---
$3

组件属性
* modelValue 富文本内容 双向绑定属性 输入属性为{html:String} html为富文本的HTML内容 
* readonly 编辑器是否只读 输入类型 Boolean
* placeholder 编辑器输入提示信息 输入类型 String

---

`$3`


> 基于echarts扩展的图表组件
组件属性
* modelValue 图表数据 输入类型 Object 参考echarts的option API
* width 图表宽度 输入类型 String，使用 css 单位，支持 px rem vw vh pt
* height 图表高度 输入类型 String，使用 css 单位，支持 px rem vw vh pt

---

`$3`


组件属性
* accept 上传文件类型 输入类型 String，取值参考HTML标准
* single 是否上传单个文件 输入属性 Boolean
* modelValue  上传文件内容 双向绑定属性 Array | String
* width 图片文件最大宽度 输入属性Number，仅限图片文件上传时使用，上传图片自动按照最大宽度自动压缩
* height 图片文件最大高度 输入属性 Number，仅限图片文件上传时使用，上传图片自动按照最大高度自动压缩