English | Chinese

Wia UI

UI mponents for wia applications.

See wia components documentation for detailed description.

Some components copy from F7 and removed tight integration with the Wia App, You need to new and manual process code。

install

You will need Node.js installed on your system.

First, install

$ npm i -D @wiajs/ui

To use

Take uploader as an example, to make a register page

in register.js file:

import Uploader from '@wiajs/ui/uploader';

function init(pg)
  _uploader = new Uploader({
    upload: true, // 自动上传
    url: _url, // 上传网址
    dir: 'star/etrip/demo', // 图片存储路径，格式: 所有者/应用名称/分类
    el: pg.clas('uploader'), // 组件容器
    input: pg.name('avatar'), // 上传成功后的url填入输入框，便于提交
    choose: pg.name('choose'), // 点击触发选择文件

    multiple: false, // 可否同时选择多个文件
    limit: 1, // 文件数限制 -1 0 不限，1 则限制单个文件，如 头像
    accept: 'image/jpg,image/jpeg,image/png,image/gif', // 选择文件类型
    compress: true, // 自动压缩
    quality: 0.5, // 压缩比

    // xhr配置
    data: {}, // 添加到请求头的内容
  });

in your register.less file:

@import '@wiajs/ui/dist/uploader/index.less';

in your register.html file:

  <div class="page-content">
    <form name="fmData">
      <div class="list inline-labels">
        <ul>
          <li class="avatar">
            <a href="" class="item-link item-content">
              <div class="item-title item-label">头像<span>*</span></div>
              <div name="choose" class="item-inner">
                <div class="item-after uploader">
                  <input name="avatar" type="hidden" />
                </div>
              </div>
            </a>
          </li>
        </ul>
      <div>
    </form>
  </div>