elementui抽屉点击出来另一个抽屉、vue抽屉组件

在使用Element UI的抽屉组件时，有时我们需要在一个抽屉中点击某个按钮或链接，触发另一个抽屉的显示。本文将介绍如何实现这一功能，并提供多种解决方案。

解决方案概述

要实现在一个抽屉中点击按钮后显示另一个抽屉，我们可以通过Vue的状态管理来控制抽屉的显示与隐藏。具体来说，可以使用v-model绑定抽屉的可见性状态，并通过事件处理函数来切换这些状态。

方法一：使用父组件控制子组件的显示

1. 创建父组件

首先，创建一个父组件来管理两个抽屉的显示状态。

vue

  <div>
    打开个抽屉</p>

<pre><code><el-drawer
  title="个抽屉"
  :visible.sync="drawer1"
  size="50%"
>
  <el-button @click="drawer2 = true">打开第二个抽屉</el-button>
</el-drawer>

<el-drawer
  title="第二个抽屉"
  :visible.sync="drawer2"
  size="50%"
>
  <p>这是第二个抽屉的内容</p>
</el-drawer>

export default {
data() {
return {
drawer1: false,
drawer2: false
};
}
};

/* 自定义样式 */

2. 解释

• drawer1 和 drawer2 是两个布尔值，用于控制个和第二个抽屉的显示状态。
• 使用 :visible.sync 绑定抽屉的可见性状态。
• 在个抽屉中添加一个按钮，点击该按钮时将 drawer2 设置为 true，从而显示第二个抽屉。

方法二：使用子组件通信

1. 创建子组件

如果抽屉的内容较为复杂，可以将每个抽屉封装成一个子组件，通过父组件传递状态和事件。

个抽屉组件 (FirstDrawer.vue)

vue

  <el-drawer
    title="个抽屉"
    :visible.sync="visible"
    size="50%"
  >
    打开第二个抽屉
  
</p>


export default {
  props: {
    visible: Boolean
  }
};


<p>

第二个抽屉组件 (SecondDrawer.vue)

vue

  <el-drawer
    title="第二个抽屉"
    :visible.sync="visible"
    size="50%"
  >
    <p>这是第二个抽屉的内容</p>
  
</p>


export default {
  props: {
    visible: Boolean
  }
};


<p>

2. 创建父组件

在父组件中使用这两个子组件，并管理它们的显示状态。

vue

  <div>
    打开个抽屉</p>

<pre><code><first-drawer
  :visible="drawer1"
  @open-second-drawer="drawer2 = true"
></first-drawer>

<second-drawer
  :visible="drawer2"
></second-drawer>

import FirstDrawer from ‘./FirstDrawer.vue’;
import SecondDrawer from ‘./SecondDrawer.vue’;

export default {
components: {
FirstDrawer,
SecondDrawer
},
data() {
return {
drawer1: false,
drawer2: false
};
}
};

3. 解释

• FirstDrawer 和 SecondDrawer 是两个子组件，分别负责显示个和第二个抽屉。
• 父组件通过 :visible 属性传递抽屉的显示状态，并通过 $emit 触发事件来控制第二个抽屉的显示。
• 父组件监听 open-second-drawer 事件，并在事件触发时将 drawer2 设置为 true。

总结

本文介绍了两种实现Element UI抽屉组件嵌套显示的方法。种方法通过父组件直接管理抽屉的显示状态，适用于简单的场景；第二种方法通过子组件通信，适用于抽屉内容较为复杂的情况。希望这些方法能帮助你在项目中更好地使用Element UI的抽屉组件。