element ui实现抽屉效果_如何给element添加一个抽屉组件

近来因为业务需要，对比iview和element库，发现element确实要比实习期间使用的iview强大点，尤其文档更为友好，但是iview的组件功能更多一点，比如分割线和抽屉组件

今天特意手写一个抽屉组件，方便自己使用element库，写好的组件我已经放在我的githup了，mmdctjj/meow​github.com

一、实践

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

export default {

props: {

// 是否显示drawer

drawerVisible: Boolean,

// drawer方向

direction: {

type: String,

validator(val) {

return ["right", "left"].indexOf(val) !== -1;

}

},

// drawer宽度

width: {

type: Number,

default: 400

},

// drawer背景色

background: {

type: String,

default: "#ffffff"

},

// 是否显示遮罩层

mask: {

type: Boolean,

default: true

}

}

};

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

class="drawer_body"

:style="{'right