0.0.3 • Published 3 years ago

@kway/ui v0.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

@kway/ui 使用说明

开始

介绍

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

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

安装

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

使用

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

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

布局

@kway/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">

图标清单

avatar

组件

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\
  • 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\
  • 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 = `query@users.list>>UserInput->(page size length data{name age mobile gender area})`
query.graphql({page:1,size:10}).then(user=>{
  // user
})

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'}
      ]
  }
*/
vueapollo-boostgraphql-taggraphqlquillpikadaymomentechartsaxios
@infinitebrahmanuniverse/nolb-_kw@everything-registry/sub-chunk-531@zalastax/nolb-_kw
0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago