- 开发工具:HBuilder
- 开发目标:使用vue2.0+mui.min.css开发一个与mui官方功能一致的actionsheet组件
- 实现功能
- actionsheet组件可接收一个items参数来显示具体子项
- actionsheet组件可接收一个onItemClick回调来处理子项点击事件
备注:简单起见,不使用vue的单文件组件开发模式
开发步骤
- 使用HBuilder,创建一个移动App(mui项目)
- 引入mui.min.css及vue.js
-
搭建一个页面框架,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" href="css/mui.min.css" /> </head> <body> <div id="app"></div> <script type="text/javascript" src="js/vue.js"></script> </body>
4.开发actionsheet组件,代码如下
组件动画样式/**
- 重写mui.min.css中的样式
*/
.mui-popover.mui-popover-action {
display: block;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
transition: none;
}
/**
- 定义actionsheet的backdrop进入动画效果
*/
.mui-actionsheet-enter {
opacity: 1;
}
/**
- 定义actionsheet的backdrop离开动画效果
*/
.mui-actionsheet-leave-to {
opacity: 0;
}
/**
- 定义actionsheet动画持续时间
*/
.mui-actionsheet-enter-active,
.mui-actionsheet-leave-active,
.mui-actionsheet-enter-active .mui-popover.mui-popover-action,
.mui-actionsheet-leave-active .mui-popover.mui-popover-action {
-webkit-transition: -webkit-transform .3s, opacity .3s;
transition: transform .3s, opacity .3s;
}
/**
- 定义actionsheet进入时,离开时动画效果
*/
.mui-actionsheet-enter .mui-popover.mui-popover-action,
.mui-actionsheet-leave-to .mui-popover.mui-popover-action {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
组件模板代码
