English | Chinese

Wia Components

Components for wia applications.

See wia components documentation for detailed description.

install

You will need Node.js installed on your system.

First, install

$ npm install @wiajs/component

To use

Take uploader as an example, to make a register page

in register.js file:

import Uploader from '@wiajs/component/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/component/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>