qkui-h5
v1.2.8
Published
Quick 框架组件
Downloads
84
Readme
QuickGodUI ( UI for iView)
基于 iView 开发的 mpvue 组件库
快速配合 Quick.Core 接口使用
更新说明
1.2.8 更新了 badge html 标签
1.2.7 更新 quick.config.token.info 当前应用字段为 quick.config.token.app 更新 getTokenAuthBasic 方法输出为标准 JSON 字符串
1.2.6 开始适配 iView 4.0
开发文档
NPM 安装
npm i qkui-h5预览
$ git clone https://www.npmjs.com/package/qkui-h5
$ cd qkui
$ yarn run example开发调试
跨项目调试
直接复制 dist/打包后的文件到，替换项目下的 node_modules\qkui-h5
使用
html 引用
在页面上引入 js 和 css 文件即可开始使用：
<!-- 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>示例
<!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 组件化。
npm i qkui-h5发布组件
npm login
npm publish全局引入
src/main.js 引用全局样式 import:
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();
// };局部组件引入
<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 尚不支持的语法而无法实现，详细见不支持列表。
用微信 web 开发者工具打开 qkui 项目目录。
需要 Slot 支持暂未实现的组件，请使用全局样式，详细见文档。
组件状态
部分组件样式源自 iView 项目，并对其进行了必要重构以符合 weui-wxss。
打包说明
打包配置在 build/webpack.build.conf.js
复制 Less 样式输出
// 不打包字体样式
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "../packages/fonts"),
to: path.resolve(__dirname, "../dist/fonts/"),
ignore: [".*"]
}
]);不打包字体文件
// 不打包字体样式
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
请自由地享受和参与开源