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。

表单

• [x] Agree
• [x] Button
• [ ] ButtonArea（需要 Slot 支持，暂使用样式）
• [ ] List（需要 Slot 支持，暂使用样式）
• [x] Cell（需配合 List 一起使用）
• [x] Input（需配合 List 一起使用）
• [x] CheckboxGroup（需配合 List 一起使用）
• [x] RadioGroup（需配合 List 一起使用）
• [x] Select（需配合 List 一起使用）
• [x] Switch（需配合 List 一起使用）
• [x] Uploader（可配合 List 一起使用）
• [x] Counter（可配合 List 一起使用）

基础组件

• [x] Icons
• [x] Article
• [x] Avatar
• [x] Badge
• [ ] BadgeBox（需要 Slot 支持，暂使用样式）
• [ ] Row（需要 Slot 支持，暂使用样式）
• [ ] Col（需要 Slot 支持，暂使用样式）
• [x] Grid
• [ ] Panel（需要 Slot 支持，暂使用样式）
• [x] MediaBox（可配合 Panel 一起使用）
• [x] Footer
• [x] Loadmore
• [x] Ellipsis
• [x] Preview
• [x] Price
• [x] Progress
• [x] Tag
• [ ] Timeline
• [ ] Countdown

操作反馈

• [x] LoadingBar
• [x] Msg
• [ ] NoticeBar
• [x] Toptips

导航相关

• [ ] Tabs（需要 Slot 支持，暂使用样式）
• [ ] Sidenav
• [x] Steps

搜索相关

• [x] SearchBar

计划

• [ ] 为表单引入独立 API vm.$form，方便表单数据的获取和校验
• [ ] 支持 i18n

License

The MIT License

请自由地享受和参与开源