# useVisible

直接打开某个弹窗，不需要在模板中挂载，好好看demo，下面有文档，有新增合理的功能可以补

### Demo

``` html
<!-- DemoDialog -->
<template>
    <el-dialog :model-value="visible" title="Dialog" width="30%" :submit-handle="onSubmit">
        <span>这是我们常见的dialog写法</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="$emit('update:visible', false)">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { defineProps, onMounted, defineExpose } from 'vue'
import { ElButton, ElDialog, ElMessage } from 'element-plus'

const props = defineProps({
    visible: Boolean
})
const emit = defineEmits(['update:visible', 'change'])
function onSubmit() {
    emit('change', 123)
}
function $submit(say: string) {
    ElMessage.success('这里是DemoDialog内部方法哦～' + say)
}
defineExpose({
    $submit
})
onMounted(() => {
    console.log('我挂载了', props)
})
</script>
```

沧海一声笑🤣🤣🤣    
喵喵喵喵喵🐶🐶🐶


### 调用参数第二个参数，UseVisibleProps

| name | 类型 | 说明 |
|------|--------|--------|
| on | `Record<string, Function>` | 示例：`on: { change: handleChange }`，`handleChange`为外部方法，最后一个函数入参是关闭弹窗的回调函数，对应弹窗事件`emit('change', 333, 666)`，`handleChange`会收到`(333, 666, callback)`,具体看demo |
| key | `string` | 弹窗的唯一key值，可以根据该值调用`unuseVisible`在其他位置关闭该弹窗，如果使用同一个key值，会关闭上一个同名弹窗再打开新弹窗 | 
| successEmit | `string` | `successEmit: 'change'`对应弹窗事件`emit('change', 333, 666)`，会在`then`的回调中通过`res.data`获取到 |
| refCallback | `(refInstance: any, hide: () => void) => void` | 有时候，不想打开弹窗，但又想调用弹窗中`expose`的方法，可以使用该方法，第一个参数是弹窗实例，第二个方法在完成`expose`方法后一定要手动调用 |
| slots | `{ slotName: (scopeData: any) => vNode }` | 给渲染组件（第一个参数）提供的插槽功能 |

### 调用参数第三个参数，UseVisibleSetting

| name | 类型 | 说明 |
|------|--------|--------|
| autoClose | `boolean` | 是否自动关闭弹窗，默认`true`， |
| withWrapper | `Component` | 该值传递ElDialog或者其他`props`具有`visible`属性的组件，使用该值将会使用该组件包裹调用参数的第一个参数 | 
| wrapperProps | `object` | `withWrapper`存在时，传递给它的其他props |
| wrapperSlots | `object` | `withWrapper`存在时，传递给它的其他slots |
| wrapperClickOutsideClose | `object` | `withWrapper`形态时，是否可以通过点击渲染组件（第一个参数）以外的位置关闭 |
| beforeMount | `(instance: RealComponentInstance) => void` | 用处不大，在挂载前，可以获得最最外层的组件容器实例，该实例不是传入的组件的，而是传入组件的父组件 |

### 完成后回调，UseVisibleResolve

| name | 类型 | 说明 |
|------|--------|--------|
| success | `boolean` | 是否是通过`successEmit`调用结束的，或者是通过`on`方法的最后一个回调参数调用结束的 |
| data | `any` | 组件`emit`的数据，或者`on`方法成功回调时传递过来的数据 | 
| close | `() => void` | `autoClose`为`false`的时候，调用该方法手动关闭弹窗 |
| ref | `ComponentInternalInstance` | 组件实例，如果autoClose为true，该值为null，可用场景如：收到回调方法后，需要再调用一下组件$validate方法校验一下数据 |