Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库
2018-02-21 11:23
603 查看
Github资源:https://github.com/alibaba/weex-ui
你可以通过飞猪、淘宝、天猫、Weex Playground 或者浏览器扫码体验
为了不打包所有的组件,你需要使用 babel-plugin-component 来只引入需要的组件打包。
预览
你可以通过飞猪、淘宝、天猫、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" } ] ] }
相关文章推荐
- VUX v2.1.1-rc.12 发布,基于 WeUI 的 Vue 移动端组件库
- VUX v2.1.1-rc.12 发布,基于 WeUI 的 Vue 移动端组件库
- 一个专为移动端开发的原创即时通讯框架,超轻量级、高度提炼,完全基于UDP协议,支持iOS、Android、标准Java平台。
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- 基于微信的weui框架编写单选按钮组件
- 滴滴开源基于 Vue.js 的移动端组件库 cube-ui
- 基于 Vue.js 的移动端组件库mint-ui
- SuperWebClient -一个基于CURL的.NET HTTP-HTTPS模拟神组件(1)
- DapperPoco -- 基于Dapper的、轻量级的、高性能的、简单的、灵活的ORM框架
- .net core轻量级高性能通讯组件BeetleX
- Mint UI —— 基于 Vue.js 的移动端组件库
- 一个基于Yahoo UI的Ajax俄罗斯方块游戏
- 一个基于JRTPLIB的轻量级RTSP客户端——myRTSPClient详解
- jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI主题
- Weex环境构建(一)Weex+Android开发环境
- 一个基于Yahoo UI的Ajax俄罗斯方块游戏
- elementUI 组件select 一个页面多次使用的情况
- ZeroMQ——一个轻量级的消息通信组件
- 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇:(五)用户接口层之提取媒体流数据
- 一个基于组件的动态对象系统