qapp-ui's Introduction

QAPP-UI

一个基于快应用的多功能、富交互、轻量级的UI 组件库

预览

请使用快应用调试器扫描二维码进行安装使用

安装

npm install qapp-ui --save

使用

<import name="qui-dialog" src="@qapp-ui/qui-dialog/index"></import>
<import name="qui-toast" src="@qapp-ui/qui-toast/index"></import>

<template>
  <div class="page">
    <input type="button" value="常规对话框" @click="normal" />
    <input type="button" value="无标题的对话框" @click="noTitle" />
    <input type="button" value="只有确定按钮的对话框" @click="noCancel" />
    <input type="button" value="无按钮的对话框" @click="noBtn" />
    <qui-dialog option="{{dialog}}" @qui-btn-click="btnClick">
      <text>这是内容。。。</text>
    </qui-dialog>
    <qui-toast id="qui-toast"></qui-toast>
  </div>
</template>

<script>
  export default {
    private: {
      option: {
        show: true,
        title: '对话框',
        btns: [{
          text: '确定',
          color: '#0090ff'
        }]
      },
      dialog: {}
    },
    onInit() {
      this.$page.setTitleBar({ text: 'Dialog' })
    }
  }
</script>

注意点

1. 组件库的尺寸是基于`designWidth：1080`来进行设计开发的。请将manifest.json中的designWidth配置设置为1080。

2. 通过`npm install`命令安装`qapp-ui`库后，如果需要在import时，使用别名`@qapp-ui`来导入组件时，可以通过在项目根目录新建config目录创建webpack.config.js文件来修改hap-toolkit工具中默认的webpack配置信息(hap-toolkit 版本需要为32以上)

 |
 |---build
 |
 |---config
 |     |
 |     |--webpack.config.js
 |
 |---src

webpack.config.js文件

module.exports = {
  postHook: function(webpackConf, options){
    webpackConf.resolve.alias = Object.assign(webpackConf.resolve.alias || {}, {
      '@qapp-ui': '在node_modules目录中的qapp-ui库的绝对路径'
    })
  }
}