qkui-h5
Version:
Quick 框架组件
295 lines (226 loc) • 5.8 kB
Markdown
# QuickGodUI ( UI for iView)
基于 [iView](https://www.iviewui.com/) 开发的 mpvue 组件库
> 快速配合 Quick.Core 接口使用
[](https://www.npmjs.com/package/qkui) [](https://www.npmjs.com/package/qkui) [](https://www.npmjs.com/package/qkui/master/LICENSE)
## 更新说明
- 1.2.8
更新了 badge html 标签
- 1.2.7
更新 quick.config.token.info 当前应用字段为 quick.config.token.app
更新 getTokenAuthBasic 方法输出为标准 JSON 字符串
- 1.2.6
开始适配 iView 4.0
[更新说明](http://quick.apwlan.com/docs/Release.html)
## 开发文档
[打开开发文档](https://www.npmjs.com/package/qkui-h5/doc)
## NPM 安装
```bash
npm i qkui-h5
```
## 预览
```bash
$ git clone https://www.npmjs.com/package/qkui-h5
$ cd qkui
$ yarn run example
```
## 开发调试
### 跨项目调试
直接复制 dist/打包后的文件到，替换项目下的 node_modules\qkui-h5
## 使用
### html 引用
在页面上引入 js 和 css 文件即可开始使用：
```html
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import qkui-->
<link rel="stylesheet" href="dist/styles/quick.css" />
<script type="text/javascript" src="quick.min.js"></script>
```
#### 示例
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>qkui demo</title>
<link
rel="stylesheet"
type="text/css"
href="http://unpkg.com/qkui/dist/styles/quick.css"
/>
<script
type="text/javascript"
src="http://vuejs.org/js/vue.min.js"
></script>
<script
type="text/javascript"
src="http://unpkg.com/qkui/dist/quick.min.js"
></script>
</head>
<body>
<div id="app">
<qk-icon :tyle="css.icon" />
<div>Welcome to quick</div>
</div>
<script>
new Vue({
el: "#app",
data: {
css: {
icon: "icon-star"
}
},
methods: {}
});
</script>
</body>
</html>
```
### NPM 安装
并非全部组件样式，仅全局（字体、颜色等）样式和未被 Vue 组件化。
```bash
npm i qkui-h5
```
### 发布组件
```bash
npm login
npm publish
```
#### 全局引入
src/main.js 引用全局样式 `import`:
```js
import Vue from "vue";
import App from "@/App";
// 全局 quick ui 与字体样式
import "qkui-h5/dist/styles/quick.less";
import "qkui-h5/dist/fonts/iconfont.css";
// 全局 quick ui 组件
import QuickUI from "qkui-h5";
//Vue.use(QuickUI);
//可选配置参数
Vue.use(QuickUI, {
cacheKeys: {
// 应用信息与当前用户票据
state: "$stateDemo",
// 用户信息
userInfo: "$userInfoDemo",
// io推送客户端信息
ioClient: "$ioClientDemo"
},
// 扩展引入第三方组件
ext: {
// 数据加载时提示
loading: this.$Loading,
// 消息提示
message: this.$Message
}
});
// 生产模式
Vue.config.productionTip = false;
const app = new Vue({
el: "#app",
router,
store,
...App,
created() {
// 页面基础字体 响应式缩放
let size = this.$quick.page.fontRem();
console.log(size + "px");
}
});
app.$mount();
/** 全局动态调整基数 */
// window.onload = function () {
// quick.page.fontRem();
// };
// window.onresize = function () {
// quick.page.fontRem();
// };
```
#### 局部组件引入
```html
<template>
<qk-icon type="icon-star" />
</template>
<script>
import qkIcon from "qkui=h5";
export default {
components: {
qkIcon
},
data() {
return {};
},
created() {
// 页面基础字体 缩放
let size = this.$quick.page.fontRem();
console.log(size + "px");
}
};
</script>
<style lang="less">
@import "qkui-h5/dist/css/quick.less";
</style>
```
## 小程序组件说明
部分组件因 mpvue 尚不支持的语法而无法实现，详细见[不支持列表](http://mpvue.com/mpvue/#_14)。
用[微信 web 开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)打开 `qkui` 项目目录。
需要 Slot 支持暂未实现的组件，请使用全局样式，详细见文档。
## 组件状态
_部分组件样式源自 [iView](https://www.iviewui.com) 项目，并对其进行了必要重构以符合 weui-wxss。_
## 打包说明
> 打包配置在 build/webpack.build.conf.js
### 复制 Less 样式输出
```js
// 不打包字体样式
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "../packages/fonts"),
to: path.resolve(__dirname, "../dist/fonts/"),
ignore: [".*"]
}
]);
```
### 不打包字体文件
```js
// 不打包字体样式
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "../packages/fonts"),
to: path.resolve(__dirname, "../dist/fonts/"),
ignore: [".*"]
}
]);
```
## 表单
- [x] `List`（数据列表组件）
- [x] `Form`（数据编辑组件）
- [x] `Panel`（扩展查询选择组件）
- [x] `Table`（表格组件）
- [x] `Input`（定制输入组件）
- [x] `InputPrice`（定制输入金额组件）
### 基础组件
- [x] `Badge`
- [x] `Icon`
- [x] `Article`
- [x] `Avatar`
- [x] `Tabs`
* [ ] `Row`（需要 Slot 支持，暂使用样式）
* [ ] `Col`（需要 Slot 支持，暂使用样式）
### 操作反馈
- [ ] `LoadingBar`
- [ ] `Msg`
- [ ] `NoticeBar`
- [x] `popup` （全局提示框）
### 导航相关
- [ ] `Tabs`（需要 Slot 支持，暂使用样式）
- [ ] `Sidenav`
- [x] `Steps`
### 窗口相关
- [x] `win`
- [x] `tree`
## 计划
- [ ] 支持 i18n
## License
[The MIT License](http://opensource.org/licenses/MIT)
请自由地享受和参与开源