A rich interaction, lightweight, high performance UI library based on Weex.
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';
// or
// 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>
In order not to pack all the components, you need use babel-plugin-component
to import specified component.
At the same time, if you don’t install babel-preset-stage-0
, also need to install it.
npm i babel-preset-stage-0 babel-plugin-component -D
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages",
"style": false
}
]
]
}
webpack.config.js
has a exclude for node_modules, please turn on for week-ui as exclude: /node_modules(?!(\/|\\).*(weex).*)/
.weex-ui
to the latest.npm i
npm run start
Once it has been compiled, a browser window will be opened automatically. You can switch to developer mode to see the demo. And there will be a QR code that you can use to try the demo on your phone in the console.
Author: apache
Live Demo: https://alibaba.github.io/weex-ui/#/
GitHub: https://github.com/apache/incubator-weex-ui
#vuejs #javascript #vue-js