首页 问题 前端

Element UI之drawer抽屉实现伸缩功能

​ 用过 Iview 和 Element 的人会注意到他们的组件抽屉( drawer )中 iview 的更加有趣，因为iview 可以通过点击边框自由拖拽实现抽屉的宽度变化

实现效果

效果

精简代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="drawer = true">从右往左开</el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :custom-class="'drawer_custom'"
      :direction="'rtl'">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://gcore.jsdelivr.net/gh/guicaiyue/Xin/js/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { drawer: false }
      },
      mounted: function(){
        const element = document.getElementsByClassName('drawer_custom')[0];
        if (!element) {
            return;
        }
        let flag = false;
        element.onmousedown = function(e) {
            const attribute = e.target.getAttribute('class');
            if (attribute && attribute.indexOf('drawer_custom') !== -1) {
                flag = true;
            }
        };
        document.onmousemove = function(e) {
            if (flag) {
                // 宽度下 document.body 与 document.documentElement 效果并无区别，
                //但document.documentElement概念上更符合本意，因为我们要的是屏幕宽度，而非网页可视宽度
                // element.style.width = document.body.clientWidth + 30 - e.clientX + 'px';
                element.style.width = document.documentElement.clientWidth + 30 - e.clientX + 'px';
            }
        };
        document.onmouseup = function() {
            flag = false;
        };
      }
    });
  </script>
  <style type="text/css">
    .drawer_custom:before{
      position: absolute;
      top: 50%;
      content: '';
      z-index: 1;
      width:0;
      border-width:10px;
      border-style:solid;
      border-color:transparent black transparent transparent; /* transparent 设置边框颜色透明 */
      cursor: w-resize;
    }
  </style>
</html>