admin管理员组

文章数量:1649936

1.点击组件的标题时控制面板不展开，点击右侧箭头面板展开。

方法一：可以通过样式去控制

<style lang="scss" scoped>

  :deep(.el-collapse-item__header) {

    pointer-events: none;

  }

  :deep(.el-collapse-item__arrow) {

    pointer-events: auto;

  }

</style>

2.折叠面板标题加按钮，点击不让面板展开。

方法一：加事件冒泡阻止

<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item  name="1">
        <template v-slot:title>
               不展开 <el-button type="primary" @click.stop.prevent=handle()>点击不展开</el-button>
                  </template>
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
const handle=()=>{
  console.log('点击头部')
}
</script>

3.隐藏右侧箭头，且改变箭头方向。

<style lang="scss" scoped> 
 :deep(.el-collapse-item__arrow) {

     pointer-events: auto;//显示
     display: none;//隐藏icon
    transform: rotate(270deg); /* 修改箭头方向 */


  }
  :deep(.el-collapse-item__arrow.is-active ){
    transform: rotate(90deg);/* 修改箭头方向 */
}
</style>

本文标签： 面板标题ElementUicollapse

版权声明：本文标题：【折叠面板】点击ElementUI collapse 上的标题时面板不响应折叠展开 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729513682a1204290.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。