Weex Ui
Weex Ui 介绍
一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库
安装
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
}
]
]
}
网站地址:https://alibaba.github.io/weex-ui/#/cn/
GitHub:https://github.com/alibaba/weex-ui
网站描述:一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库