如何给element添加一个抽屉组件的方法步骤

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

今天特意手写一个抽屉组件,方便自己使用element库,写好的组件我已经放在我的githup了, 点这里

一、实践

1.分析

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

// drawer.vue <template> <div></div> <div> <div></div> </div> </template> <style scoped> .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; } </style>

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

如何给element添加一个抽屉组件的方法步骤

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

动态绑定的

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

<script> 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 } } }; </script>

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

<div :style="{'right':direction=='right'?'0':'auto', 'left':direction=='left'?'0':'auto', 'width':width+'px','background':background}" >drawer</div>

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

//index.vue <template> <div> ... <el-button size="mini" @click="visible">显示抽屉</el-button> <Drawer :drawerVisible="drawerVisible" direction="right" :mask="true" background="aquamarine" ></Drawer> </div> </template> <script> export default { data() { return { drawerVisible: false }; }, methods:{ // 打开抽屉 visible() { this.drawerVisible = true; } } } </script>

如何给element添加一个抽屉组件的方法步骤

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修饰符

... <div v-if="drawerVisible"></div> <transition :name="this.direction=='left'?'slide-right':'slide-left'"> <div v-if="drawerVisible" @click.stop="closeBtn?'':close"> <div :style="{ 'right':direction=='right'?'0':'auto', 'left':direction=='left'?'0':'auto', 'width':width+'px', 'background': background}" > </div> </div> </transition> ... methods: { close() { this.$emit("update:drawerVisible", false); } }

另外,我们还希望在关闭抽屉组件时,我们可以监听到这个事件然后做出反应

methods: { close() { this.$emit("update:drawerVisible", false); this.$emit("close"); } }

此时需要在抽屉组件上添加

<Drawer :drawerVisible.sync="drawerVisible" @close="close" > </Drawer> methods:{ close(){ // 关闭抽屉组件时你要做的事 } }

2.动画

动画是UI的灵魂,所以接下来给抽屉组件的显示和隐藏添加动画,我们使用transition的css动画做动画过度效果

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a7d709d4de0642c1d852b7708026fb80.html