1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Drawer：
在你的 Vue 组件中导入 Drawer，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-button @click="openDrawer">打开抽屉</el-button>
<el-drawer
:visible.sync="drawerVisible"
:title="drawerTitle"
:width="drawerWidth"
:before-close="beforeDrawerClose"
>
<p>这是抽屉中的内容。</p>
<el-button type="primary" @click="closeDrawer">关闭抽屉</el-button>
</el-drawer>
</div>
</template>
<script>
import { ElButton, ElDrawer } from 'element-plus';
export default {
components: {
ElButton,
ElDrawer,
},
data() {
return {
drawerVisible: false,
drawerTitle: '抽屉标题',
drawerWidth: '30%',
};
},
methods: {
openDrawer() {
this.drawerVisible = true;
},
closeDrawer() {
this.drawerVisible = false;
},
beforeDrawerClose(done) {
// 可以在此处添加一些关闭前的逻辑
done(); // 调用 done() 执行关闭
},
},
};
</script>
在上述代码中，我们导入了 ElButton 和 ElDrawer 组件，并在模板中使用它们。通过 :visible.sync 实现抽屉的显示与隐藏，通过 :title 设置抽屉的标题，通过 :width 设置抽屉的宽度，通过 :before-close 设置关闭前的逻辑。
3. 自定义 Drawer：
你可以根据需要自定义 Drawer，例如，设置位置、添加遮罩、设置底部按钮等：
<template>
<div>
<el-button @click="openBottomDrawer">打开底部抽屉</el-button>
<el-drawer
:visible.sync="bottomDrawerVisible"
title="底部抽屉"
placement="bottom"
:with-header="false"
:with-footer="false"
>
<p>这是底部抽屉中的内容。</p>
<el-button type="primary" @click="closeBottomDrawer">关闭抽屉</el-button>
</el-drawer>
</div>
</template>
<script>
import { ElButton, ElDrawer } from 'element-plus';
export default {
components: {
ElButton,
ElDrawer,
},
data() {
return {
bottomDrawerVisible: false,
};
},
methods: {
openBottomDrawer() {
this.bottomDrawerVisible = true;
},
closeBottomDrawer() {
this.bottomDrawerVisible = false;
},
},
};
</script>
在这个例子中，我们创建了一个底部的抽屉，通过 placement 属性设置抽屉的位置，通过 :with-header 和 :with-footer 属性控制是否显示头部和底部的默认内容。
转载请注明出处：http://www.zyzy.cn/article/detail/5587/ElementPlus