@sureking/ui

v1.0.21

Published

3 years ago

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

Downloads

0High
0Medium
0Low

mickfoely

@sureking/ui 使用说明

开始

介绍

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

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

安装

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

使用

只需简单在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布局

通用布局

.fill 自动填充满父级容器

<div class="fill"></div>

.center 在容器内居中显示

<div class="center"></div>

横向布局

.row 容器内横向排列

<div class="row"></div>

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

<div class="row-center"></div>

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

<div class="row-top-left"></div>

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

<div class="row-top-center"></div>

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

<div class="row-top-right"></div>

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

<div class="row-middle-left"></div>

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

<div class="row-middle-right"></div>

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

<div class="row-bottom-left"></div>

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

<div class="row-bottom-center"></div>

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

<div class="row-bottom-right"></div>

纵向布局

.col 容器内纵向排列

<div class="col"></div>

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

<div class="col-center"></div>

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

<div class="col-top-left"></div>

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

<div class="col-top-center"></div>

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

<div class="col-top-right"></div>

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

<div class="col-middle-left"></div>

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

<div class="col-middle-right"></div>

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

<div class="col-bottom-left"></div>

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

<div class="col-bottom-center"></div>

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

<div class="col-bottom-right"></div>

图标

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

<div class="ui-icon icon-query">

图标清单

组件

button 按钮

样式列表

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

<button>普通按钮</button>
<button class="mini success"> 小号按钮</button>
<button class="tiny warning"> 超小按钮</button>
<button class="rounded danger">圆角按钮</button>
<button class="circle info ui-icon icon-edit"></button> // 圆形按钮
<button class="square lighten ui-icon icon-delete"></button> // 方形按钮

v-input 输入框组件

组件属性

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

<v-input v-model="defaultValue" placeholder="填写默认值" password :readonly="false" :multi="false"></v-input>

v-select 选择框组件

组件属性

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

// 单选组件
<script>
...
const singleValue = ref(1)
...
</script>
<template>
<v-select :items="[{key:1,value:'男'},{key:1,value:'女'}]" v-model="singleValue
" :readonly="false" placeholder="选择性别"></v-select>
</template>
//多选组件
<script>
...
const multiValue = ref([1,2])
...
</script>
<template>
<v-select :items="[
{key:1,value:'广东'},
{key:2,value:'湖南'},
{key:3,value:'广西'},
{key:4,value:'浙江'},
{key:5,value:'湖北'},
{key:6,value:'福建'},
{key:7,value:'海南'},
{key:8,value:'河南'},
{key:9,value:'江苏'},
{key:10,value:'安徽'},
{key:11,value:'山东'},
]" v-model="multiValue" :readonly="false" placeholder="选择地区" :multi="true"></v-select>
</template>

v-date 日期选择器组件

组件属性

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

<script>
...
const dateValue = ref('2020-01-04')
...
</script>
<template>
<v-date v-model="dateValue" placeholder="请选择日期" :readonly="false"></v-date>
</template>

v-time 时间选择器组件

组件属性

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

<script>
...
const timeValue = ref('12:05:59')
...
</script>
<template>
<v-time v-model="timeValue" placeholder="请选择时间" :readonly="false"></v-time>
</template>

v-radio 单选按钮组件

组件属性

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

<script>
...
const radioValue = ref(1)
...
</script>
<template>
<v-radio name="radio" :items="[{key:0,value:'好'},{key:1,value:'一般'},{key:2,value:'差'}]" v-model="radioValue" :readonly="false"></v-radio>
</template>

v-check 多选按钮组件

组件属性

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

<script>
...
const checkValue = ref([0,1])
...
</script>
<template>
<v-check name="check" :items="[{key:0,value:'好'},{key:1,value:'一般'},{key:2,value:'差'}]" v-model="checkValue" :readonly="false"></v-check>
</template>

v-table 表格组件

组件属性

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<Object>

插槽

可根据数据项的属性名称定义插槽，实现显示数据项的计算值。插槽返回item和index，item是数据项的当前对象，index是数据项游标。

<!--插槽定义-->
<template v-slot:数据项的属性名称="{item,index}"> {{index+1}}</template>

<v-table :headers="[{key: 'student_no', name: '学号', width: '30px', align: 'center'},{key: 'name', name: '姓名', align: 'center'}]" :items="[{student_no: '1', name:'张三'},{student_no: '2', name:'李四'}]">
  <template v-slot:student_no="{item,index}"> 学号：{{item.student_no}} 序号：{{index+1}}</template>
</v-table>

v-pagination 分页组件

组件属性

modelValue 当前页输入类型 Number
total 页数输入类型 Number

<script>
...
const page = ref(1)
...
</script>
<template>
<v-pagination v-model="page" :total="10"><v-pagination>
</template>

v-list 列表组件

组件属性

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

<script>
...
const listValue = ref(['a01','a02'])
...
</script>
<template>
<v-list v-model="listValue" :items="[{key:'a01',value:'商品1',image:'http://127.0.0.1:1025/images/a01.jpg'},{key:'a02',value:'商品2',image:'http://127.0.0.1:1025/images/a02.jpg'}]" height="300px" :readonly="false"></v-list>
</template>

v-card 卡片组件

组件属性

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

插槽

title 卡片标题

<template v-slot:title>这是标题</template>

subtitle 卡片二级标题

<template v-slot:subtitle>这是二级标题</template>

avatar 卡片图片

<template v-slot:avatar><img src="http://127.0.0.1:1025/image/avatar.jpg"/></template>

actions 卡片操作栏

<template v-slot:actions><button class="mini info rounded">查看</button></template>

text 卡片内容

<template v-slot:text>这是内容</template>

<v-card width="400px" height="300px">
  <template v-slot:avatar><img src="http://127.0.0.1:1025/image/avatar.jpg"/></template>
  <template v-slot:title>这是标题</template>
  <template v-slot:subtitle>这是二级标题</template>
  <template v-slot:text>这是内容</template>
  <template v-slot:actions><button class="mini info rounded">查看</button></template>
</v-card>

v-dialog 对话框组件

组件属性

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 对话框标题

<template v-slot:title>这是对话框标题</template>

<v-dialog :show="true" width="800px" height="600px" :fullscreen="false">
  <template v-slot:title>这是对话框标题</template>
  <div>这是对话框内容</div>
</v-dialog>

v-editor 富文本编辑器组件

组件属性

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

<script>
...
const editorValue = ref({html:'<div>这是富文本</div>'})
...
</script>
<template>
<v-editor v-model="editorValue" placeholder="请输入富文本" :readonly="false"></v-editor>
</template>

v-chart 图表组件

基于echarts扩展的图表组件组件属性

modelValue 图表数据输入类型 Object 参考echarts的option API
width 图表宽度输入类型 String，使用 css 单位，支持 px rem vw vh pt
height 图表高度输入类型 String，使用 css 单位，支持 px rem vw vh pt

<script>
...
const option = ref({
  title: {text: 'ECharts 入门示例'},
  legend: {data: ['销量']},
  xAxis: {
    data: [
        '衬衫', 
        '羊毛衫', 
        '雪纺衫', 
        '裤子', 
        '高跟鞋', 
        '袜子'
      ]
  },
  series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]    
  })
...
</script>
<template>
<v-chart width="40vw" height="40vh"
 v-model="option"></v-chart>
</template>

v-upload 上传组件

组件属性

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

<script>
...
const uploadValue = ref('1e8228de-7aac-4507-a436-04a85a695fbe')
const {proxy} = getCurrentInstance()
// 把文件上传到服务器
proxy.$upload(uploadValue).then((res)=>{
  //res 为上传服务器后返回的值
})
...
<script>
<template>
<v-upload v-model="uploadValue" :single="false" accept="image/*" :width="750" :height="750"></v-upload>
</template>

VUE扩展API

$message 消息框

方法

$message(title:String,text:String):Promise<Boolean>

参数

title 消息框标题
text 消息内容

返回值：Promise<Boolean> 是否点击了确认按钮

const {proxy} = getCurrentInstance()
proxy.$messsage('标题','内容').then(res=>{
  if(res){
    // 点击了确认按钮
  }else{
    // 点击了取消按钮或取消了消息框
  }
})

$alert 提示框

方法

$alert(message:String, type:'info'|'success'|'warning'|'wrong'):void

参数

message 提示小修内容
type 提示类型，支持'info' 'success' 'warning' 'wrong' 四种类型提示

返回值：无

const {proxy} = getCurrentInstance()
proxy.$alert('信息保存成功','success')

$open 文件选择框

方法

$open(accept:String):Promise<Blob>

参数

accept 打开文件类型输入类型 String，取值参考 HTML 标准

返回值：Promise<Blob> 所选文件的blob对象

const {proxy} = getCurrentInstance()
proxy.$open('image/jpg,image/png').then(blob=>{
  // blob为打开文件的blob对象
})

$session 会话操作

方法

创建会话对象
$session.create(key:String,value:Object):void
获取会话对象
$session.get(key:String):Object
删除会话对象
$session.remove(key:String):void

参数

创建会话对象
key 会话对象键
value 会话对象值
获取会话对象
key 会话对象键
删除会话对象
key 会话对象键

返回值

创建会话对象
无返回值
获取会话对象
返回会话对象
删除会话对象
无返回值

const {proxy} = getCurrentInstance()
// 创建会话
proxy.$session.create('user',{name:'张三'})

// 获取会话
proxy.$session.get('user') // 返回{name:'张三'}

// 删除会话
proxy.$session.remove('user')

会话对象会在浏览器关闭后自动销毁

$key 时间戳

附加用于组件自动监测数据变换自动刷新

<router-view :key="$key()"></router-view>
<v-select :key="$key()"></v-select>

$setToken 设置token

方法

$setToken(token:String):void

参数

token 口令内容

返回值：无

const {proxy} = getCurrentInstance()
// 设置 token 全局可用，浏览器关闭自动销毁
proxy.$setToken('token:1234567890')

$compresser 图片压缩

方法

$compresser(blob:Blob,width:Number,height:Number):Promise<Blob>

参数

blob 图片Blob对象
width 图片压缩后最大宽度，设置为0时表示不限制
height 图片压缩后最大高度，设置为 0 时表示不限制

返回值：Promise<Blob> 返回图片Blob对象

const {proxy} = getCurrentInstance()
proxy.$open('image/*').then(result=>{
  proxy.$compresser(result, 750, 0).then(compresse=>{
    // compresse为压缩后的图片对象
  })
})

$wechat 请求微信接口方法

方法

$wechat(resolver:String, data:Object, method:'GET'|'PUT'|'POST'|'DELETE'|'PATCH'):Promise<Any>

参数

resolver 对应服务器的微信接口处理方法
data 向服务器发送请求对象
method 向服务器发送的请求方法

返回值：Promise<Any> 服务器返回的响应对象

const {proxy} = getCurrentInstance()
...
proxy.$wechat('pay',order,'POST').then(res=>{
  // 服务器返回的支付验证参数
})
...

$http 请求微信接口方法

方法

$http(url:String,data:Object,headers:Object,responseType:String,method:'GET'|'PUT'|'POST'|'DELETE'|'PATCH'):Promise<Any>

参数

url 服务器请求地址
data 向服务器发送请求对象
headers 向服务器发送请求头信息
headers 响应类型，取值'text' 'blob' 'stream'
method 向服务器发送的请求方法

返回值：Promise<Any> 服务器返回的响应对象

const {proxy} = getCurrentInstance()
...
proxy.$http(
  proxy.$url('/test/code'),
  {id:'1'},
  {'Content-type': 'application/json;charset=utf-8'},
  'blob','POST').then(res=>{
  // 服务器返回的Blob对象
})
...

$upload 文件上传

方法 $upload(files:Array<{init:String,result:Blob,state:0|1}>):Promise<Array<String>>

参数

files 待上传文件列表
init 文件初始化指针，文件已上传时有此属性
result 待上传文件Blob对象
state 上传状态，0-未上传 1-已上传，只有在状态为0时才会上传到服务器

返回值：Promise<Array<String>> 文件指针数组

const {proxy} = getCurrentInstance()
proxy.$upload([{result:file,state:0}]).then(res=>{
  // 对应传入参数，返回上传后的文件指针
})

$attachment 获取文件远程地址

方法

$attachment(id:String):String

参数

id 文件指针

返回值：String 所映射的服务器文件地址

const {proxy} = getCurrentInstance()
proxy.$attachment('1e8228de-7aac-4507-a436-04a85a695fbe')

基础对象扩展API

Date对象扩展属性

日期格式化

方法

Format(fmt:String):String

参数

fmt 格式化模版 y-年 M-月 d-日 h-小时 m-分 s-秒 S-毫秒 q-季度

返回值：格式化后的String

new Date().Format('yyyy-MM-dd hh:mm:ss.SSS q')

日期计算器

方法

Calc(year:Number,month:Number,day:Number):Date

参数

year 计算距离年数，增加为正数，减少为负数，不计算时取值0
month 计算距离月数，增加为正数，减少为负数，不计算时取值0
day 计算距离天数，增加为正数，减少为负数，不计算时取值0

返回值：Date 计算后的日期

new Date().Calc(1,2,3) // 计算未来1年零2个月3天
new Date().Calc(0,0,-3) // 计算过去3天

Date 转 String，格式为 yyyy-MM-dd

方法

Date(year?:Number,month?:Number,day?:Number):String

参数

year 计算距离年数，增加为正数，减少为负数，不计算时取值 0
month 计算距离月数，增加为正数，减少为负数，不计算时取值 0
day 计算距离天数，增加为正数，减少为负数，不计算时取值 0

返回值：String 计算后经格式化的日期

new Date().Date(1,0,0) // 返回一年后的今天，按yyyy-MM-dd格式输出

Date 转 String，格式为 yyyy-MM-dd hh:mm:ss

方法

DateTime(year?:Number,month?:Number,day?:Number):String

参数

year 计算距离年数，增加为正数，减少为负数，不计算时取值 0
month 计算距离月数，增加为正数，减少为负数，不计算时取值 0
day 计算距离天数，增加为正数，减少为负数，不计算时取值 0

返回值：String 计算后经格式化的日期时间

new Date().DateTime(1,0,0) // 返回一年后的今天，按yyyy-MM-dd hh:mm:ss格式输出

Date 转 String，格式为 hh:mm:ss

方法

Time():String

参数：无

返回值：String 经格式化的时间

new Date().Time() // 返回当前时间，按hh:mm:ss格式输出

月数计算器

方法

MonthDiff(reference:String):Number

参数

reference 对比日期时间，支持yyyy-MM-dd hh:mm:ss格式或yyyy-MM-dd格式，参数为空时与当前日期时间比较

返回值: Number 相隔月数

// 计算2020年1月10日距离今天有多少月
new Date('2020-01-10').MonthDiff()

// 计算2020年1月10日距离2020年5月30日有多少月
new Date('2020-01-10').MonthDiff('2020-05-30')

String对象扩展属性

等位前补零

方法

prefix(digit:Number):String

参数

digit 数位

返回值：String 补零后的字符串

'1'.prefix(5) // 返回00001

base64字符串转Blob对象

方法

blob():Blob

参数：无

返回值：Blob 返回base64生成的Blob对象

[base64字符串].blob()

Base64生成浏览器内置URL

方法

url():String

参数：无

返回值：String 返回base64生成浏览器内置的URL

[base64字符串].url() // 返回格式 blob:http://[域名/ip]:[端口]/[文件指针]

发起Graphql请求

方法

graphql(args:Object):Promise<Any>

参数

args 发送graphql请求参数

返回值：Promise<Any> graphql服务器响应的对象

const query = `[email protected]>>UserInput->(page size length data{name age mobile gender area})`
query.graphql({page:1,size:10}).then(user=>{
  // user
})

graphql查询采用gqlx语法，语法结构：
[query/mutation]@[服务端解决器名称].[服务端执行方法名称]>>[输入类型]->[返回格式]

Number 对象扩展属性

千位分隔格式化，并保留两位小数

方法

thou():String

参数：无

返回值：String，格式化后的字符串

console.info(1000.thou()) // 输出：1,000.00

Array对象扩展属性

数组分组

方法

GroupBy(c:Function):Object

参数

c 分组方法，方法返回值为String，作为分组依据

返回值：Object 分组对象

const goods = [
  {category:'A',name:'商品 1'},
  {category:'A',name:'商品 2'},
  {category:'A',name:'商品 3'},
  {category:'B',name:'商品 4'},
  {category:'B',name:'商品 5'},
  {category:'B',name:'商品 6'}
]
const group = goods.GroupBy(item=>item.category)

/**
  group的值为
  {
    A: [
        {category:'A',name:'商品 1'},
        {category:'A',name:'商品 2'},
        {category:'A',name:'商品 3'}
      ]
    B: [
        {category:'B',name:'商品 4'},
        {category:'B',name:'商品 5'},
        {category:'B',name:'商品 6'}
      ]
  }
*/

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@sureking/ui 使用说明

开始

介绍

安装

使用

布局

通用布局

.fill 自动填充满父级容器

.center 在容器内居中显示

横向布局

.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 在容器内横向排列并靠下方居中对齐

纵向布局

.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 在容器内纵向排列并靠下方居中对齐

图标

组件

button 按钮

v-input 输入框组件

v-select 选择框组件

v-date 日期选择器组件

v-time 时间选择器组件

v-radio 单选按钮组件

v-check 多选按钮组件

v-table 表格组件

v-pagination 分页组件

v-list 列表组件

v-card 卡片组件

v-dialog 对话框组件

v-editor 富文本编辑器组件

v-chart 图表组件

v-upload 上传组件

VUE扩展API

$message 消息框

$alert 提示框

$open 文件选择框

$session 会话操作

$key 时间戳

$setToken 设置token

$compresser 图片压缩

$wechat 请求微信接口方法

$http 请求微信接口方法

$upload 文件上传

$attachment 获取文件远程地址

基础对象扩展API

Date对象扩展属性

日期格式化

日期计算器

Date 转 String，格式为 yyyy-MM-dd

Date 转 String，格式为 yyyy-MM-dd hh:mm:ss

Date 转 String，格式为 hh:mm:ss

月数计算器

String对象扩展属性

等位前补零

base64字符串转Blob对象

Base64生成浏览器内置URL

发起Graphql请求

Number 对象扩展属性