<el-collapse 里面的 <el-button 阻止按钮点击时 触发 点击穿透
时间: 2024-02-28 14:54:25 浏览: 19
您可以在 `<el-button>` 上添加 `@click.stop`,以阻止点击事件向下传递。这样,即使您在 `<el-button>` 上点击时,事件也不会穿透到 `<el-collapse>` 上。例如:
```
<el-collapse>
<el-collapse-item title="Title 1">
<p>Content 1</p>
<el-button @click.stop>Click me</el-button>
</el-collapse-item>
<el-collapse-item title="Title 2">
<p>Content 2</p>
</el-collapse-item>
</el-collapse>
```
在上面的示例中,当您单击“Click me”按钮时,该按钮的点击事件不会向下传递到`<el-collapse-item>`和`<el-collapse>` 上。
相关问题
在vue怎么把按钮加到和el-collapse-item的title同一行的问题中,使用<el-collapse> <el-collapse-item name="item1"> <template v-slot:item1> <div style="display: flex; justify-content: space-between;"> <span>Item 1 Title</span> <el-button>Button</el-button> </div> </template> <p>Item 1 Content</p> </el-collapse-item> </el-collapse>这些代码标题不见了,如何解决
可以尝试将<el-collapse-item>中的标题部分和内容部分分开处理,然后使用CSS布局将标题和按钮放在同一行。具体做法如下:
```
<el-collapse>
<el-collapse-item name="item1">
<div class="title-wrapper" slot="title">
<span>Item 1 Title</span>
<el-button>Button</el-button>
</div>
<p>Item 1 Content</p>
</el-collapse-item>
</el-collapse>
<style>
.title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
```
在上面的代码中,我们将标题和按钮放在一个具有`display: flex; justify-content: space-between; align-items: center;`属性的`<div>`标签中。`slot="title"`表示标题部分的插槽,`<p>`标签中的内容则是折叠面板展开后的内容部分。这样就可以让标题和按钮在同一行了。
<el-collapse-transition></el-collapse-transition>
这是一个 Vue.js 组件中的元素,用于实现折叠过渡效果。它可以在元素显示和隐藏时应用 CSS 过渡效果,使得元素的显示和隐藏更加平滑自然。在使用时,需要在组件中引入该元素,并设置相应的属性和事件。例如,可以设置 transition 属性指定过渡效果的名称,设置 v-if 或者 v-show 指令来控制元素的显示和隐藏。