0.0.4 • Published 5 years ago
qkui v0.0.4
QuickGodUI ( UI for iView)
基于 iView 开发的 mpvue 组件库
快速配合 Quick.Core 接口使用
说明
部分组件因 mpvue 尚不支持的语法而无法实现,详细见不支持列表。
开发文档
安装
npm i qkui
预览
$ git clone https://www.npmjs.com/package/qkui
$ cd mpui
$ yarn run example
用微信 web 开发者工具打开 qkui
项目目录。
使用
html 引用
<script type="text/javascript" src="quick.ui.min.js"></script>
<link rel="stylesheet" href="dist/css/quick.ui.css" />
引入全局样式
并非全部组件样式,仅全局(字体、颜色等)样式和未被 Vue 组件化。
使用组件
<template>
<qk-icon :css="'icon-star'" />
</template>
<script>
import qkIcon from 'qkui/components/icon';
export default {
components: {
qkIcon
},
data() {
return {};
}
};
</script>
引用全局样式 import
:
import 'qkui/dist/css/quick.ui.css';
或者是
<style lang="less">
@import 'path/to/node_modules/qkui/';
</style>
需要 Slot 支持暂未实现的组件,请使用全局样式,详细见文档。
组件状态
部分组件样式源自 iView 项目,并对其进行了必要重构以符合 weui-wxss。
表单
Agree
Button
ButtonArea
(需要 Slot 支持,暂使用样式)List
(需要 Slot 支持,暂使用样式)Cell
(需配合List
一起使用)Input
(需配合List
一起使用)CheckboxGroup
(需配合List
一起使用)RadioGroup
(需配合List
一起使用)Select
(需配合List
一起使用)Switch
(需配合List
一起使用)Uploader
(可配合List
一起使用)Counter
(可配合List
一起使用)
基础组件
Icons
Article
Avatar
Badge
BadgeBox
(需要 Slot 支持,暂使用样式)Row
(需要 Slot 支持,暂使用样式)Col
(需要 Slot 支持,暂使用样式)Grid
Panel
(需要 Slot 支持,暂使用样式)MediaBox
(可配合Panel
一起使用)Footer
Loadmore
Ellipsis
Preview
Price
Progress
Tag
Timeline
Countdown
操作反馈
LoadingBar
Msg
NoticeBar
Toptips
导航相关
Tabs
(需要 Slot 支持,暂使用样式)Sidenav
Steps
搜索相关
SearchBar
计划
- 为表单引入独立 API
vm.$form
,方便表单数据的获取和校验 - 支持 i18n
License
请自由地享受和参与开源