qkui-h5

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: [".*"]
  }
]);

表单

• List（数据列表组件）
• Form（数据编辑组件）
• Panel（扩展查询选择组件）
• Table（表格组件）
• Input（定制输入组件）
• InputPrice（定制输入金额组件）

基础组件

• Badge
• Icon
• Article
• Avatar
• Tabs

• Row（需要 Slot 支持，暂使用样式）
• Col（需要 Slot 支持，暂使用样式）

操作反馈

• LoadingBar
• Msg
• NoticeBar
• popup （全局提示框）

导航相关

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

窗口相关

• win
• tree

计划

• 支持 i18n

License

The MIT License

请自由地享受和参与开源