最近一直在接触vue2.0,也算是入门没多久,vue给我最深的印象除了数据驱动,虚拟DOM,就是它的响应式组件了,自己写根据项目不同而不同的组件,以达到组件复用的目的,例子中我们使用到了父子组件传递事件,vue中transition的使用,接下来上代码.
*由于不会弄gif图片,所以上传了视频可以查看效果,视频在底部
介于会有新手,所以搭建项目我写的清楚一些.
这里我们用默认的vue2+webpack2模板
1.安装NodeJS,自己去Node中文网下载安装即可,这里基于windows系统说明
2.安装脚手架工具vue-cli
npm i vue-cli -g
安装完成后在node下 vue指令会被注册为一个全局命令
3.创建项目
用默认模板即可,我们cd定位到桌面下创建,名字自己起,也可定到别的盘符
vue init webpack actionsheetDemo
4.安装less
脚手架中已经自动配置好了less或sass的一些方法,所以我们想用哪个预编译语言直接安装就好
npm i less less-loader --save-dev
5.启动项目
npm run dev
这时等编译结束项目就初始化完成了,地址为localhost:8080,但是默认没有自动打开浏览器,我们可以在项目目录下的config/index.js中找到配置选项:
module.exports = {
dev: {
.....
host: 'localhost',
port: 8080,
autoOpenBrowser: false, //这里默认为false 改为true即可
.....
}
}
5.封装组件
项目初始化完成后,默认选择安装了vue-router,所以在根组件App.vue中默认路由是HelloWorld.vue,为了简便一些,我们就在这个组件内写(可以改为自己项目中的名字*.vue,这里为了方便,不做修改了,用默认的)
在components目录下新建一个actionsheet.vue文件 代码如下:
//actionsheet.vue
//过渡效果transition使用
定义transition的name属性值为fade,定义从底部向上淡入的滑入和滑出,使用translate3d,在移动端会开启硬件加速器,效果很流畅,接近原生效果
.fade-enter-active,
.fade-leave-active {
transition: all .4s ease;
}
.fade-enter,
.fade-leave-to {
transform: translate3d(0, 100%, 0);
opacity: 0;
}
6.导入组件
我们在Helloworld.vue中引入actionsheet组件,并添加一个按钮
//HelloWorld.vue
import Actionsheet from './actionsheet' 导入组件
7.最终效果截图与视频
点击按钮,操作表从屏幕底部滑入,再次点击按钮滑出
也可点击操作表子组件的关闭按钮和取消按钮来关闭,效果媲美原生.
文章中如有错误,请指出,转载请标明,希望能给大家带来用处.