最近一直在接触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
<script>
export default {
name: 'actionsheet',
data() {
return {
}
},
props:{
open:false //接收从父组件传过来的控制是否显示的属性
},
methods: {
// 在组件的模板中给关闭按钮和取消按钮绑定了click事件,功能为关闭操作表,通过this.$emit发射该事件到父组件(,第一个参数为父组件接收的方法属性名,如果想传递参数也可以在后面加上第二个参数)
cancelFunc() {
this.$emit('show');
}
}
}
</script>
<style>
* {
box-sizing: border-box;
}
.actionsheet_wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 8px;
.actionsheet {
background-color: #fff;
border-radius: 10px;
._header {
display: flex;
width: 100%;
height: 40px;
padding: 0 8px;
align-items: center;
.cart {
margin-right: auto;
}
.clear {
color: #0894ec;
}
}
._content {
text-align: center;
.cancel {
background-color: #39678c;
color: #fff;
height: 40px;
line-height: 40px;
border-radius: 0 0 10px 10px;
margin: 0;
}
.item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 8px;
img {
margin-right: 6px;
}
}
}
}
}
</style>
//过渡效果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' 导入组件
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'HelloWorld',
openActionsheet:false
}
},
components:{
Actionsheet //注册组件
},
methods:{
//该方法为按钮的点击事件,把是否显示操作表的变量取反
toggleActionSheet(){
this.openActionsheet = !this.openActionsheet;
},
//该方法为actionsheet组件通过this.$emit发射过来事件,用于控制操作表显隐
func(a){
this.openActionsheet = !this.openActionsheet;
console.log(a)
}
}
}
</script>
<style>
button{
border:none;
width: 90px;
height: 35px;
font-size: 14px;
line-height: 35px;
border-radius: 6px;
color: #fff;
background-color: #0894ec;
}
</style>
7.最终效果截图与视频
点击按钮,操作表从屏幕底部滑入,再次点击按钮滑出
也可点击操作表子组件的关闭按钮和取消按钮来关闭,效果媲美原生.
文章中如有错误,请指出,转载请标明,希望能给大家带来用处.
vue2封装操作表 actionsheet截图视频
网友评论