element中drawer模板的实现

飞骐物流

1、效果图

2、上代码

1. <template>
   
2.     <div>
   
3.         <el-drawer
   
4.             size="100%"
   
5.             :visible.sync="drawer"
   
6.             style="position: absolute;"
   
7.             class="details"
   
8.             :modal-append-to-body="false"
   
9.             :modal = "false"
   
10.             :before-close="handleClose">
    
11.         </el-drawer>
    
12.     </div>
    
13. </template>
    
14. <script>
    
15. export default {
    
16.     data() {
    
17.         return {
    
18.             drawer: false,
    
19.         }
    
20.     },
    
21.     methods: {
    
22.         /** 初始化 */
    
23.         init(){
    
24.             this.drawer = true
    
25.         },
    
26.         /** 关闭回调*/
    
27.         handleClose(){
    
28.             this.drawer = false
    
29.         }
    
30.     }
    
31. }
    
32. </script>
    
33. <style lang="scss" scoped>
    
34.     ::v-deep .el-drawer__header {
    
35.         font-size: 22px;
    
36.         text-align: center;
    
37.         margin-bottom: 16px;
    
38.         padding: 0;
    
39.         .el-drawer__close-btn{
    
40.             background-color: rgb(255, 77, 79);
    
41.             color: white;
    
42.         }
    
43.     }
    
44.     ::v-deep .el-drawer__body {
    
45.         padding: 0px;
    
46.     }
    
47.     .details {
    
48.         width: 80%;
    
49.         margin-right: 0px;
    
50.         margin-left: 20%;
    
51.         box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    
52.     }
    
53. </style>

复制代码

到此这篇关于element中drawer模板的实现的文章就介绍到这了,更多相关element drawer模板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/291959ani.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！