首页 > 其他分享> > element-ui vue el-drawer抽屉

element-ui vue el-drawer抽屉

2021-07-27 21:02:16 作者：互联网

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0;
        }

        .el-header {
            color: #333;
            padding: 0 !important;
            height: 100% !important;
            background: antiquewhite;
        }

        .el-drawer__close-btn::before {
            height: 20px;
            content: 'x';
        }

        .el-drawer__wrapper {
            background: antiquewhite;
            color: #90AACD;
        }

        .el-drawer__header {
            margin-bottom: 5px;
            padding: 5px;
            color: #90AACD;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-header>
            <button @click="visible = true">open</button>
            <h2 style="display: inline-block;margin-left: 20px">Header</h2>
        </el-header>
        <el-drawer :visible.sync="visible" :before-close="handleClose" ref="drawer" title="标题" :size="size">
            <span>内容
                《行路难三首》是唐代大诗人李白的组诗作品。这三首诗抒写了诗人在政治道路上遭遇艰难后的感慨，反映了诗人在思想上既不愿与权贵同流合污又不愿独善一身的矛盾。正是这种无法解决的矛盾所激起的感情波涛使这组诗气象非凡。诗中跌宕起伏的感情，跳跃式的思维，以及高昂的气势，又使作品具有独特的艺术魅力，而成为后人广为传诵的千古名篇。
            </span>
        </el-drawer>
        <h1>Body</h1>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    visible: false,
                    size: '60%'
                };
            },
            methods: {
                handleClose(done) {
                    done();
                }
            }
        });
    </script>
</body>

</html>

标签：__,el,vue,color,element,padding,drawer,5px
来源： https://blog.csdn.net/daddykei/article/details/119152928