elementUI可拖拉宽度抽屉

Element UI 的 <el-drawer> 组件本身不支持拖拽调整宽度的功能。但是你可以使用第三方库，如 vuedraggable 来实现拖拽功能，并结合 Element UI 的 <el-drawer> 组件来创建一个可调整宽度的抽屉。

以下是一个简单的例子，展示如何结合 vuedraggable 和 Element UI 创建一个可拖动调整宽度的抽屉：

1. 首先，确保你已经安装了 element-ui 和 vuedraggable：

npm install element-ui vuedraggable

2. 接下来，在你的 Vue 组件中使用它们：

<template>
  <div>
    <el-button @click="drawer = true">打开抽屉</el-button>
    <el-drawer
      title="可拖动调整宽度的抽屉"
      :visible.sync="drawer"
      :width="drawerWidth"
      :modal="false"
    >
      <vuedraggable class="drag-container" v-model="widths" @end="updateWidth">
        <div
          class="draggable-item"
          v-for="(width, index) in widths"
          :key="index"
          :style="{ width: width + 'px' }"
        ></div>
      </vuedraggable>
    </el-drawer>
  </div>
</template>
 
<script>
import { Drawer, Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import vuedraggable from 'vuedraggable';
 
export default {
  components: {
    [Drawer.name]: Drawer,
    [Button.name]: Button,
    vuedraggable
  },
  data() {
    return {
      drawer: false,
      drawerWidth: 300,
      widths: [300]
    };
  },
  methods: {
    updateWidth(event) {
      const newIndex = event.newIndex;
      this.drawerWidth = this.widths[newIndex];
    }
  }
};
</script>
 
<style>
.drag-container {
  margin: 10px;
}
.draggable-item {
  margin: 10px; 
  cursor: move;
  background-color: #eee;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

在这个例子中，.draggable-item 是可拖动的元素，它们被包裹在 vuedraggable 组件中。每个 .draggable-item 的宽度来自 widths 数组。当拖动结束，updateWidth 方法会更新抽屉的宽度。这个例子提供了一个基本的框架，你可以根据自己的需求进一步扩展和定制。