如何向元素添加抽屉组件

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

今天特意写了一个抽屉组件，方便自己使用素材库。我已经把写好的组件放到我的githup里了，点击这里。

一.实践

1.分析

抽屉组件的z-index必须在当前页面之上，并且在抽屉主体外部的区域会有一个半透明的遮罩层，这很容易知道

//抽屉. vuetemplate div class=' mask '/div div class='抽屉' div class='抽屉_ body '/div/div/template style scoped .抽屉{ position: absolute高度： 100 VH；top : 0；bottom : 0；right : 0；left : 0；z-index: 1000000！重要；}.抽屉。抽屉_主体{ height : 100%；绝对位置：z-index : 1000001；背景-color : # fff；}.掩模{ height: 100vh宽度： 100 VW；绝对位置：z-index : 1000000；top : 0；left : 0；背景色： # 000；opacity: 0.5}/style是我们现在想要的，下一步就是给抽屉_body添加style

作为一个灵活的构件库，我们希望样式可以随时定制，所以接下来要添加的样式使用道具

动态绑定

参考iview的风格，除了抽屉的宽度，我们还需要设置抽屉的方向，需要的时候展示，不需要的时候隐藏，甚至改变抽屉的背景颜色，这样才能更加显眼.这些都可以实现，请看下面的代码。

Scriptexport默认值{ props : {//是否显示抽屉抽屉可见： boolean，//抽屉方向： {type: string，val(val){ return[' right '，' left']。(val)的索引！==-1;} }，//抽屉宽度width : {type : number，默认： 400}，//抽屉背景色background : { type : string，默认：' # ffffff'}，//是否显示蒙版图层mask: {type: boolean，default: true } }/script对于宽度和背景色，需要额外处理。

div class=' drawler _ body ' : style=' { ' right ' : direction==' right '？'0': '自动'，'左' :方向=='左'？'0' :' auto '，' width' : width' px '，' background' : background} '抽屉/div您只需要在使用组件的地方引入组件，然后提供您想要修改的道具值

//index.vuetemplate div.El-button size=' mini ' @ click=' visible ' display drawler/El-button drawler : drawler sible=' drawler sible ' direction=' right ' : mask=' true ' background='海蓝宝石'/drawler/div/templatescript export default { data(){ return { drawler sible : false }；}，methods:{ //打开抽屉可见(){this。抽屉可见=真；} } }/脚本

2.关上抽屉

当点击蒙版图层时，我们希望关闭已经打开的抽屉组件。如果您直接修改父组件传递的drawerVisible值，您将报告以下错误

Vue . ESM . js :629[Vue warn]:避免直接更改一个道具，因为一旦父组件重新呈现，该值将被覆盖。相反，使用基于该程序值的数据或计算属性。道具正在被变异： '可绘制'

这是因为vue是单向数据流。如果要更改父元素的值，必须使用监视事件的方法。但是，在2.3.0之后。添加了sync修饰符，因此正确的方法是使用。同步修改器

.div v-if=' drawerVisible ' class=' mask '/div transition : name=' this。方向=='左侧'？向右滑动":"向左滑动" div " v-if=" drawerVibler " @单击。stop="closeBtn？": close ' class=' drawer ' div class=' drawer _ body ' : style=' { ' right ' : direction=' right '？'0': '自动','左' :方向=='左？'0': '自动','宽度' :宽度px '，'背景' :背景} '/div/div/过渡.methods: { close() { this .$ emit(' update : drawervisible '，false)；}}另外，我们还希望在关闭抽屉组件时，我们可以监听到这个事件然后做出反应

methods: { close() { this .$ emit(' update : drawervisible '，false)；这个$ emit(' close ')；}}此时需要在抽屉组件上添加

抽屉：可拉伸。sync=' drawerVisible ' @ close=' close '/抽屉方法：{ close(){ //关闭抽屉组件时你要做的事}}2.动画

动画是用户界面的灵魂，所以接下来给抽屉组件的显示和隐藏添加动画，我们使用过渡的钢性铸铁动画做动画过度效果

//抽屉。vue div class='抽屉' div class='面具'/div！-不同方向使用不用的动画名称，如果抽屉在左边，则进入方向是朝- transition : name=' this。方向=='左侧'？slide-right ' : ' slide-left ' ' div class=' drawer _ body ' v-if=' drawerVisible ' : style=' { ' right ' : direction==' right '？'0': '自动','左' :方向=='左'?'0':'auto '，' width':width 'px '，' background ' : background } '抽屉/div/过渡/div/模板样式作用域/**.*这里省略了写过的样式*/.滑动-右键-输入-活动，滑动-右-左-活动，向左滑动-回车-激活。向左滑动-保持活动状态{ will-change :转换；过渡：变压器300毫秒；绝对位置：宽度： 100大众；高度： 100 VH飞越：隐藏；}.向右滑动输入。滑动-向右-向左-活动{ transform: translate(-100%，0)；}.向左滑动，保持活动状态。向左滑动-输入{ transform: translate(100%，0)；}/样式虽然现在已经完全实现了抽屉的功能，但是本着更加精美的原则，我还打算使用狭槽给它添加辩题和页脚

3.添加标题

标题原位肝移植的名字值是页眉

添加标题的目的是为了让抽屉组件看起来更加清楚，此外，除了添加标题，我还想添加个关闭按钮

//需要添加几个小道具属性脚本导出默认值{ prop : }//抽屉标题标题：字符串，//是否显示关闭按钮closeBtn: { type:布尔值，default: false }，} }；/script你可以选择是否添加标题，是否添加关闭按钮，值的注意的是如果添加了关闭按钮，点击遮罩层就不会自动关闭抽屉组件了

！-这里要啰嗦下布局，如果你只选择开启关闭按钮，那调整内容布局是柔性端如果两者都开启，那调整内容布局是插槽间空格名称=' header ' div v-if=' title | | closeBtn ' : style=' { ' justice-content ' : title '？空格-介于" : " flex-end ' } ' class=' title ' div v-if=' title ' { title } }/div El-button v-if=' closeBtn '圆形大小='mini '图标=' El-icon-close ' @单击=' close '/El-button/div/slot我是这么做到禁用遮罩层点击事件的

div v-if=' drawerviewpable ' @单击。stop=' closeBtn '？close' class='mask'/div当然这些你可以使用具名插槽自定义的

抽屉：宽度='400 '方向='right' :mask='true' title='抽屉组件v形槽：表头这里是自定义标题/div div style=' height :100 px '/div/draw 4 .添加页脚

页脚原位肝移植的名字值是页脚

为了使得页脚和标题有一定的距离，我给主体内容添加了最小高度

div style=' min-height :82 VH；padding: 5px 0 '插槽/插槽/div方法是很类似的，只是我多添加了两个监听事件，确定和取消

//drawer . vueslot name=' footer ' div class=' footer ' El-button size=' mini ' type=' primary ' @ click=' footer ok ' confirm/El-button El-button size=' mini ' @ click=' footer cal ' cancel/El-button/div/slot//Introduced page drawer : width=' 400 '方向=' right ' : mask=' true ' title=' drawer component ' 3: footer-ok=' footer ok ' 3: footer-cal='

道具： {页脚ok :函数，页脚cal :函数}，页脚的布局如下

。页脚{边框-top: 0.1px实心# ddddisplay: flexjustice-content :灵活端；padding-top : 10px；}当然，您也可以使用命名插槽自定义这些

Drawer:宽度=' 400 '方向='右侧' :掩码=' true' title='抽屉组件' div v-slot :页眉此处是自定义标题/div样式='高度：100px'/div div v-slot3360页脚此处是自定义页脚/div/draw

前面说过，主体增加了最小高度，但是如果超过了最小高度，可能会散开，所以我给它增加了滚动功能

//道具添加//是否打开滚动滚动条： {type: boolean，default: false}在drawer _ body style末尾添加overflow-y样式

div class=' drawler _ body ' : style=' { ' right ' : direction=' right '？'0': '自动'，'左' :方向=='左'？'0':'auto '，' width':width 'px '，' background': background，' overflow-y ' : croll '默认情况下，不打开Scroll' : '隐藏' }'/divscroll。如果您的抽屉中几乎没有内容，则不需要忽略此属性，但请记住在内容打开抽屉时手动打开此功能来复制代码。

6.细节优化

在这里，我将谈谈我自己的缺点以及如何改进它

A.滚动条错误

当向右选择抽屉时，动画过程中会出现滚动条，这似乎大大减少了我的UI组件。为了解决这个问题，我计划在组件中监控drawerVisible，需要显示时禁用body的滚动效果，不需要显示时恢复body的显示效果。

watch: { drawerVisible(n，o){ if(n==true){ document . document element . style . overflow y=' hidden '；document . document element . style . overflow x=' hidden '；}}}，b .泡泡bug关闭

我点击抽屉以外的区域可以正常关闭抽屉，但是我发现当我点击抽屉的非按钮区域时，抽屉也会关闭，这是一个向下冒泡的bug。我对这个bug的解决方案是在drawer_body中添加一个无意义的事件，防止向上冒泡。

Div @click.stop='clickBg_' //注意class=' drawer _ body ' : style=' { ' right ' : direction==' right '？0': '自动'，'左' :方向=='左'？'0':'auto '，' width':width 'px '，' background': background，' overflow-y ' : croll '滚动' : '隐藏' }'/div ii。美国石油学会文件

1.属性

属性描述类型是否默认drawerVisible显示抽屉布尔false方向抽屉方向字符串左宽度抽屉宽度数字400背景抽屉背景颜色字符串# Ffffff遮罩是否显示遮罩层布尔true标题抽屉标题布尔true closeBtn是否显示关闭按钮字符串-滚动是否打开滚动布尔false 2。事件

事件描述返回值关闭监视器关闭事件无脚注确认绑定事件，使用默认页脚时有效无脚注取消绑定事件，使用默认页脚时有效无3 .槽

名称描述页眉页眉插槽名称默认抽屉主要部分，页脚插槽名称可以省略注意：插槽中的按钮都是元素的内置组件。如果您的项目中没有引入元素库，请用命名槽重写页眉和页脚部分。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。