【难为听】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 ...
随机推荐
- Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值
您需要在二叉树的每一行中找到最大的值. 示例: 输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [1, 3, 9] class Solution { public: vector<i ...
- [转]WPF 构建无外观(Lookless)控件
构建一个用户可以使用Template属性设置外观的WPF控件需要以下几步 1.继承自System.Windows.Controls.Control 2.设置DefaultStyleKeyPropert ...
- webapp中<meta>与css代码部署
1.页面头部标签申明 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" id="te ...
- [Day3] Nginx配置Https
一. 网络安全之Http与Https Http协议是互联网行业中设计的最好架构之一.20多年间,应用Http协议传输数据的软件越来越多,企图从http协议传输中非法获取.篡改用户重要数据的非法行为也越 ...
- python多进程,进程池,数据共享,进程通信,分布式进程
一.操作系统中相关进程的知识 Unix/Linux操作系统提供了一个fork()系统调用,它非常特殊.普通的函数调用,调用一次,返回一次,但是fork()调用一次,返回两次,因为操作系统自动把当前 ...
- JAVA面试常见问题之开源框架和容器篇
1.Servlet的生命周期 加载:加载到虚拟机 初始化:init() 一个生命周期中只会被调用一次. 服务:service() 销毁:destroy() 2.转发与重定向的区别 转发在服务器端完成的 ...
- c++新特性实验(5)声明与定义:属性列表(C++11 起)
1.初识属性 1.1 实验A: noreturn 属性 [[ noreturn ]] static void thread1(void *data){ cout << "nore ...
- bzoj 1800 [Ahoi2009]fly 飞行棋——模拟
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1800 原来只想到一个弧是一条边. 然后发现不是.差点不会做.经Zinn提醒,不用枚举那条边由 ...
- TZ_14_Zuul网关_过滤器
1.Zuul作为网关的其中一个重要功能,就是实现请求的鉴权.而这个动作我们往往是通过Zuul提供的过滤器来实现的. 2.自定义过滤器实现用户登陆时需要携带一个Key才可以登陆,否则返回403 1> ...
- 前端(jQuery)(4)-- jQuery隐藏显示与淡入淡出、滑动、回调
1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...