element-plus [Component] el-form嵌套带dialog的子组件 disabled以后 dialog内层按钮都没法使用。

aurhwmvo 于 4个月前发布在其他

关注(0)|答案(2)|浏览(123)

Bug Type: Component

Environment

Vue Version: 3.2.45
Element Plus Version: 2.2.26
Browser / OS: UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Build Tool: Vite

Reproduction

el-dialog
el-form
el-form-item

Reproduction Link

Element Plus Playground

Steps to reproduce

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as EpVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
import comp from './Comp.vue'
const msg = ref('Hello World!')
</script>

<template>
  <el-form disabled>
  	<el-form-item label="label测试">
    	<comp></comp>
    </el-form-item>
  </el-form>
</template>

###子组件

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as EpVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'

const msg = ref('Hello World!')
const visibled = ref(false)
const initDialog = ()=>{
  visibled.value= true
}
defineExpose({
  initDialog
})
</script>
<style>
  p{
    margin: 0;
    padding: 0;
    color: blue;
  }
</style>
<template>
  <p @click="initDialog">打开详情信息</p>
  <el-dialog v-model="visibled">
  	<template #footer>
    	<el-button type="primary" @click="visibled = false">关闭弹窗</el-button>
    </template>
  </el-dialog>
</template>