qkui

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

The MIT License

请自由地享受和参与开源