【难为听】weex-ui
eslint 不喜欢,但是确实规范了代码,同古代统一货币一样,有无穷的意义。故喜欢
weex-ui在项目中的使用方法
npm install -g weex-toolkit@latest
weex create your_project
npm i
npm i weex-ui@latest -S
npm i babel-plugin-component babel-preset-stage-0 -D
//修改.babelrc代码
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages",
"style": false
}
]
]
}
修改 src/index.vue 进行测试
<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>
运行项目
npm run serve
项目效果如下

【难为听】weex-ui的更多相关文章
- Weex Ui - Weex Conf 2018 干货分享
本文是2018年 Weex Conf 中议题<Weex + Ui>的内容文档整理,主要给大家介绍飞猪 Weex 技术体系从无到有的过程,包括 Weex Ui 组件库的开发和发展,重点分享在 ...
- Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库
Github资源:https://github.com/alibaba/weex-ui 预览 你可以通过飞猪.淘宝.天猫.Weex Playground 或者浏览器扫码体验 安装 npm i weex ...
- UI事件监听的击穿
什么是UI事件监听的击穿 在游戏视图中,有两个UI界面叠在一起的时候,单击一个空白处,却触发了被覆盖在下层了UI界面中的单击事件,这就是单击击穿了上层界面. 假设场景中放置了一个箱子,单击箱子会触发一 ...
- MS UI Automation Introduction
MS UI Automation Introduction 2014-09-17 MS UI Automation是什么 UIA架构 UI自动化模型 UI自动化树概述 UI自动化控件模式概述 UI 自 ...
- Weex学习资料整合
1.weex weex文档:http://weex.apache.org/cn/guide/index.html Weex Ui awesome-weex WEEX免费视频教程-从入门到放肆 (共17 ...
- Weex与Android交互(二)
扩展Android Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能. 主要分为两类扩展: Module 扩展 非UI的特定功能.例如sendHttp.openURL 等. Compon ...
- #Weex与Android交互(一)
用Weex开发Android程序 参考:开发HelloWorld程序(Weex开发) 1.创建Android工程 2.集成WeexSDK,参考[WEEX SDK 集成到 Android 工程](htt ...
- avalon新一代UI库发布
任何前端框架,尤其是国内的,想推广开,必须有一个UI库,光是一个核心库当光头司令是不行的.此外还有一个小圈子,供大家遇到问题时可以发问,一起完善.自从avalon嫁入"去哪儿网"后 ...
- weex前端式写法解决方案---eros
前言 如果想用前端的方式写一个app怎么办呢? 如果你用的是 React,那么它已经有了一个比较完善的体系跟社区.如果你用的是Vue又不想花费太多时间去重新学习React,那么目前比较靠谱的方案就是w ...
随机推荐
- HBase Ganglia
- BZOJ 3236 AHOI 2013 作业 莫队+树状数组
BZOJ 3236 AHOI 2013 作业 内存限制:512 MiB 时间限制:10000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目大意: 此时己是凌晨两点,刚刚做了Co ...
- final,finally和finalize之间的区别
(1)final用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖,类不可继承.内部类要访问局部变量,局部变量必须定义成final类型,比如一段代码 (2)finally是异常处理语句结构的一部 ...
- LUOGU NOIP 2018 模拟赛 DAY1
T1 传送门 解题思路 这似乎是小学数学知识???mod 9就相当于各位之和mod 9,打表求了个逆元,等差数列求和公式就行了. #include<iostream> #include&l ...
- git异常处理(一)
请输入提交消息来解释为什么这种合并是必要的 git 在pull或者合并分支的时候有时会遇到这个界面.可以不管(直接下面3,4步),如果要输入解释的话就需要: 1.按键盘字母 i 进入insert模式 ...
- 使用Hilo.JS快速开发Flappy Bird
http://hiloteam.github.io/tutorial/flappybird.html#_9 Flappy Bird是一款前不久风靡世界的休闲小游戏.虽然它难度超高,但是游戏本身却非常简 ...
- java基础之集合(Set,Map,List)总结
一.Collection接口 1.Collection接口两个子接口 -List接口 -ArrayList: -Vector: -LinkedL ...
- JMETER远程运行_多机联合负载
JMETER远程运行_多机联合负载 远程运行是用一台JMeter控制机控制远程的多台机器来产生负载.控制机与负载机之间通过RMI方式来完成通信.在负载机上运行Agent程序(启动命令是%JMETER_ ...
- shell中各种括号的作用详解()、(())、[]、[[]]、{}
一.小括号,圆括号() 1.单小括号 () ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号, ...
- Java数据结构和算法(六)--二叉树
什么是树? 上面图例就是一个树,用圆代表节点,连接圆的直线代表边.树的顶端总有一个节点,通过它连接第二层的节点,然后第二层连向更下一层的节点,以此递推 ,所以树的顶端小,底部大.和现实中的树是相反的, ...