element-plus组件 el-drawer， 点击不同按钮时 怎么使el-drawer弹出的内容不一样？

element-plus组件 el-drawer， 点击不同按钮时 怎么使el-drawer弹出的内容不一样？

三个简单的解决方法
第一个,每个按钮绑定不同的el-drawer,每个el-drawer显示互斥即可实现,使用v-if or v-show 当然,如果禁止频繁的dom操作建议使用v-show,如果按键太多,建议放弃这个方法
第二个,创建一个el-drawer 在el-drawer内部创建条件显示不同按钮的内容,但是嘛,问题和第一个差不多
第三个 重写el-drawer这个组件使用插槽的方式动态的传入自己的对应显示内容即可
有帮助请采纳,你的采纳是对我最大的鼓励

<template>
  <div>
    <el-button @click="showDrawer('显示我1')" type="primary" style="margin-left: 16px;">
      点我打开
    </el-button>
    <el-button @click="showDrawer('这是按2')" type="primary" style="margin-left: 16px;">
      点我打开1
    </el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <span>{{content}}</span>
    </el-drawer>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        drawer: false,
        content: '',
        direction: 'rtl'
      }
    },
    methods: {
      showDrawer (e) {
        this.drawer = true
        this.content = e
      }
    }
}
</script>

点击按钮，传入不同标识，显示对应组件