这篇文章给大家分享的是有关怎样给element添加一个抽屉组件的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

为同江等地区用户提供了全套网页设计制作服务，及同江网站建设行业解决方案。主营业务为网站建设、网站设计、同江网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

一、实践

1.分析

一个抽屉组件的z-index必定是在当前页面之上的，在抽屉主体之外的区域还会有一层半透明的遮罩层，知道这些就很容易了

// drawer.vue



.drawer {
 position: absolute;
 height: 100vh;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 z-index: 1000000 !important;
}
.drawer .drawer_body {
 height: 100%;
 position: absolute;
 z-index: 1000001;
 background-color: #fff;
}
.mask {
 height: 100vh;
 width: 100vw;
 position: absolute;
 z-index: 1000000;
 top: 0;
 left: 0;
 background-color: #000;
 opacity: 0.5;
}

现在已经是我们想要的样子了，接下来是给drawer_body添加样式

作为一个灵活的组件库，我们希望样式是可以随时定制的，所以，接下要添加的样式都 使用props

动态绑定的

参考iview的样式，除了抽屉的宽度，还需要设置抽屉的方向，当我们需要抽屉时让它显示出来，不需要时隐藏它，或者为了更加显眼，甚至给抽屉更换背景色......，这些都是可以实现的，看下面的代码

对于宽度和背景色，你还需要额外的处理下

drawer

你只需在使用的地方引入组件，然后提供你想修改的props值

//index.vue

2.关闭抽屉

在点击遮罩层的时候，我们希望可以关闭已经打开的抽屉组件，这里如果你直接修改父组件传过来的drawerVisible值，会报错如下

vue.esm.js:629 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders. Instead, use a data or computed property based on the
prop's value. Prop being mutated: "drawerVisible"

这是因为vue是单向数据流的，如果想改变父元素的值，必须使用监听事件的方式，但是2.3.0之后添加了.sync修饰符，所以，正确的做法是使用.sync修饰符

...