//drawer.vue <div> <div></div> <!-- 不同方向使用不用的动画名称，如果抽屉在左边，则进入方向是朝 → --> <transition :name="this.direction=='left'?'slide-right':'slide-left'"> <div v-if="drawerVisible" :style="{'right':direction=='right'?'0':'auto', 'left':direction=='left'?'0':'auto', 'width':width+'px', 'background':background}" >drawer</div> </transition> </div> </template> <style scoped> /* * ... *这里省略了写过的样式 */ .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: transform 300ms; position: absolute; width: 100vw; height: 100vh; overflow: hidden; } .slide-right-enter, .slide-right-leave-active { transform: translate(-100%, 0); } .slide-left-leave-active, .slide-left-enter { transform: translate(100%, 0); } </style>
虽然现在已经完全实现了抽屉的功能，但是本着更加精美的原则，我还打算使用slot给它添加辩题和页脚
3.添加标题
标题solt的name值是header
添加标题的目的是为了让抽屉组件看起来更加清楚，此外，除了添加标题，我还想添加个关闭按钮
// 需要添加几个props属性 <script> export default { props: { // drawer标题 title: String, // 是否显示关闭按钮 closeBtn: { type: Boolean, default: false }, } }; </script>
你可以选择是否添加标题，是否添加关闭按钮，值的注意的是如果添加了关闭按钮，点击遮罩层就不会自动关闭抽屉组件了
<!--这里要啰嗦下布局，如果你只选择开启关闭按钮，那justify-content布局是flex-end 如果两者都开启，那justify-content布局是space-between--> <slot> <div v-if="title||closeBtn" :style="{'justify-content':title?'space-between':'flex-end'}" > <div v-if="title">{{title}}</div> <el-button v-if="closeBtn" circle size="mini" icon="el-icon-close" @click="close" ></el-button> </div> </slot>
我是这么做到禁用遮罩层点击事件的
<div v-if="drawerVisible" @click.stop="closeBtn?'':close"></div>
当然这些你可以使用具名插槽自定义的
<Drawer :width="400" direction="right" :mask="true" title="抽屉组件" > <div v-slot:header>这里是自定义标题</div> <div></div> </Drawer>
4.添加页脚
页脚solt的name值是footer
为了使得页脚和标题有一定的距离，我给主体内容添加了最小高度
<div> <slot></slot> </div>
方法是很类似的，只是我多添加了两个监听事件，确定和取消
//drawer.vue <slot> <div> <el-button size="mini" type="primary" @click="footerOk">确认</el-button> <el-button size="mini" @click="footerCal">取消</el-button> </div> </slot>
//引入的页面 <Drawer :width="400" direction="right" :mask="true" title="抽屉组件" :footer-ok="footerOk" :footer-cal="footerCal" > </Drawer>
还需要在props中添加对应的值
props: { footerOk: Function, footerCal: Function },
关于页脚的布局是这样的
.footer { border-top: 0.1px solid #ddd; display: flex; justify-content: flex-end; padding-top: 10px; }
当然这些你也是可以使用具名插槽自定义的
<Drawer :width="400" direction="right" :mask="true" title="抽屉组件" > <div v-slot:header>这里是自定义标题</div> <div></div> <div v-slot:footer>这里是自定义页脚</div> </Drawer>
5.主体是否可以滚动
前面说过给主体添加了最小高度，但是超过最小高度，可能会被撑开布局，所以我给它添加了滚动功能
// props添加 // 是否开启滚动 scroll: { type: Boolean, default: false }
在drawer_body的样式末尾追加overflow-y样式
<div :style="{ 'right':direction=='right'?'0':'auto', 'left':direction=='left'?'0':'auto', 'width':width+'px', 'background': background, 'overflow-y':scroll?'scroll':'hidden'}" > </div>
scroll默认是不开启的，如果你的抽屉要放的内容少，就不用理这个属性，但是当内容撑开抽屉时记得手动开启这个功能复制代码
6.细节的优化
这里说下自己的不足之处，并且如何改进它
a.滚动条bug