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

小鱼儿 2022-03-15 07:56 477阅读 0赞

# [Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库][Weex Ui _ Weex _ UI] #

Github资源：[https://github.com/alibaba/weex-ui][https_github.com_alibaba_weex-ui]

预览

![182947_2DTA_2896879.jpg][]

*你可以通过[飞猪][Link 1]、[淘宝][Link 2]、[天猫][Link 3]、[Weex Playground][] 或者浏览器扫码[体验][Link 4]*

安装

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';
      module.exports = {
        components: { WxcButton, WxcPopup },
        data: () => ({
          isShow: false
        }),
        methods: {
          buttonClicked () {
            this.isShow = true;
          },
          overlayClicked () {
            this.isShow = false;
          }
        }
      };
    </script>

汇集使用 (推荐)

import { WxcComponent1, WxcComponent2 } from "weex-ui"

为了不打包所有的组件，你需要使用 [babel-plugin-component][] 来只引入需要的组件打包。

npm i babel-plugin-component -D

// 增加一个plugins的配置到 .babelrc 中
    {
      "plugins": [
        [
          "component",
          {
            "libraryName": "weex-ui",
            "libDir": "packages"
          }
        ]
      ]
    }

分开使用

import WxcComponent1 from "weex-ui/packages/wxc-component1"
    import WxcComponent2 from "weex-ui/packages/wxc-component2"

Weex-toolkit

如果你使用[weex-toolkit][]来开发你的Weex项目，你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'

npm i babel-preset-stage-0 babel-plugin-component  -D

{
      "presets": ["es2015", "stage-0"],
      "plugins": [
        [
          "component",
          {
            "libraryName": "weex-ui",
            "libDir": "packages"
          }
        ]
      ]
    }

转载：[https://www.cnblogs.com/boonya/p/8456385.html][Weex Ui _ Weex _ UI]

[Weex Ui _ Weex _ UI]: https://www.cnblogs.com/boonya/p/8456385.html
[https_github.com_alibaba_weex-ui]: https://github.com/alibaba/weex-ui
[182947_2DTA_2896879.jpg]: https://static.oschina.net/uploads/space/2017/1028/182947_2DTA_2896879.jpg
[Link 1]: http://www.fliggy.com/mobile/?spm=181.52816.a1z6c.19.1fcc529aNQO84O&ad_id=&am_id=1301048151a679d80b29
[Link 2]: https://mpage.taobao.com/hd/download.html?spm=a21bo.50862.201858.1.5523e29eOKuPPN
[Link 3]: https://pages.tmall.com/wow/portal/act/app-download?spm=875.7931836/B.a2226mz.16&scm=1027.1.1.1
[Weex Playground]: https://weex.apache.org/cn/playground.html
[Link 4]: https://h5.m.taobao.com/trip/weex-ui/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fweex-ui%2Fdemo%2Findex.native-min.js
[babel-plugin-component]: https://www.npmjs.com/package/babel-plugin-component
[weex-toolkit]: https://github.com/weexteam/weex-toolkit