Github资源:https://github.com/alibaba/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'; 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" } ] ] }