Skip to content

Latest commit

 

History

History
134 lines (102 loc) · 5.55 KB

README_cn.md

File metadata and controls

134 lines (102 loc) · 5.55 KB

Weex Ui

English | 中文

Build Status npm NPM downloads NPM all downloads CNPM all downloads GitHub last commit GitHub closed issues Package Quality Join the chat at https://gitter.im/alibaba-weex-ui/chat

一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库

文档

预览

你可以通过飞猪、淘宝、天猫、Weex Playground 或者浏览器扫码体验

安装

npm i weex-ui -S

使用

<template>
  <div>
    <wxc-button text="Open Popup"
                @wxcButtonClicked="buttonClicked">
    </wxc-button>
    <wxc-popup width="500"
               pos="left"
               :show="isShow"
               @wxcPopupOverlayClicked="overlayClicked">
    </wxc-popup>
  </div>
</template>

<script>
  import { WxcButton, WxcPopup } from 'weex-ui';
  // 或者分开引用(不是很推荐)
  // import WxcButton from 'weex-ui/packages/wxc-button';
  // import WxcPopup from 'weex-ui/packages/wxc-popup';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

使用前

为了不打包所有的组件,你需要使用 babel-plugin-component 来只引入需要的组件打包,同时如果没有安装 babel-preset-stage-0,也需一并安装。

npm i babel-preset-stage-0 babel-plugin-component  -D
{
    "presets": ["es2015", "stage-0"],
    "plugins": [
        [
            "component",
            {
                "libraryName": "weex-ui",
                "libDir": "packages",
                "style": false
            }
        ]
    ]
}

更多

调试

npm i
npm run start

一旦它编译完成后,将会自动打开一个浏览器,你可以将浏览器切换到开发者模式,这时候在 console 中你可以看到一个预览二维码,直接使用你的 Weex App 扫码就可以看到 Demo 效果。

支持

  • 在你的公司或个人项目中使用 Weex Ui
  • 如果你觉得 Weex Ui 还不错,可以通过 Star 来表示你的喜欢
  • 加入钉钉聊天群帮忙解答 Weex 技术问题

贡献

想解 Bug,贡献代码或者提高文档可读性?有这个想法非常好,在提交 pull request 前记得阅读一下 Contributing Guide

感谢给 Weex Ui 贡献代码的你们!

协议

  • 遵循 MIT 协议
  • 请自由地享受和参与开源