❤
npm
Sign UpSign In

qkui-h5

1.2.8 • Public • Published

QuickGodUI ( UI for iView)

基于 iView 开发的 mpvue 组件库

快速配合 Quick.Core 接口使用

npm version npm download 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

更新说明

开发文档

打开开发文档

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

请自由地享受和参与开源

Readme

Keywords

Package Sidebar

Install

npm i qkui-h5

Homepage

www.npmjs.com/package/qkui-h5/

Weekly Downloads

17

Version

1.2.8

License

ISC

Unpacked Size

763 kB

Total Files

37

Last publish

Collaborators

  • appcn
Try on RunKit
Report malware